HTML Radio Button Tutorial with Examples – POFTUT

HTML Radio Button Tutorial with Examples

In the old times, radios have some buttons to change stations which have saved to a specific button. HTML also provides radio buttons in order to one of the radio buttons in a group of them. Radio buttons in HTML are defined with the <input> tag because the Radio button is referred to as an input from the user.

Radio Button Tag

We will define a radio button with the <input> tag by providing the type as radio like below. Radio button tag does not have an enclosing tag like </input> etc.

Radio Button Group

Radio buttons generally used as a group. Because the main usage case for radio button is providing some choices to the user and the user select one of them. So we generally provide multiple radio buttons as a group. In or der to create groups the radio button name attribute should be the same for the all radio buttons in the same group. For example, if we want to ask the user age range we have to use the same name age for all radio buttons like below.

Radio Button Group

Radio Button Group

Set Default Radio Button Selection

As one of the radio buttons is selected explicitly by the user the default behavior is all of the radio buttons are unselected. In some cases, we need to provide one radio button as selected by default. We can use checked attributed inside the input tag. In this example, we will provide the Between 18 and 65 selected o checked by default.

Set Default Radio Button Selection

Set Default Radio Button Selection

Check If Given Radio Button Selected

After selecting a radio button we can get or check selected radio button value in JavaScript. We can use different frameworks AngularJS, jQuery, etc but for simplicity, we will use plain JavaScript. We will get the values from the radio button name and iterate over it.

 

 

Disable Radio Button

Radio buttons can be used in different scenarios with where in some cases they must be disabled. We can disable a radio button by using disabled attribute which will disable and prevent selection of the radio button. In this example, we will disable the Over 65 radio button.

Disable Radio Button

Disable Radio Button

Radio Button  vs Check Boxes

Like radio button, there are also checkboxes which provide selection in multiple choices. The main difference between radio button and checkbox is only a single radio button can be checked at one but multiple checkboxes can be checked without a problem.  So radio button suites to single answer questions like age, gender, yes/no, etc. where checkboxes can be sued multiple answer questions like team, schools, cities, etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

Enjoy this blog? Please spread the word :)