Both the checkboxes and radio buttons are generally used when we create forms in HTML documents. Checkboxes are small sized squares and the radio buttons (which are also known as option buttons) are small sized circles. The main difference between the checkbox and the radio buttons is that the former is used to select one or multiple options simultaneously while the latter is used to select only one option at a time from a given set of alternatives.
Inserting the check boxes:
In HTML documents, the checkboxes can be inserted with the help of <input /> with appropriate attributes. For example:
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”potato”> Potato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”tomato”> Tomato
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”carrot”> Carrot
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”soup”> Soup
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”sweets”> Sweets
<INPUT TYPE=”checkbox” NAME=”food” VALUE=”salty”> Salty
The user can choose any one of the above choices or it can select more than one. The TYPE=”checkbox” tells HTML that there should be a checkbox. The NAME and VALUE attribute is used at the time of scripting. Name also indicated that these options are of same category i.e food. All the options of the same category should have the same NAME.
Inserting the radio buttons:
For the radio buttons also we have to mention the type with the input tag. For example:
<INPUT TYPE=”radio” NAME=”clothes” Value=”western”> Western
<INPUT TYPE=”radio” NAME=”clothes” Value=”Indian”> Indian
<INPUT TYPE=”radio” NAME=”clothes” Value=”fusion”> Fusion
The user can select any one of the above option. Note that in the HTML code the NAME of all the options are same i.e. clothes. This tells the HTML that these options are under the same category and only one of them can be selected at a time. If the name is differs, then HTML will consider each of the options under different categories and the user will be able to select all of them. Thus, the naming should be carefully done. Each option under the same category must have a same name and two different categories should not have the same name.
The SELECT Tag:
So far we have seen that how the checkboxes and radio buttons can be used to provide the user with an array of different options to choose from, but the main disadvantage of checkboxes and radio buttons is that both of them occupies a screen space as per the number of options. Imagine if there are hundred options then how much space the checkboxes or radio buttons will take? It will ruin the look of the web page. In order to solve this issue there is one more option which we can use and i.e SELECT tag. It inserts a drop down menu in the web page which can contain infinite number of options without affecting its size.
HTML code for using SELECT Tag:
<SELECT NAME=”drink”>
<OPTION> Coke
<OPTION> Pepsi
<OPTION> Mirinda
<OPTION> Sprite
</SELECT>
The <OPTION> tag is always used with the SELECT in order to list the options in the drop down menu. There is no need to close this tag with a / sign.