Basic HTML forms
Option controls
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.
Checkboxes
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 form
.
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.
Lists
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.
The structure of a list is composed, mainly, by two elements: select
, that acts as the container for the options; and option
, that represents one of the many options the control may present.
When the 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>