These controls allow users to select one or more options form a list of predefined values. Option controls can be presented in different styles and with different mechanisms of interaction with the user, depending mainly on the element utilized. A list of options can be declared in three ways: with checkboxes, with radio buttons and with lists.
A checkbox is a particular type of option that can be checked or unchecked upon user interaction. This allows authors to collect data like preferences, acceptance of terms y conditions, categories, or any other subject that can be answered with "yes" or "no". One thing this control has in particular is that, even when it can be declared as part of a thematic group, each checkbox is independent from all other checkboxes in the
Checkboxes are represented by the
input element, when it has the value "checkbox" in the
type attribute. Here the value of the
name attribute also plays a role, by identifying the option server-side. In the following example, a few checkboxes have been declared as part of a thematic group of options. Remember that this agrupation is only made by theme and position; the selection of checkboxes continues to be independent.
<form action="../../form-result.php" target="_blank"> <p> Select your interests:<br> <input type="checkbox" name="movies"> Movies<br> <input type="checkbox" name="sports"> Sports<br> <input type="checkbox" name="videogames"> Videogames </p> <p><input type="submit" value="Send data"></p> </form>
A couple of things can be noted in the previous example. The first one is the lack of association between the checkbox and the text that describes it or, in other words, the impossibility of activating the checkbox by clicking the associated text. This is something that can be easily remedied converting the text into a
label for the control, subject we'll treat later in this tutorial.
The second one is about how checkbox data is received server-side. If you submit the
form, you'll see that only the selected checkboxes are sent to the processing agent. Their value, that depends very much on the language used server-side, is irrelevant considering that the mere presence of the checkbox's data is indicating, alone, its activation state.
A list of options is a control that can resemble, concerning its mechanics, each of the two controls previously analized, depending on the presence of the boolean attribute
multiple. This attribute changes radically the behavior of a list, by making possible the selection of only one single option at a time or many.
multiple attribute is absent, a list control behaves like a radio button group, where only one option can be selected at a time. The next example reflects this behavior, which fits perfectly with the purpose of the field.
<form action="../../form-result.php" target="_blank"> <p> Gender: <select name="gender"> <option>Male</option> <option>Female</option> </select> </p> <p><input type="submit" value="Send data"></p> </form>
In the previous example, you can see that what's sent to the server is the content of the selected
option. But authors can change this behavior if they think it's necessary, by declaring the attribute
value for the
option. When this attribute is present, its value is sent to the processing agent instead of the content of the element.
Now, when the
multiple attribute is present, the list behaves like a set of checkboxes, where not only one but many options can be selected at the same time. This configuration requires that a couple of square braces follow any value the author choses for the
name attribute. If this requirement isn't fulfilled, processing agents will receive only the first selected option.
The next example shows a list of options that can be selected without restrictions. It also makes use of the
value attribute in the options, to avoid using unnecessary long values during data processing, server-side.
<form action="../../form-result.php" target="_blank"> <p> Select categories:<br> <select multiple name="categories"> <option value="art">Art and entertainment</option> <option value="tv">Television and movies</option> <option value="kids">Kids and teenagers</option> <option value="diy">Do it yourself</option> </select> </p> <p><input type="submit" value="Send data"></p> </form>