Friday, January 3, 2014

Forms >>HTML Radio Button Tag - (PART_31)

Topic

Code to create radio button in html?
How to create pre selected radio button (checked)?
How to disable (non selectable) radio button?


Explanation

Radio Button

Example Code:
<form name=myform>
<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two
<input type="radio" name=myradio value="3">three
</form>


Result:
one two three

Definition:
Here we define the radio button using "input" tag. We give a attribute called "TYPE=RADIO" in the tag which defines the type as a radio button. The attribute name should be defined and be same. The value in this case will be used only during form processing.

Note: All the input of this type should have the same name. This name is what groups them. If you have different names for each radio button then they will behave individually.

Example Code:
<form name=myform>
<input type="radio" name=myradio1 value="1">one
<input type="radio" name=myradio2 value="2">two
<input type="radio" name=myradio3 value="3">three
</form>


Result:
one two three

Pre selected RadioButton
If we want the radiobutton to be shown selected even before the user tries to select one, we have to use the entry "checked".

Example Code:
<form name=myform>
<input type="radio" name=myradio value="1" >one
<input type="radio" name=myradio value="2" checked>two
<input type="radio" name=myradio value="3" >three
</form>


Result:
one two three

Non Editable / Un selectable radio
We can make a radio button unselectable (disable) using the entry "disabled"

Example Code:
<form name=myform>
<input type="radio" name=myradio value="1" disabled>one
<input type="radio" name=myradio value="2" checked disabled>two
<input type="radio" name=myradio value="3" disabled>three
</form>


Result:
one two three