HTML Form tags, Form, input (radio, checkbox) and select

1. Introduction

2. Radio Buttons

          These buttons are used to give the user a list of related items where he/she can choose only one value at a time. The user can click on any item and when they click another item, the latest item clicked will be the chosen value.

          The code below shows an example of the use of radio buttons with three choices. Notice in the code that all three options have the same name. All options that have the same name means that these choices are grouped together. Only one item from a group with the same name can be chosen at any given time.

          Notice also the use of the form tag <label>. As was discussed during the previous module, this tag is used to define the input areas in a form. For the for attribute, use the id of the option that you want the label to refer to.  In this case, when a user clicks on a label, it selects the radio button associated with it.

         The value attribute indicates the value of that item in the set. In the code below, when the first option is selected, the form will return a value of “luzon” as the input of the user. This is not visible to the user. The only visible text for the user is the text inside the <label> tag or any text after the <input type = ”radio”> tag.

Sample code:

3. Checkboxes

          Checkboxes are like radio buttons where they present the user with a group of related choices and the chosen value is the input of the user for processing. The difference between checkboxes and radio buttons is that checkboxes allow the user to choose more than one value.

          The <label> tag in the example below, will also  work the same way as discussed previously. 

 Sample code:

 Sample output:

Notice that the checklist has different names.

3.1. The checked attribute

          Upon loading of a webpage that has checkboxes and radio buttons, the default setting is no item is selected. If you want an item to be selected by default, you can use the checked attribute to indicate an item as selected by default.

          The code snippet below shows how to use the checked attribute.

3.2. Checkboxes options with the same names but different values

            In the example above, we assigned a unique name for each option with a unique value.  When we need to retrieve the values of all checked options, we have to check all names if they are checked in order to get all checked options. To make retrieving of values easier, we can set all options in the same category to have one name. By using a single name, we can iterate through the choices like in an array. See the code snippet below for a set of checkbox options with the same name.

4. Select

          The select tag is used to give the user a list of choices in a dropdown layout. Like the radio button, you can set it so that only one option can be chosen at a time. But you can also set it to accept multiple options from the user by using the attribute multiple, and press on the ctrl or shift key when making several selections

          Notice the use of <label> tag in this code. Remember the discussion of this tag from the last module. The <label> tag works here in the same way that label works for input.

 Sample code:

 Sample output:

          The selected attribute on the opening <option> tag causes it to be pre-selected, much like the effect of checked attribute for radio and checkboxes.

5. Summary and References

Summary

References