Search results
The <input type="radio"> defines a radio button. Radio buttons are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.
- Tryit Editor V3.6
The W3Schools online code editor allows you to edit code and...
- HTML Forms
The <form> element is a container for different types of...
- Tryit Editor V3.6
- Overview
- Try it
- Value
- Additional attributes
- Using radio inputs
- Validation
- Styling radio inputs
elements of type radio are generally used in radio groups—collections of radio buttons describing a set of related options.
Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.
They are called radio buttons because they look and operate in a similar manner to the push buttons on old-fashioned radios, such as the one shown below.
Defining a radio group
A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group. You can have as many radio groups on a page as you like, as long as each has its own unique name. For example, if your form needs to ask the user for their preferred contact method, you might create three radio buttons, each with the name property set to contact but one with the value email, one with the value phone, and one with the value mail. The user never sees the value or the name (unless you expressly add code to display it). The resulting HTML looks like this: Here you see the three radio buttons, each with the name set to contact and each with a unique value that uniquely identifies that individual radio button within the group. They each also have a unique id, which is used by the element's for attribute to associate the labels with the radio buttons. You can try out this example here:
Data representation of a radio group
When the above form is submitted with a radio button selected, the form's data includes an entry in the form contact=value. For example, if the user clicks on the "Phone" radio button then submits the form, the form's data will include the line contact=phone. If you omit the value attribute in the HTML, the submitted form data assigns the value on to the group. In this scenario, if the user clicked on the "Phone" option and submitted the form, the resulting form data would be contact=on, which isn't helpful. So don't forget to set your value attributes! It's fairly uncommon to actually want to allow the form to be submitted without any of the radio buttons in a group selected, so it is usually wise to have one default to the checked state. See Selecting a radio button by default below. Let's add a bit of code to our example so we can examine the data generated by this form. The HTML is revised to add a block to output the form data into: Then we add some JavaScript to set up an event listener on the submit event, which is sent when the user clicks the "Submit" button: Try this example out and see how there's never more than one result for the contact group.
In addition to the common attributes shared by all elements, radio inputs support the following attributes.
checked
A Boolean attribute which, if present, indicates that this radio button is the default selected one in the group.
Unlike other browsers, Firefox by default persists the dynamic checked state of an across page loads. Use the autocomplete attribute to control this feature.
value
The value attribute is one which all s share; however, it serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string on by default. This is demonstrated in the section Value above.
Selecting a radio button by default
To make a radio button selected by default, you include checked attribute, as shown in this revised version of the previous example: In this case, the first radio button is now selected by default.
Providing a bigger hit area for your radio buttons
In the above examples, you may have noticed that you can select a radio button by clicking on its associated element, as well as on the radio button itself. This is a really useful feature of HTML form labels that makes it easier for users to click the option they want, especially on small-screen devices like smartphones. Beyond accessibility, this is another good reason to properly set up elements on your forms.
Radio buttons don't participate in constraint validation; they have no real value to be constrained.
The following example shows a slightly more thorough version of the example we've seen throughout the article, with some additional styling, and with better semantics established through use of specialized elements. The HTML looks like this:
The CSS involved in this example is a bit more significant:
Most notable here is the use of the appearance property (with prefixes needed to support some browsers). By default, radio buttons (and checkboxes) are styled with the operating system's native styles for those controls. By specifying appearance: none, you can remove the native styling altogether, and create your own styles for them. Here we've used a border along with border-radius and a transition to create a nice animating radio selection. Notice also how the :checked pseudo-class is used to specify the styles for the radio button's appearance when selected.
Notice that when clicking on a radio button, there's a nice, smooth fade out/in effect as the two buttons change state. In addition, the style and coloring of the legend and submit button are customized to have strong contrast. This might not be a look you'd want in a real web application, but it definitely shows off the possibilities.
- change and input
- checked, value and required
- checked and value
May 16, 2024 · The HTML <input type=”radio”> defines a radio button, grouped by sharing the same name attribute. Only one button in a group can be selected at a time.
- 3 min
The <form> element is a container for different types of input elements, such as: text fields, checkboxes, radio buttons, submit buttons, etc. All the different form elements are covered in this chapter: HTML Form Elements . The <input> Element. The HTML <input> element is the most used form element.
The radio input type displays a radio button that the user can toggle on and off. radio differs from checkbox in the way it is displayed. When building a list of radio buttons, the name attribute must be identical for each option in the list.
Attribute NameNotesSpecifies the interval between valid ...Specifies that the input field is ...Disallows the user from editing the value ...Specifies placeholder text in a ...Jul 27, 2017 · <input type="radio"> In This Article. <input> elements of type radio are rendered by default as small circular icons that are selected when activated. Radio buttons allow you to select a single value out of a number of set choices for submission in a form.
People also ask
What is HTML input type=”radio”?
What are input elements of type radio?
What is a radio button in HTML?
How to add radio buttons in a form using HTML?
<input type="radio"> <input> elements of type radio are generally used in radio groups —collections of radio buttons describing a set of related options. Only one radio button in a given group can be selected at the same time. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected. Try it.
