Click and drag to scroll left and right to view all 30 figures.
<!-- figure 5.2 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Forms</h3>
<form method="post" action= "http://www.test.com/register.php">
<!-- Form control elements go here -->
</form>
</body>
</html>
<!-- figure 5.3 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form text input</h3>
<form>
<p>Please complete the form below:</p>
<p>Username: <input type="text" name="uname" required></p>
<p>Password: <input type="password" name="password" required></p>
<p>Email: <input type="email" name="email" placeholder="e.g.,
joe@example.com" required></p>
<p>Phone: <input type="tel" name="phone"></p>
<p>Personal URL: <input type="url" name="url" size="25" maxlength="35"></p>
<p>Search: <input type="search" name="term" value="bolts"></p>
<p><input type="hidden" name="subject" value="registration"></p>
</form>
</body>
</html>
<!-- figure 5.5 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Input pattern</h3>
<form>
Enter product code (XXX999999):
<input type="text" name="product" pattern="[A-Za-z]{3}[0-9]{6}"
title="Three upper- or lower-case letters followed by six digits.">
</form>
</body>
</html>
<!-- figure 5.6 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form number input</h3>
<form>
<p>Please enter quantity required:</p>
<input type="number" name="quantity" value="0" min="0" max="100" step="3">
</body>
</html>
<!-- figure 5.8 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form number input</h3>
<form>
<p>Please enter quantity required:</p>
<input type="range" name="quantity" value="0" min="0" max="100">
</body>
</html>
<!-- figure 5.10 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form range input with values</h3>
<form>
<p>Please use slide to enter quantity:</p>
<output name="quantity">0</output>
<input type="range" name="slideInput" min="0" max="100" value="0"
oninput="quantity.value=slideInput.value">
</body>
</html>
<!-- figure 5.12 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form range and number inputs</h3>
<form>
<p>Please enter quantity in field or with slide:</p>
<input type="number" name="numberInput" min="0" max="100" value="0"
oninput="slideNumber.value=numberInput.value">
<input type="number" name="slideNumber" min="0" max="100" value="0"
oninput="numberInput.value=slideNumber.value">
</form>
</body>
</html>
<!-- figure 5.14 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form time input</h3>
<form>
<p>Please enter time: <input type="time" name="time"></p>
</form>
</body>
</html>
<!-- figure 5.16 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form date input</h3>
<form>
<p>Please enter date: <input type="date" name="date"></p>
</form>
</body>
</html>
<!-- figure 5.18 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form date input</h3>
<form>
<p>Please enter date and time:</p>
<p>Date and time: <input type="datetime-local" name="localdatetime"></p>
</form>
</body>
</html>
<!-- figure 5.20 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form month input</h3>
<form>
<p>Please enter month: <input type="month" name="month"></p>
</form>
</body>
</html>
<!-- figure 5.22 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form week input</h3>
<form>
<p>Please enter week and year: <input type="week" name="week"></p>
</form>
</body>
</html>
<!-- figure 5.24 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Radio buttons</h3>
<form>
Please choose one:<br>
<input type="radio" name="salutation" value="Mr" checked>Mr
<input type="radio" name="salutation" value="Mrs">Mrs
<input type="radio" name="salutation" value="Miss">Miss
<input type="radio" name="salutation" value="Ms">Ms
<input type="radio" name="salutation" value="Dr">Dr
</form>
</body>
</html>
<!-- figure 5.26 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Checkboxes</h3>
<form>
<input type="checkbox" name="commute" value="tube" checked> Tube
<input type="checkbox" name="commute" value="train" checked> train
<input type="checkbox" name="commute" value="car"> car
<input type="checkbox" name="commute" value="Motorcycle"> Motorcycle
<input type="checkbox" name="commute" value="Bicycle"> Bicycle
<input type="checkbox" name="commute" value="Walking" checked> Walking
</form>
</body>
</html>
<!-- figure 5.28 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form submit and reset buttons</h3>
<form>
<input type="submit" value="submit">
<input type="reset" value="cancel">
</form>
</body>
</html>
<!-- figure 5.30 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form image button</h3>
<form>
<p>Please enter login details:</p>
<p>Username: <input type="text" name="uname" required></p>
<p>Password: <input type="password" name="password" required></p>
<input type="image" src="submit.png" width="148 height="32" alt="submit button">
</form>
</body>
</html>
<!-- figure 5.32 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form action button</h3>
<form>
<input type="button" value="Show Message" onclick="alert('This message is
displayed using a JavaScriptfunction.')">
</form>
</body>
</html>
<!-- figure 5.34 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form file upload control</h3>
<form>
<p>Select file:</p>
<input type="file" name="imagefile" accept="image/jpeg, image/png multiple">
</form>
</body>
</html>
<!-- figure 5.36 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form color picker</h3>
<form>
Please secelt color: <input type="color" name="user_color">
</form>
</body>
</html>
<!-- figure 5.38 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form button element</h3>
<form>
<button type="submit"><img src="green_button.png" width="12"
height="12">Start</button>
<button type="submit"><img src="red_button.png" width="12"
height="12">Stop</button>
</form>
</body>
</html>
<!-- figure 5.40 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form textarea</h3>
<form>
<p>Please give us your comments below:</p>
<textarea rows="5" cols="60" name="comments"
dirname="comment.dir"></textarea>
</form>
</body>
</html>
<!-- figure 5.42 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form select control</h3>
<form>
Please select your favorite movie:
<select name="fav_movie">
<optgroup label="Sci-Fi">
<option value="startrek">Star Trek</option>
<option value="starwars" selected>Star Wars</option>
</optgroup>
<optgroup label="Animation">
<option value="shrek">Shrek</option>
<option value="toystory">Toy Story</option>
</optgroup>
</select>
</form>
</body>
</html>
<!-- figure 5.45 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form select control</h3>
<form>
Enter your favorite browser:
<input type="text" name="favBrowser" list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Safari">
<option value="Opera">
</datalist>
</form>
</body>
</html>
<!-- figure 5.47 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form progress element</h3>
<form>
<p>Progress: <progress value="30" max="100"></p>
</form>
</body>
</html>
<!-- figure 5.49 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form meter element</h3>
<form>
Voter turnout: <meter value=0.45></meter><span> 45%</span>
</form>
</body>
</html>
<!-- figure 5.51 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form output element</h3>
<form oninput="sum.value = a.valueAsNumber + b.valueAsNumber">
<p>Please enter date:</p>
<input id="a" name="a" type="range" step="any"> +
<input id="b" name="b" type="number" step="any"> =
<output name="sum" for="a b"></output>
</form>
</body>
</html>
<!-- figure 5.53 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form label element</h3>
<form>
Please enter details:
<p><label>Username: </label><input type="text" name="uname"></p>
<p><label>Password: <input type="password" name="password"></label></p>
<p><label for="email">Email: </label><input type="email" name="email"
id="email"></p>
<p><label for="email">Phone: <input type="tel" name="phone" id="phone">
</label></p>
</body>
</html>
<!-- figure 5.55 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form aria-label</h3>
<form>
<input type="text" name="search" aria-label="Search">
<button type="submit"></button>
</form>
</body>
</html>
<!-- figure 5.57 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Form aria-label</h3>
<form>
<p>Please complete the form below:</p>
<fieldset>
<legend>Personal Info</legend>
<p><label for="uname">Username: </label><input type="text"
name="uname" id="uname"></p>
<p><label for="password">Password: </label><input type="password"
name="password" id="password"></p>
<p><label for="email">Email: </label><input type="email" name="email"
id="email"></p>
<p><label for="phone">Phone: </label><input type="tel" name="phone"
id="phone"></p>
</fieldset>
</form>
</body>
</html>
<!-- figure 5.59 -->
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>I am the title</title>
</head>
<body>
<h3>Forms</h3>
<form>
<p>Please complete the form below:</p>
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First name:</label><input type="text" name="fname"><br>
<label for="lname">Last name:</label><input type="text" name="lname"><br>
<label for="email">Email:</label<input type="email" size="25" maxlength="35"
name="email" id="email" placeholder="e.g., joe@example.com"><br>
<label for="url">Your personal URL (if any): </label><input type="url"
name="url" id="url"><br>
<input type="radio" name="sex" value="male" id="sex1"><label
for="sex1">Male</label>
<input type="radio" name="sex" value="female" id="sex2"><label
for="sex2">Female</label><br>
</fieldset>
<fieldset>
<legend>Other Info</legend>
Which of these do you own?<br>
<input type="checkbox" name="car" id="own1"><label for="own1"> Car</label>
<input type="checkbox" name="bike" id="own2"><label for="own2"> Bike</label>
<br>
<label for="fav_movie">Favorite Movie:</label>
<select name="keywords" content="stuff, some more too">
<optgroup label="Sci-Fi">
<option value="startrek">Star Trek</option>
<option value="starwars">Star Wars</option>
</optgroup>
<optgroup label="Animation">
<option value="Shrek">Shrek</option>
<option value="toystory">Toy Story</option>
</optgroup>
</select>
<br>
<label for="infor">Extra info:</label><br>
<textarea rows="4" cols="35" name="info" id="info"></textarea><br>
</fieldset>
<input type="submit" value="Submit">
<input type="reset" value="Cancel"><br>
</form>
</body>
</html>