Radio button in HTML

The radio buttons are used where you allow the users to select one option from two or more available options. For example,

Gender: Male | Female

Do you agree with the Terms and Conditions: Yes | No

The simplest way to ask a user in the above examples is using the radio button in HTML. The radio buttons are used inside the HTML forms as the input type.

Input type radio

As such, the radio buttons are used inside the HTML forms. You have to specify the input type = radio to create a radio button, for example:

<input type=”radio” name=”sex” value=”Male”>

See an example below that shows a form containing the radio buttons.

The radio group

To create a radio group in forms, you have to give the same name to each radio button. In that case, multiple buttons will be identified by their different values.

For example, for a gender radio button, you will create two input type=radio buttons and name both as “gender” while values of both will be different. These values can be captured after the form is submitted to be processed by the server or client script. See an example below:

A radio button checked example

You may make an option as checked or selected while using the radio group as the web page loads. For that, you can use the “checked” attribute of the HTML.

The following example shows how to make a radio button as selected with an option by using the checked attribute:

As you run this example by clicking the “Experience this online” link, you can see the option “Yes” is checked by default.

Also see HTML Forms