ptg16476052348 LESSON 12: Designing Forms
specifically using the value attribute of the <option> tag. The next form field is a check
box group:
<div>
<label class="field">Toys</label>
<label><input type="checkbox" name="toy" value="digicam"> Digital Camera
</label>
<label><input type="checkbox" name="toy" value="phone"> Smartphone</label>
<label><input type="checkbox" name="toy" value="tablet"> Tablet</label>
</div>As you can see, we use labels for each of the individual check boxes here, too. The next
field is a file upload field:
<div>
<label class="field" for="portrait">Portrait</label>
<input type="file" id="portrait">
</div>The last input field on the form is a text area intended for the user’s bio.
<div>
<label class="field" for="bio">Mini Biography</label>
<textarea id="bio" rows="6" cols="40"></textarea>
</div>After the text area, there’s just the Submit button for the form. After that, it’s all closing
tags for the <form> tag, the <body> tag, and the <html> tag. The full source code for the
page follows, along with a screenshot of the form as shown ea rlier in Figure 12.21.Input ▼
<!doctype html>
<html>
<head>
<title>Registration Form</title>
<style>
form div {
margin-bottom: 1em;
}div.submit input {
margin-left: 165px;
}label.field {
display: block;
float: left;
margin-right: 15px;
width: 150px;▼▼