1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<header><h1>HTML attribute: required</h1></header><div class="section-content">
<p>The <a href="https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML">Boolean</a> <code>required</code> attribute, if present, indicates that the user must specify a value for the input before the owning form can be submitted.</p> <p>The <code>required</code> attribute is supported by <code><a href="../element/input/text">text</a></code>, <code><a href="../element/input/search">search</a></code>, <code><a href="../element/input/url">url</a></code>, <code><a href="../element/input/tel">tel</a></code>, <code><a href="../element/input/email">email</a></code>, <code><a href="../element/input/password">password</a></code>, <code><a href="../element/input/date">date</a></code>, <code><a href="../element/input/month">month</a></code>, <code><a href="../element/input/week">week</a></code>, <code><a href="../element/input/time">time</a></code>, <code><a href="../element/input/datetime-local">datetime-local</a></code>, <code><a href="../element/input/number">number</a></code>, <code><a href="../element/input/checkbox">checkbox</a></code>, <code><a href="../element/input/radio">radio</a></code>, <code><a href="../element/input/file">file</a></code>, <a href="../element/input"><code><input></code></a> types along with the <a href="../element/select"><code><select></code></a> and <a href="../element/textarea"><code><textarea></code></a> form control elements. If present on any of these input types and elements, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> pseudo class will match. If the attribute is not included, the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a> pseudo class will match.</p> <p>The attribute is not supported or relevant to <a href="../element/input/range">range</a> and <a href="../element/input/color">color</a>, as both have default values. It is also not supported on <a href="../element/input/hidden">hidden</a> 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 <code>image</code>.</p> <p>Note <code>color</code> and <code>range</code> don't support <code>required</code> as both always have a value. Type <code>color</code> defaults to <code>#000000</code>. The default for <code>range</code> is the midpoint between <code>min</code> and <code>max</code> — with <code>min</code> and <code>max</code> defaulting to 0 and 100 respectively in most browsers if not declared.</p> <p>In the case of a same named group of <a href="../element/input/radio">radio</a> buttons, if a single radio button in the group has the <code>required</code> 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 <code>required</code> attribute in every same-named radio button in the group, or else in none.</p> <p>In the case of a same named group of <a href="../element/input/checkbox">checkbox</a> input types, only the checkboxes with the <code>required</code> attribute are required.</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> Setting <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-required"><code>aria-required="true"</code></a> tells a screen reader that an element (any element) is required, but has no bearing on the optionality of the element.</p> </div>
</div>
<h3 id="attribute_interactions">Attribute interactions</h3>
<div class="section-content"><p>Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <a href="readonly"><code>readonly</code></a> attribute also specified.</p></div>
<h3 id="usability">Usability</h3>
<div class="section-content"><p>When including the <code>required</code> attribute, provide a visible indication near the control informing the user that the <a href="../element/input"><code><input></code></a>, <a href="../element/select"><code><select></code></a> or <a href="../element/textarea"><code><textarea></code></a> is required. In addition, target required form controls with the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> 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 <code>aria-required="true"</code> doesn't hurt, in case the browser / screen reader combination does not support <code>required</code> yet.</p></div>
<h3 id="constraint_validation">Constraint validation</h3>
<div class="section-content"><p>If the element is required and the element's value is the empty string, then the element is suffering from <a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>valueMissing</code></a> and the element will match the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> pseudo class.</p></div>
<h2 id="accessibility_concerns">Accessibility concerns</h2>
<div class="section-content"><p>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.</p></div>
<h2 id="example">Example</h2>
<h3 id="html">HTML</h3>
<div class="section-content"><div class="code-example">
<p class="example-header"><span class="language-name">html</span></p>
<pre data-signature="N2q3fmrY+xR1CAiLsVVYSXIWpO+XPUb9O1jt6cE9cfk=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Normal<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>group<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">required</span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span>Required<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>submit<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span>
</pre>
</div></div>
<h3 id="result">Result</h3>
<div class="section-content"><div class="code-example" id="sect2">
<iframe class="sample-code-frame" title="Example sample" id="frame_example" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Attributes/required/runner.html?id=example" loading="lazy"></iframe>
</div></div>
<h2 id="specifications">Specifications</h2>
<div class="notecard warning">
<strong>No specification found</strong><p>No specification data found for <code>html.elements.attributes.required</code>.<br><a href="#on-github">Check for problems with this page</a> or contribute a missing <code>spec_url</code> to <a href="https://github.com/mdn/browser-compat-data">mdn/browser-compat-data</a>. Also make sure the specification is included in <a href="https://github.com/w3c/browser-specs">w3c/browser-specs</a>.</p>
</div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ValidityState/valueMissing"><code>validityState.valueMissing</code></a></li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:required"><code>:required</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:optional"><code>:optional</code></a>
</li> <li><a href="../element/input"><code><input></code></a></li> <li><a href="../element/select"><code><select></code></a></li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required</a>
</p>
</div>
|
