How to Add a Label to HTML Radio Button

Radio button allows user to choose only one of the pre-defined options. Each radio button must be accompanied by a label describing the choice it represents.

There are two ways to label radio button elements. One is to enclose the whole <input type=”radio”> tag inside <label > tags:

Html Radio Button Label

Another alternative is to provide an ID for each radio element and then use that ID in the for attribute of the label.

<input type = “radio” id = “sizeSmall” … /> <label for = “sizeSmall”> Small </label>

Here is another example; we are using a fieldset element to show better grouping of the choices.

All radio buttons with same name are treated as a group. When the form is submitted it will include contents of ‘value’ attribute corresponding to the selected radio button.



Comments on this entry are closed.