HTML Radio Buttons and Checkboxes

HTML Form Element: Radio Buttons

You have this radio button several times. Radio buttons are provided when the options to choose from are
very limited, like while taking input for sex of person, agreement of disagreement from terms and conditions
etc. The html radio buttons are created by the specifying the type attribute of html input element as
radio.

For example the code below creates two radio buttons with labels.

Code Output

Sex: <br>
Male: <input type=radio>
Female: <input type=radio> 		Sex:

Male:
Female:

The code above creates two radio buttons with labels Male and Female. When you click on any of the radio
button, it becomes checked. Try this by yourself, by clicking both the buttons

Were the buttons were working perfect? No? Oh, the browser does not allow checking any of the radio
buttons. Did we do something wrong?

Yes, off course we have mistaken somewhere. Can you remember what is wrong here? Is the very first HTML tip
of any help here? Ok now we will assign some names to it, so that the browser may recognize these elements.
Below is the modified code.

Code Output 
Sex: <br>
Male:<input type=radio  name=male /> <br>
Female:<input type=radio name=female />
Sex:
Male:
Female:

Now try this time. This time we are able to select both the radio boxes at the same time. This time the
browser does understand that there are two input fields. See the two. To force the browser to take them as two
options of one element only we assign both the elements same name. The modified code becomes now.

Code Output 
Sex: <br>
Male:<input type=radio  value=male name=sex> <br>
Female:<input type=radio value=female name=sex>
Sex:
Male:
Female:

Now try this time. Phew ! It works now. As soon as one changes the selection, the browser understanding
that a single radio element can not have multiple values, it clears the previous selection. One more thing I
would like to add here that once selected you will not be able to deselect the option. You must make a
choice.

What if I want to show the radio button selected by default? For this you will have to use the Boolean
attribute “checked”. Example of a radio option with default option selected.

Code Output 
Sex: <br>
Male:<input type=radio  value=male name=sex><br>
Female:<input type=radio value=female name=sex checked>
Sex:
Male:
Female:

HTML Form Element: Checkbox

Unlike radio buttons checkboxes allow multiple selections. A checkbox is created by the setting the famous
"type" attribute of input element to “checkbox”. The browser creates a box which can be checked or unchecked.
This time though, the user can select multiple options. This was the purpose, I think, to introduce the
checkboxes.

The following examples will help you understand checkboxes further

Code Output

Choose your subscriptions: <br>
<input type=checkbox name=php>Php Tutorial<br>
<input type=checkbox name=html checked>HTML Tutorials<br>
<input type=checkbox name=css>CSS Tutorial<br> 		Choose your subscriptions:

Php Tutorial

HTML Tutorials

CSS Tutorial
  • 486 reads