HTML and CSS Reference
In-Depth Information
individual labels for each button. The individual labels allow you to select the radio but-
tons by clicking their labels. As you can see, I used the approach of putting the
<input>
tags inside the
<label>
tags to associate them.
The next field is a select list that enables the user to indicate which operating system he
runs on his computer:
<div>
<label class=”required field”>
Operating System
</label>
<select name=”os”>
<option value=”windows”>
Windows
</option>
<option value=”macos”>
Mac OS
</option>
<option value=”linux”>
Linux
</option>
<option value=”other”>
Other ...
</option>
</select>
</div>
This select list is a single-line, single-select field with four options. Instead of using the
display values as the values that will be sent back to the server, we opt to set them
specifically using the
value
attribute of the
<option>
tag. The next form field is a check
box group:
11
<div>
<label class=”field”>Toys</label>
<label><input type=”checkbox” name=”toy” value=”digicam” />
Digital
Camera
</label>
<label><input type=”checkbox” name=”toy” value=”mp3” />
MP3
Player
</label>
<label><input type=”checkbox” name=”toy” value=”wlan” />
Wireless
LAN
</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”>
Portrait
</label>
<input type=”file” name=”portrait” />
</div>
The last input field on the form is a text area intended for the user's bio.
<div>
<label class=”field”>Mini Biography</label>
<textarea name=”bio” rows=”6” cols=”40”></textarea>
</div>
