HTML Radiobutton

HTML Radiobutton is the form element  to select only one option from multiple options that a user can choose from. It is presented as a small clickable circle. When a user clicks in this small circular button, a dot appears in it indicating that the user has selected the specific item. 

The example of data that can  be entered in an HTML Radiobutton are gender, choice of size for filtering items in an online store, selecting one type of pizza base for ordering, mode of payment, etc .

Syntax – HTML Radiobutton

A Radiobutton in an HTML form is created by using INPUT tag. The TYPE attribute is set to value “RADIO”. It indicates that the control will allow the user to select only one option by clicking in the small circle given along with text or label. 

<INPUT TYPE=” RADIO” [other attributes]>

Attributes- HTML Radiobutton

HTML Radiobutton control uses the following attributes.

TYPE

The TYPE attribute is used to define the type of control to be added in the HTML form. Here it is give as “RADIO”.

ID

This attribute is used to give identification to the Radiobutton in a web form element. The ID must be an alphanumeric string. The ID value for each field of web form must be unique. This ID is used in a script to manipulate the data entered by a user in the Radiobutton.

NAME

The NAME attribute is used to give name to one Radiobutton or common name to a group of Radiobuttons.  The name attribute is used to access its values by the associated php or asp script file.

If you need to add different fields as radio buttons then multiple groups of radio buttons can be created. Each group with same name will allow only one of the radiobuttons in group to be checked.

For example if you want to add three different groups of radiobuttons for gender, size of the item to be ordered and payment mode, then you will create three groups of multiple radio buttons. All radio buttons in each group will have the same name. Say- gender (3 radio buttons), size (5 radio buttons) and paymentmode(5 radio buttons). The selected options from each group will be sent along with the name of the radiobutton group as key-value pair.

VALUE

The VALUE attribute represents the value of the Radiobutton when the data is sent to a script. It can be numeric or text.

CHECKED

If a specific Radiobutton is to be presented as selected by default when the HTML Form is rendered in the browser, then this attribute must be included in the INPUT tag with TYPE=’RADIO”. You can select only one Radiobuttons in a group of radio buttons having same name in the HTML form.

Example of HTML Radiobutton

<H2>Choose your Options</H2>

<div>
  <h3> Gender</h3>
  <input type="RADIO" id="gender" name="gender"  value="Female" checked>
  <label for="gender">Female</label>
  <input type="RADIO" id="gender" name="gender"  value="Male">
  <label for="gender">Male</label>
  <input type="RADIO" id="gender" name="gender" value="Transgender">
  <label for="gender">Transgender</label>
</div>

<div>
  <h3> Size</h3>
  <input type="RADIO" id="size" name="size"  value="8">
  <label for="size">8</label>
  <input type="RADIO" id="size" name="size"  value="10">
  <label for="size">10</label>
  <input type="RADIO" id="size" name="size"  value="12" checked>
  <label for="size">12</label>
  <input type="RADIO" id="size" name="size" value="14">
  <label for="size">14</label>
</div>

<div>
  <h3>Payment Options</h3>
  <input type="RADIO" id="payment" name="payment"  value="NB" >
  <label for="payment">Netbanking</label>
  <input type="RADIO" id="payment" name="payment"  value="CC" checked>
  <label for="payment">Credit Card</label>
  <input type="RADIO" id="payment" name="payment" value="DC">
  <label for="payment">Debit Card</label>
  <input type="RADIO" id="payment" name="payment" value="WA">
  <label for="payment">Wallet</label>
  <input type="RADIO" id="payment" name="payment" value="COD">
  <label for="payment">Cash on Delivery</label>
</div>
HTML Radiobutton example