HTML Tutorial





Español Français 中文 Deutsch Portuguese Japanese nederlands
   
 
HTML Basic
Introduction
How To
HTML Tags
html, head, body
Text Manipulation
IMAGES
Special Effects
Using Tables
Forms
Other Topics
 

ADVANCED HTML
Introduction
Media
Meta Tag
Frame tags
Fieldset
Tooltip
DTD
Image tags
Subscript & Superscript
Bullet styles
Canvas
Other tags
Ask Your Doubts
More about HTML
Feedback
 




HTML Radio Button Tag


Tutorials Html

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




Other Links

web hosting