Radio Button Control

It is a small, round button which enable users to select a single option from a list of choices. It is used when only one option is required to be selected. It is created with the <input> tag with a value of “radio” in the type attribute. When the user selects one of the options by pressing the radio button, the circle is filled in with a black dot.

A single radio button is used for each choice and for different choices, many radio buttons are used each near to other but with same value in the ‘name’ attribute and different values in the ‘value’ attribute to group all of them so that the one which is selected, its value is sent for data transfer or processing.

HTML code

<input type=”radio” name=”Contact” value=”phone”> phone<br />

</form>

Browser output

To set any radio button to be selected when the page is initially loaded, use the checked attribute in the input tag. Users can select a different option if they want.

<input type=”radio” name=”Contact” value=”fax” checked=”checked”> fax

Its attributes can be explained as

name: It is the name of the control.

value: It is used to indicate the value that will be sent to server if this option is selected.

checked: It indicates that this option should be selected by default when web page loads.