Creating Radio Buttons

Creating Radio Buttons in HTML

Creating Radio Buttons: Radio buttons are useful in seeking a single value response from users. These are different from check boxes because a user can tick on any number of check boxes while radio buttons restrict the user to tick only one of the radio buttons. This adds advantage for the programmer to capture the required field if only a single value is to be taken from the form user or quiz attempting person. Below is a sample code for radio buttons:

Sample Radio Buttons Code:

<label>What is your ancestral land </label>

  <p>

        <input type = “radio”

                 name = “land”

                 id = “Lahore”

                                                                                                                                                  value = “Lahore” />Lahore</p>

          <p><input type = “radio”

                 name = “land”

                 id = “Disney”

                 value = “Disney” />Disney</p>

         <p> <input type = “radio”

                 name = “land”

                 id = “Calcuta”

                 value = “Calcuta”

                 checked = “checked” />Calcuta

</p>

 

How to build radio buttons from scratch? Gotta’ follow it step by step:

Step 1: It is always a good practice to give a label to your form fields, in this case to the radio buttons:

<label>What is your ancestral land   </label>

Step 2: Begin a new paragraph <p></p>

Step 3: Place your first <input> for radio button inside the <p></p> tags:

<p>

<input type = “radio”

                 name = “land”

                 id = “Lahore”

value = “Lahore” />Lahore

</p>

Do note that our input type is “radio” while our name must remain the same for all radio elements of this group. Id and value can be unique but it is a must for the set of radio buttons to work that “name” attribute must be common among all the radio elements.

Step 4: Add another radio button:

<p>

<input type = “radio”

                 name = “land”

                 id = “Disney”

                 value = “Disney” />Disney

</p>

Step 5: Add more radio buttons and make sure that the name attribute remains unchanged for all.

Step 6: Testing your radio buttons in some fine browser for results:

 

What is the name of your ancestral land?

Lahore

Disney

Calcuta

 

Well, it seems working fine. But there could be scenarios when we require a default check box which is already ticked. For this purpose we could use the “Checked” attribute of the radio dialogue box.

Step 7: Preselecting a radio button as default selection:

checked = “checked”

<input type = “radio”

                 name = “land”

                 id = “Calcuta”

                 value = “Calcuta”

                 checked = “checked” />Calcuta

The portion highlighted above performs the function of preselecting in radio buttons. Let us now refresh our browser for the change reflected by above alteration:

 

Lahore

Disney

Calcuta

 

We can see that Calcutta is already checked before user input. 

 

Leave a Reply