HTML and CSS Reference
In-Depth Information
Check Boxes
Check boxes are very similar to radio buttons. They use the same attributes and patterns,
with the exception of checkbox as their type attribute value. The difference between
the two is that check boxes allow users to select multiple values and tie them all to one
control name, while radio buttons limit users to one value.
Click here to view code image
1. <input type="checkbox" name="day" value="Friday" checked> Friday
2. <input type="checkbox" name="day" value="Saturday"> Saturday
3. <input type="checkbox" name="day" value="Sunday"> Sunday
Figure 10.10 A group of check boxes created using the <input> element with a
type attribute value of checkbox
Drop-Down Lists
Drop-down lists are a perfect way to provide users with a long list of options in a practical
manner. A long column of radio buttons next to a list of different options is not only visu-
ally unappealing, it's daunting and difficult for users to comprehend, especially those on a
mobile device. Drop-down lists, on the other hand, provide the perfect format for a long
list of choices.
To create a drop-down list we'll use the <select> and <option> elements. The <se-
lect> element wraps all of the menu options, and each menu option is marked up using
the <option> element.
The name attribute resides on the <select> element, and the value attribute resides
on the <option> elements that are nested within the <select> element. The value
attribute on each <option> element then corresponds to the name attribute on the <se-
lect> element.
Each <option> element wraps the text (which is visible to users) of an individual option
within the list.
Much like the checked Boolean attribute for radio buttons and check boxes, drop-down
menus can use the selected Boolean attribute to preselect an option for users.
Search WWH ::

Custom Search