input (type=radio) element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The input element, having the "radio" value in its type attribute, represents an option that belongs to a group in which no more than one option can be selected at the same time. These groups are usually conformed by a number of radio buttons, all sharing the same value in the name attribute.

In contrast to checkbox controls, the value attribute plays a fundamental role for radio buttons. When the form is submitted only the selected option is sent with the form to the procesisng agent, who has no other way to decide which option has been selected but by looking at the value of the submitted control. This is why the value attribute of each option should be unique in the group.

For a set of radio buttons to belong to the same group, all of them should have the same value in the name attribute.

All radio buttons in a group must be in the same document and belong to the same form or belong to no from at all. Placing radio buttons in different forms or documents will break their grouping.

Examples

Our first example shows a basic options list where the user can check only one option. For this to happen, all option buttons in the list use the same value in their name attributes.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Current employment:<br>
    <input type="radio" name="currentemployment" value="fulltime"> Full-time<br>
    <input type="radio" name="currentemployment" value="parttime"> Part-time<br>
    <input type="radio" name="currentemployment" value="notemployed"> Not employed
  </p>
  <p><input type="submit" value="Send data"></p>
</form>

Current employment:
Full-time
Part-time
Not employed

As you may note in the previous example, the text besides each radio button doesn't respond to the clicks as anyone would expect. In the following example, we'll solve this issue by converting this plain text into a label for the button.

To achieve this, we'll wrap both, the text and the corresponding input with a label element. This way, we'll associate the radio button with everything else inside the label.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Current employment:<br>
    <label><input type="radio" name="currentemployment" value="fulltime"> Full-time</label><br>
    <label><input type="radio" name="currentemployment" value="parttime"> Part-time</label><br>
    <label><input type="radio" name="currentemployment" value="notemployed"> Not employed</label>
  </p>
  <p><input type="submit" value="Send data"></p>
</form>

Current employment:


In our third example, we're making use of the checked attribute, to indicate the browser it should mark the radio button as checked when the page loads and when the form is reset.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Select a course:<br>
    <label><input type="radio" name="course" value="pottery"> Pottery</label><br>
    <label><input type="radio" name="course" value="gardening" checked> Gardening</label><br>
    <label><input type="radio" name="course" value="painting"> Painting</label>
  </p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

Select a course:


Lastly, we're giving a try to the required attribute. When this boolean attribute is present in any of the radio buttons of a particular group, the browser won't allow the submission of the form until one of the buttons in the group has been checked.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Select an area to work in:<br>
    <label><input type="radio" name="workingarea" value="sales" required> Sales</label><br>
    <label><input type="radio" name="workingarea" value="it"> IT</label><br>
    <label><input type="radio" name="workingarea" value="planning"> Planning</label>
  </p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

Select an area to work in:


Attributes

Specific attributes

autofocus

A boolean value instructing the browser to set the focus to this control when the document has finished loading or when the dialog where the control finds itself is shown. If the attribute has the value "autofocus" or the empty string (""), or if it's just present, the control should get the focus as soon as possible, after the page or dialog has been loaded.

Example

<p><input type="radio" name="insurance" value="yes" autofocus></p>

checked

A boolean value indicating if the control should be checked by default, this is, when the page loads or when the form is reset. If the attribute takes the value "checked" or the empty string (""), or if it's just present, the control will be checked by default.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Gender:<br>
    <label><input type="radio" name="gender" value="male"> Male</label><br>
    <label><input type="radio" name="gender" value="female" checked> Female</label>
  </p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

Gender:

disabled

A boolean value indicating wether the control is disabled or not. If the attribute takes the value "disabled" or the empty string (""), or if it's just present, the control will be disabled.

Disabled controls are rendered greyed out (if visible), are blocked from user interaction and, more importantly, their values (if any) aren't sent when the form is submitted.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Pick a color for your profile:<br>
    <label><input type="radio" name="color" value="red"> Red</label><br>
    <label><input type="radio" name="color" value="green"> Green</label><br>
    <label><input type="radio" name="color" value="blue" disabled> Blue (out of stock)</label>
  </p>
  <p>
    <input type="submit" value="Send data"></p>
