Example 1
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Text Input Field</title>
</head>
<body>
<form>
<label for="user-name">Username:</label>
<input type="text" name="username" id="user-name">
</form>
</body>
</html>
Example 2
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Password Input Field</title>
</head>
<body>
<form>
<label for="user-pwd">Password:</label>
<input type="password" name="user-password" id="user-pwd">
</form>
</body>
</html>
Example 3
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML checkboxes and radio buttons</title>
</head>
<body>
<form method="post" action="" >
<fieldset>
<legend>Hobbies</legend>
<input type="checkbox" name="hobby" value="sports" id="sport">
<label for="sport">Sports</label>
<input type="checkbox" name="hobby" value="music" id="music">
<label for="music">Music</label>
<input type="checkbox" name="hobby" value="reading" id="read">
<label for="read">Reading</label>
</fieldset>
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>
</fieldset>
</form>
</body>
</html>
Example 4
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML select box</title>
</head>
<body>
<form action="">
<select>
<option value="Jeep">Jeep</option>
<option value="Ford">Ford</option>
<option value="Pontiac">Pontiac</option>
</select>
</form>
</body>
</html>
Example 5
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML select box</title>
</head>
<body>
<form action="">
<select>
<option value="Jeep">Jeep</option>
<option value="Ford" selected="selected">Ford</option>
<option value="Pontiac">Pontiac</option>
</select>
</form>
</body>
</html>
Example 6
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML optgroup tag</title>
</head>
<body>
<form>
<select>
<optgroup label="Sports cars">
<option value="Porche">Porche</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Luxury cars">
<option value="mercedes">Mercedes</option>
<option value="bentley">Bentley</option>
</optgroup>
</select>
</form>
</body>
</html>
Example 7
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML select box with multiple selection</title>
</head>
<body>
<form action="">
<select multiple="multiple">
<optgroup label="Sports cars">
<option value="ferrari">Ferrari</option>
<option value="lamborghini">Lamborghini</option>
</optgroup>
<optgroup label="Luxury cars">
<option value="mercedes">Mercedes</option>
<option value="bentley">Bentley</option>
</optgroup>
</select>
</form>
<p><strong>Note:</strong> Press control or shift key on the keyboard while clicking on the other options to enable multiple selections.</p>
</body>
</html>
Example 8
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML From Textarea</title>
</head>
<body>
<form>
<label for="address">Address:</label>
<textarea rows="3" cols="30" name="address" id="address"></textarea>
</form>
</body>
</html>
Example 9
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML button</title>
</head>
<body>
<form method="post" action="">
<input type="button" value="Click Me">
</form>
</body>
</html>
Example 10
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of file select form control</title>
</head>
<body>
<form method="post" action="action.php">
<label for="file-select">Select File:</label>
<input type="file" name="upload" id="file-select">
</form>
</body>
</html>
Example 11
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>Example of HTML fieldset tag</title>
</head>
<body>
<form action="http://codedskills.net/" method="post">
<fieldset>
<legend>Gender</legend>
<input type="radio" name="gender" value="male" id="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>
</fieldset>
</form>
</body>
</html>
Example 12
Code: Select all
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Submit and Reset Buttons</title>
</head>
<body>
<form action="/examples/html/action.php" method="post">
<label for="first-name">First Name:</label>
<input type="text" name="first-name" id="first-name">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>