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>

Select your interests:
Movies
Sports
Videogames

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.

Radio buttons

While checkboxes are independent and can be declared on their own, radio buttons are options that need to be grouped in order to have a meaning. Groups of radio buttons have a particularity that plays strong in their behavior: only one option can be selected at a time in all the group. This means, among other things, that when you select one option, the previous selected option gets deselected.

A radio button is also declared with the input element, but with the value "radio" in the type attribute. Here things get a little different from what happened with checkboxes, because the value of the name attribute needs to be shared by all the options in the same group. In other words, this is the mechanism that needs to be used in order to create a group of radio buttons.

But then, where's the value that tells the processing agent what option in the group has been selected? The answer to this question is in the value attribute. As the purpose of this attribute is to identify options in a group, its value should be different for each option.

In the following example a group of radio buttons has been declared to conform a group where only one option can be selected, something that absolutely makes sense in this context. For this purpose, all the buttons share the same name and have, each, a different value.

<form action="../../form-result.php" target="_blank">
  <p>
    Income:<br>
    <input type="radio" name="income" value="lowerthan1000"> Lower than $1,000.00<br>
    <input type="radio" name="income" value="from1000to5000"> From $1,000.00 to $5,000.00<br>
    <input type="radio" name="income" value="higherthan5000"> Higher than $5,000.00
  </p>
  <p><input type="submit" value="Send data"></p>
</form>

Income:
Lower than $1,000.00
From $1,000.00 to $5,000.00
Higher than $5,000.00

Here you can see again the lack of interaction between the text and the radio buttons. This problem will be solved later in this tutorial.

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.

If the size attribute has a value of "1" and the multiple attribute is absent, browsers usually display this control as a drop-down list box. Otherwise, the control takes the form of a scrollable box.

<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>

Gender:

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.

When the multiple attribute is present, most browsers automatically change the display of the control to a scrollable box, independetly of what value the size attribute has.

To select more than one option in a multiple selection list, users can click options while holding down the CTRL key. A range can also be selected using the SHIFT key.

<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>

Select categories:

Prev1234Next

X

Are you looking for a place to host your next website? I can help you with that!