</form>

Pick a color for your profile:


form

The value of the id attribute of the form with which this control is associated to.

This attribute is new in HTML5 and helps defining the pertenence of controls in nested or distant forms.

All radio buttons in a group must belong to the same form or belong to no from at all. Placing radio buttons in different forms or documents will break their grouping.

Example

<p>
  Income:<br>
  <label><input type="radio" name="income" value="under10000" form="form1"> Under $10,000</label><br>
  <label><input type="radio" name="income" value="over10000" form="form1"> Over $10,000</label>
</p>
<form id="form1" action="../../form-result.php" method="post" target="_blank">
  <p><input type="submit" value="Send data"></p>
</form>

Income:

name

A name for the control. This name will be sent by the browser to the processing agent, paired with the content of the value attribute. Both attributes together will conform a name-value pair that will be used to process the form data.

Currently, the value isindex, formerly used in a special way by some browsers and included in the HTML standard, isn't permitted in this attribute.

For a set of radio buttons to belong to the same group, all of them should have the same value in the name attribute.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Working as:<br>
    <label><input type="radio" name="workingas" value="employee"> Employee</label><br>
    <label><input type="radio" name="workingas" value="freelancer"> Freelancer</label>
  </p>
  <p><input type="submit" value="Send data"></p>
</form>

Working as:

required

A boolean value indicating wether the user can leave every option in the group deselected. If this attribute has the value "required" or the empty string (""), or if it's just present, the user will have to select an option in the group in order to be able to submit the form.

When this boolean attribute is present in any of the radio buttons of a particular group, the browser won't allow the submission of the form until one of the buttons in the group has been checked.

Browser support for the attribute required is incomplete. Authors may have to rely on scripts to provide this functionality cross-browser.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Travel by:<br>
    <label><input type="radio" name="travelby" value="plane" required> Plane</label><br>
    <label><input type="radio" name="travelby" value="bus"> Bus</label>
  </p>
  <p>
    <input type="submit" value="Send data">
    <input type="reset" value="Reset form">
  </p>
</form>

Travel by:

type

A value indicating the type of the field that this element represents. There are twenty two possible values (case-insensitive):

  • hidden: a hidden control used to send information to the server, typically managed by scripts.
  • text: a control used to input a single-line piece of text.
  • search: same as text but for search purposes.
  • tel: a control used to provide a telephone number.
  • url: a text box used to input a single and absolute URL.
  • email: a control designed to edit one or more e-mail addresses.
  • password: a text box for editing passwords, where the characters are represented by dots.
  • date: a control to input a specific date.
  • month: a control to input a specific month.
  • week: a control to input a specific week.
  • time: a control to input a specific time.
  • datetime-local: a control to input a specific local date and time.
  • number: a control to input a number.
  • range: a control to input one or two numbers inside a range.
  • color: a control to input a color.
  • checkbox: a control to input a boolean value (true/false).
  • radio: a control used to choose one single option among many.
  • file: a control used to upload files to the server.
  • submit: a button used to submit the form.
  • image: same as submit but with the ability to be shown as an image instead of using the default button appearance.
  • reset: a button used to reset the form's controls to their default values.
  • button: a button with no default action associated.

When this attribute isn't present, the element behaves as it would have the value "text".

Example

<input type="radio" name="children" value="over5">

value

A value for the control, that will be submitted to the processing agent, paired with the value of the name attributo, only if the radio button has been checked.

Example

<form action="../../form-result.php" method="post" target="_blank">
  <p>
    Submit method:<br>
    <label><input type="radio" name="submitmethod" value="post"> POST</label><br>
    <label><input type="radio" name="submitmethod" value="get"> GET</label>
  </p>
  <p><input type="submit" value="Send data"></p>
</form>

Submit method:

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.