Html input radio required

HTML attribute: required

The Boolean required attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.

The attribute is not supported or relevant to range and color, as both have default values. It is also not supported on hidden as it can not be expected that a user to fill out a form that is hidden. Nor is it supported on any of the button types, including image .

Note color and range don’t support required as both always have a value. Type color defaults to #000000 . The default for range is the midpoint between min and max — with min and max defaulting to 0 and 100 respectively in most browsers if not declared.

In the case of a same named group of radio buttons, if a single radio button in the group has the required attribute, a radio button in that group must be checked, although it doesn’t have to be the one on which the attribute is applied. To improve code maintenance, it is recommended to either include the required attribute in every same-named radio button in the group, or else in none.

In the case of a same named group of checkbox input types, only the checkboxes with the required attribute are required.

Note: Setting aria-required=»true» tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.

Attribute interactions

Because a read-only field cannot have a value, required does not have any effect on inputs with the readonly attribute also specified.

Usability

When including the required attribute, provide a visible indication near the control informing the user that the , or is required. In addition, target required form controls with the :required pseudo-class, styling them in a way to indicate they are required. This improves usability for sighted users. Assistive technology should inform the user that the form control is mandatory based on the required attribute, but adding aria-required=»true» doesn’t hurt, in case the browser / screen reader combination does not support required yet.

Constraint validation

If the element is required and the element’s value is the empty string, then the element is suffering from valueMissing and the element will match the :invalid pseudo class.

Accessibility concerns

Provide an indication to users informing them the form control is required. Ensure the messaging is multi-faceted, such as through text, color, markings, and attribute, so that all users understand the requirements whether they have color blindness, cognitive differences, or are using a screen reader.

Example

HTML

form> div class="group"> input type="text" /> label>Normallabel> div> div class="group"> input type="text" required /> label>Requiredlabel> div> input type="submit" /> form> 

Result

Specifications

No specification found

No specification data found for html.elements.attributes.required .
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник

How to Use the «required» Attribute with the Radio Input Field

If you want to use the required attribute for only one input of the radio group, this snippet is for you.

Although setting the required attribute for all inputs is more clear, it is unnecessary (if you don’t need to dynamically generate radio-buttons).

To group radio buttons, they should have the same value for the name attribute. This allows us to select only one radio button at once and apply the required attribute to the whole group. Let’s see how this is done.

Create HTML

form> Select Gender: label> input type="radio" name="gender" value="male" required>Male label> label> input type="radio" name="gender" value="female">Female label> label> input type="radio" name="gender" value="other">Other label> input type="submit"> form>

Example of using the required attribute with the radio input field:

html> html> head> title>Title of the document title> head> body> form action="/form/submit" method="GET"> Select Gender: label> input type="radio" name="gender" value="male" required>Male label> label> input type="radio" name="gender" value="female">Female label> label> input type="radio" name="gender" value="other">Other label> input type="submit"> form> body> html>

Источник

Input Radio required Property

The required property sets or returns whether a radio button must be checked before submitting a form. This property reflects the HTML required attribute.

Browser Support

Syntax

Property Values

• true — The radio button must be checked before submitting a form
• false — Default. The radio button is not a required part of form submission

Technical Details

Return Value:	A Boolean, returns true if the radio buton must be checked before submitting a form, otherwise it returns false

More Examples

Example

Set a radio button to be a required part of form submission:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

HTML DOM Input Radio required property

The HTML DOM input radio required property is associated with the required attribute of an element. The required property is used for setting and returning if it is necessary to check some radio button or not before the form is submitted to the server. This allows the form to not submit if a radio button with required attribute is left unchecked by the user.

Syntax

Following is the syntax for −

Setting the required property.

radioObject.required = true|false

Here, true represents the radio button must be checked while false represents its optional to check the radio button before submitting the form.

Example

Let us look at an example for the input radio required property −

   
Radio required property
 FRUIT: Mango 
 
CHECK  

Output

This will produce the following output −

On clicking the CHECK button −

On clicking the “Submit” button without the radio button being checked −

We have first created an input radio button with id “Mango”, name “fruits” and required attribute set to true. The radio button contained inside a form which has action=”Sample_page.php” for specifying where to submit the form data when clicked on the submit button. The form also has an inline style applied to it −

We have then created a button CHECK that will execute the checkReq() method on being clicked upon by the user.

The checkReq() method uses the getElementById() method to get the input element with type radio and get its required property, which in our case returns true. The returned boolean value is assigned to a variable Req and based on the returned value whether it is true or false we display appropriate message in the paragraph with id “Sample” using its innerHTML property −

Источник

HTML-атрибут Required и радиопереключатели

Чтобы указать пользователю, что перед отправкой формы нужно активировать один из взаимоисключающихся радиопереключателей, достаточно в одном из них указать атрибут required .

Пример

Браузеры

Google Chrome	Показывает уведомление для первого переключателя 1 :
Internet Explorer	Показывает уведомление для переключателя, к которому применяется атрибут:
Mozilla Firefox	Показывает уведомление для первого переключателя 1 , но подсвечивает все:
Opera Next	Показывает уведомление для первого переключателя 1 :
Opera Presto	Показывает уведомление для переключателя, к которому применяется атрибут:
Safari	Не поддерживает данный атрибут.

1. — это переключатель, который в коде находится выше остальных.

При активации одного из переключателей форма отправляется.

Источник