diff options
| author | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
|---|---|---|
| committer | Craig Jennings <c@cjennings.net> | 2024-04-07 13:41:34 -0500 |
| commit | 754bbf7a25a8dda49b5d08ef0d0443bbf5af0e36 (patch) | |
| tree | f1190704f78f04a2b0b4c977d20fe96a828377f1 /devdocs/html/element%2Finput%2Fnumber.html | |
new repository
Diffstat (limited to 'devdocs/html/element%2Finput%2Fnumber.html')
| -rw-r--r-- | devdocs/html/element%2Finput%2Fnumber.html | 374 |
1 files changed, 374 insertions, 0 deletions
diff --git a/devdocs/html/element%2Finput%2Fnumber.html b/devdocs/html/element%2Finput%2Fnumber.html new file mode 100644 index 00000000..616338b8 --- /dev/null +++ b/devdocs/html/element%2Finput%2Fnumber.html @@ -0,0 +1,374 @@ +<header><h1><input type="number"></h1></header><div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>number</code> are used to let the user enter a number. They include built-in validation to reject non-numerical entries.</p> <p>The browser may opt to provide stepper arrows to let the user increase and decrease the value using their mouse or by tapping with a fingertip.</p> +</div> +<h2 id="try_it">Try it</h2> +<div class="section-content"> +<iframe class="interactive is-tabbed-shorter-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/input-number.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>On browsers that don't support inputs of type <code>number</code>, a <code>number</code> input falls back to type <code>text</code>.</p> +</div> +<h2 id="value">Value</h2> +<div class="section-content"> +<p>A number representing the value of the number entered into the input. You can set a default value for the input by including a number inside the <a href="../input#value"><code>value</code></a> attribute, like so:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="Gp7y1n8uyAPaUwY1jPIp5t9RSthNMNcMHIoukgMxdWA=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>42<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect1"> + +<iframe class="sample-code-frame" title="Value sample" id="frame_value" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=value" loading="lazy"></iframe> +</div> +</div> +<h2 id="additional_attributes">Additional attributes</h2> +<div class="section-content"><p>In addition to the attributes commonly supported by all <a href="../input"><code><input></code></a> types, inputs of type <code>number</code> support these attributes.</p></div> +<h3 id="list"><code>list</code></h3> +<div class="section-content"><p>The values of the list attribute is the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a> element located in the same document. The <a href="../datalist"><code><datalist></code></a> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with the <a href="../input#type"><code>type</code></a> are not included in the suggested options. The values provided are suggestions, not requirements: users can select from this predefined list or provide a different value.</p></div> +<h3 id="max"><code>max</code></h3> +<div class="section-content"> +<p>The maximum value to accept for this input. If the <a href="../input#value"><code>value</code></a> entered into the element exceeds this, the element fails <a href="../../constraint_validation">constraint validation</a>. If the value of the <code>max</code> attribute isn't a number, then the element has no maximum value.</p> <p>This value must be greater than or equal to the value of the <code>min</code> attribute.</p> +</div> +<h3 id="min"><code>min</code></h3> +<div class="section-content"> +<p>The minimum value to accept for this input. If the <a href="../input#value"><code>value</code></a> of the element is less than this, the element fails <a href="../../constraint_validation">constraint validation</a>. If a value is specified for <code>min</code> that isn't a valid number, the input has no minimum value.</p> <p>This value must be less than or equal to the value of the <code>max</code> attribute.</p> +</div> +<h3 id="placeholder"><code>placeholder</code></h3> +<div class="section-content"> +<p>The <code>placeholder</code> attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. It should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. The text <em>must not</em> include carriage returns or line feeds.</p> <p>If the control's content has one directionality (<a href="https://developer.mozilla.org/en-US/docs/Glossary/LTR">LTR</a> or <a href="https://developer.mozilla.org/en-US/docs/Glossary/RTL">RTL</a>) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see <a href="https://www.w3.org/International/questions/qa-bidi-unicode-controls" target="_blank">How to use Unicode controls for bidi text</a> for more information.</p> <div class="notecard note" id="sect2"> <p><strong>Note:</strong> Avoid using the <code>placeholder</code> attribute if you can. It is not as semantically useful as other ways to explain your form, and can cause unexpected technical issues with your content. See <a href="../input#labels"><code><input></code> labels</a> for more information.</p> </div> +</div> +<h3 id="readonly"><code>readonly</code></h3> +<div class="section-content"> +<p>A Boolean attribute which, if present, means this field cannot be edited by the user. Its <code>value</code> can, however, still be changed by JavaScript code directly setting the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a> <code>value</code> property.</p> <div class="notecard note" id="sect3"> <p><strong>Note:</strong> Because a read-only field cannot have a value, <code>required</code> does not have any effect on inputs with the <code>readonly</code> attribute also specified.</p> </div> +</div> +<h3 id="step"><code>step</code></h3> +<div class="section-content"> +<p>The <code>step</code> attribute is a number that specifies the granularity that the value must adhere to, or the special value <code>any</code>, which is described below. Only values which are equal to the basis for stepping (<a href="#min"><code>min</code></a> if specified, <a href="../input#value"><code>value</code></a> otherwise, and an appropriate default value if neither of those is provided) are valid.</p> <p>A string value of <code>any</code> means that no stepping is implied, and any value is allowed (barring other constraints, such as <a href="#min"><code>min</code></a> and <a href="#max"><code>max</code></a>).</p> <div class="notecard note" id="sect4"> <p><strong>Note:</strong> When the data entered by the user doesn't adhere to the stepping configuration, the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a> may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options.</p> </div> <p>The default stepping value for <code>number</code> inputs is <code>1</code>, allowing only integers to be entered—<em>unless</em> the stepping base is not an integer.</p> +</div> +<h2 id="using_number_inputs">Using number inputs</h2> +<div class="section-content"> +<p>The <code>number</code> input type should only be used for incremental numbers, especially when spinbutton incrementing and decrementing are helpful to user experience. The <code>number</code> input type is not appropriate for values that happen to only consist of numbers but aren't strictly speaking a number, such as postal codes in many countries or credit card numbers. For non-numeric inputs, consider using a different input type, such as <a href="tel"><code><input type="tel"></code></a> or other <a href="../input"><code><input></code></a> type with the <a href="../../global_attributes#inputmode"><code>inputmode</code></a> attribute:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="bje0sQ90AE9aeNccYCCywKd14bWjZD2rNAO1+VU9SN8=" data-language="html"><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">inputmode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>numeric<span class="token punctuation">"</span></span> <span class="token attr-name">pattern</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>\d*<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p><code><input type="number"></code> elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper <code>type</code> value, <code>number</code>, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.</p> <div class="notecard warning" id="sect5"> <p><strong>Warning:</strong> Logically, you should not be able to enter characters inside a number input other than numbers. Some browsers allow invalid characters, others do not; see <a href="https://bugzil.la/1398528" target="_blank">Firefox bug 1398528</a>.</p> </div> <div class="notecard note" id="sect6"> <p><strong>Note:</strong> A user can tinker with your HTML behind the scenes, so your site <em>must not</em> use simple client-side validation for any security purposes. You <em>must</em> verify on the server side any transaction in which the provided value may have security implications of any kind.</p> </div> <p>Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value.</p> +</div> +<h3 id="a_simple_number_input">A simple number input</h3> +<div class="section-content"> +<p>In its most basic form, a number input can be implemented like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="gKDAN71TT7oPRweFyAToYfrrnLS+AtlxVE0uC8j94cY=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Number of tickets you would like to buy:<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>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect7"> + +<iframe class="sample-code-frame" title="A simple number input sample" id="frame_a_simple_number_input" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=a_simple_number_input" loading="lazy"></iframe> +</div> <p>A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the <a href="../input#required"><code>required</code></a> attribute is used, the input is no longer considered valid when empty.</p> <div class="notecard note" id="sect8"> <p><strong>Note:</strong> Any number is an acceptable value, as long as it is a <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#valid-floating-point-number" target="_blank">valid floating point number</a> (that is, not <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN">NaN</a> or <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Infinity">Infinity</a>).</p> </div> +</div> +<h3 id="placeholders">Placeholders</h3> +<div class="section-content"> +<p>Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each <a href="../input"><code><input></code></a>. This is where <strong>placeholders</strong> come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take <code>value</code>. It is displayed inside the edit box when the element's <code>value</code> is <code>""</code>. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.</p> <p>Here, we have an <code>number</code> input with the placeholder "<code>Multiple of 10</code>". Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="eabq6DotvkQduwhQIha5bt7f5o2BeCFhvGuDJ1JqUsI=" data-language="html"><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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Multiple of 10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect9"> + +<iframe class="sample-code-frame" title="Placeholders sample" id="frame_placeholders" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=placeholders" loading="lazy"></iframe> +</div> +</div> +<h3 id="controlling_step_size">Controlling step size</h3> +<div class="section-content"> +<p>By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a <a href="../input#step"><code>step</code></a> attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a <code>step</code> value of <code>10</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="UBU0eCPAFKJZNIu+aA1D9Wm3sLcNz+37TV7HoNUKCjM=" data-language="html"><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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple of 10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect10"> + +<iframe class="sample-code-frame" title="Controlling step size sample" id="frame_controlling_step_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=controlling_step_size" loading="lazy"></iframe> +</div> <p>In this example, you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.</p> +</div> +<h3 id="specifying_minimum_and_maximum_values">Specifying minimum and maximum values</h3> +<div class="section-content"> +<p>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of <code>0</code>, and a maximum of <code>100</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="YCAIMsOhJJ1evr4e2rh+QXqj9IrjHlNNJjOCtcYjkTM=" data-language="html"><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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multiple of 10<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect11"> + +<iframe class="sample-code-frame" title="Specifying minimum and maximum values sample" id="frame_specifying_minimum_and_maximum_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=specifying_minimum_and_maximum_values" loading="lazy"></iframe> +</div> <p>In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.</p> +</div> +<h3 id="allowing_decimal_values">Allowing decimal values</h3> +<div class="section-content"> +<p>One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal (such as "1.0"), it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the <code>step</code> value (e.g. <code>step="0.01"</code> to allow decimals to two decimal places). Here's a simple example:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="v229qTHqohL4pVcpPoCLnyy6Vdh+NWWy9gB1fE3UIeE=" data-language="html"><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>number<span class="token punctuation">"</span></span> <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1.0<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.01<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> +<div class="code-example" id="sect12"> + +<iframe class="sample-code-frame" title="Allowing decimal values sample" id="frame_allowing_decimal_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=allowing_decimal_values" loading="lazy"></iframe> +</div> <p>See that this example allows any value between <code>0.0</code> and <code>10.0</code>, with decimals to two places. For example, "9.52" is valid, but "9.521" is not.</p> +</div> +<h3 id="controlling_input_size">Controlling input size</h3> +<div class="section-content"> +<p><a href="../input"><code><input></code></a> elements of type <code>number</code> don't support form sizing attributes such as <a href="../input#size"><code>size</code></a>. You'll have to resort to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> to change the size of these controls.</p> <p>For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an <a href="../../global_attributes#id"><code>id</code></a> and to shorten our placeholder since the field will be too narrow for the text we have been using so far:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="cMNAXrlNKOIHZLDoNpVZ6z8clMSI++TgJXTrYtcC414=" data-language="html"><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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>x10<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<span class="token punctuation">"</span></span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>number<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> +</pre> +</div> <p>Then we add some CSS to narrow the width of the element with the <code>id</code> selector <code>#number</code>:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="vI6AwzZ1XVZMbEZpkhTM9VN/kpIG03y/stlUnRwh9Xo=" data-language="css"><span class="token selector">#number</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 3em<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>The result looks like this:</p> +<div class="code-example" id="sect13"> + +<iframe class="sample-code-frame" title="Controlling input size sample" id="frame_controlling_input_size" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=controlling_input_size" loading="lazy"></iframe> +</div> +</div> +<h3 id="offering_suggested_values">Offering suggested values</h3> +<div class="section-content"> +<p>You can provide a list of default options from which the user can select by specifying the <a href="../input#list"><code>list</code></a> attribute, which contains as its value the <a href="../../global_attributes#id"><code>id</code></a> of a <a href="../datalist"><code><datalist></code></a>, which in turn contains one <a href="../option"><code><option></code></a> element per suggested value. Each <code>option</code>'s <code>value</code> is the corresponding suggested value for the number entry box.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="30oznTa5G9R0K9IIZGDLQs/aecHMstvtv3txcUSGFUo=" data-language="html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>ticketNum<span class="token punctuation">"</span></span> <span class="token attr-name">list</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultNumbers<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>span</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>validity<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>span</span><span class="token punctuation">></span></span> + +<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>datalist</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>defaultNumbers<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>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10045678<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>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>103421<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>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11111111<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>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12345678<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>option</span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>option</span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12999922<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>option</span><span class="token punctuation">></span></span> +<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>datalist</span><span class="token punctuation">></span></span> +</pre> +</div> +<div class="code-example" id="sect14"> + +<iframe class="sample-code-frame" title="Offering suggested values sample" id="frame_offering_suggested_values" width="600" height="60" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=offering_suggested_values" loading="lazy"></iframe> +</div> +</div> +<h2 id="validation">Validation</h2> +<div class="section-content"> +<p>We have already mentioned a number of validation features of <code>number</code> inputs, but let's review them now:</p> <ul> <li> +<code><input type="number"></code> elements automatically invalidate any entry that isn't a number (or empty, unless <code>required</code> is specified).</li> <li>You can use the <a href="../input#required"><code>required</code></a> attribute to make an empty entry invalid. (In other words, the input <em>must</em> be filled in.)</li> <li>You can use the <a href="../input#step"><code>step</code></a> attribute to constrain valid values to a certain set of steps (e.g., multiples of 10).</li> <li>You can use the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes to constrain valid values to lower and upper bounds.</li> </ul> <p>The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons, depending on the <code>input</code>'s value:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="SAf09c5EN0GKHX0CycHVzN29eQ0ly7XL2lOT93SRrJ8=" 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 punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span> <span class="token attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>balloons<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Number of balloons to order (multiples of 10):<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>input</span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>balloons<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>balloons<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>10<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>100<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>span</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>validity<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>span</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 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>div</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 class="code-example" id="sect15"> + +<iframe class="sample-code-frame" title="Validation sample" id="frame_validation" width="600" height="110" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=validation" loading="lazy"></iframe> +</div> <p>Try submitting the form with different invalid values entered — e.g., no value; a value below 0 or above 100; a value that is not a multiple of 10; or a non-numerical value — and see how the error messages the browser gives you differ with different ones.</p> <p>The CSS applied to this example is as follows:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="jsaVZXcXsdxbCjENOH2aBgajbbll043HBxvjJj1aLLY=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>Here we use the <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid"><code>:invalid</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:valid"><code>:valid</code></a> pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent <a href="../span"><code><span></code></a> element, as a visual indicator of validity.</p> <p>We put it on a separate <code><span></code> element for added flexibility. Some browsers don't display generated content very effectively on some types of form inputs. (Read, for example, the section on <a href="date#validation"><code><input type="date"></code> validation</a>.)</p> <div class="notecard warning" id="sect16"> <p><strong>Warning:</strong> HTML form validation is <em>not</em> a substitute for server-side scripts that ensure that the entered data is in the proper format!</p> <p>It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server.</p> <p>If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).</p> </div> +</div> +<h3 id="pattern_validation">Pattern validation</h3> +<div class="section-content"> +<p><code><input type="number"></code> elements do not support use of the <a href="../input#pattern"><code>pattern</code></a> attribute for making entered values conform to a specific regex pattern.</p> <p>The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the <a href="../input#min"><code>min</code></a> and <a href="../input#max"><code>max</code></a> attributes (as explained above).</p> +</div> +<h2 id="examples">Examples</h2> +<div class="section-content"> +<p>We've already covered the fact that by default, the increment is <code>1</code>, and you can use the <a href="../input#step"><code>step</code></a> attribute to allow decimal inputs. Let's take a closer look.</p> <p>In the following example is a form for entering the user's height. It defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.</p> +<div class="code-example" id="sect17"> + +<iframe class="sample-code-frame" title="Examples sample" id="frame_examples" width="600" height="150" src="https://live.mdnplay.dev/en-US/docs/Web/HTML/Element/input/number/runner.html?id=examples" loading="lazy"></iframe> +</div> <p>The HTML looks like this:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">html</span></p> +<pre data-signature="ldNOy0DLMwvMtW0csbRmxkwKlk3TiCHOgoIvZF4NLcc=" 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>metersInputGroup<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 attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meters<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Enter your height — meters:<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>input</span> + <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meters<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> + <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>meters<span class="token punctuation">"</span></span> + <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0.01<span class="token punctuation">"</span></span> + <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> + <span class="token attr-name">placeholder</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>e.g. 1.78<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>span</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>validity<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>span</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>feetInputGroup<span class="token punctuation">"</span></span> <span class="token special-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value css language-css"><span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> + <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>Enter your height — <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>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 attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>feet:<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>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feet<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>feet<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<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>span</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>validity<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>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 attr-name">for</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inches<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>inches:<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>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inches<span class="token punctuation">"</span></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>number<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inches<span class="token punctuation">"</span></span> <span class="token attr-name">min</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span> <span class="token attr-name">max</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>11<span class="token punctuation">"</span></span> <span class="token attr-name">step</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1<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>span</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>validity<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>span</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 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>button<span class="token punctuation">"</span></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>meters<span class="token punctuation">"</span></span> + <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Enter height in feet and inches<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>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 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 attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Submit form<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>div</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> <p>You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the <code>step</code> value to <code>0.01</code>, so that values like <em>1.78</em> are not seen as invalid. We've also provided a placeholder for that input.</p> <p>We've hidden the feet and inches inputs initially using <code>style="display: none;"</code>, so that meters is the default entry type.</p> <p>Now, onto the CSS. This looks very similar to the validation styling we saw before; nothing remarkable here.</p> <div class="code-example"> +<p class="example-header"><span class="language-name">css</span></p> +<pre data-signature="y72TRmQOy6xJ/JNIk5WNU2PfiXv04saGLy6HYF4lpiQ=" data-language="css"><span class="token selector">div</span> <span class="token punctuation">{</span> + <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> + <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input[type="number"]</span> <span class="token punctuation">{</span> + <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input + span</span> <span class="token punctuation">{</span> + <span class="token property">padding-right</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:invalid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✖"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> + +<span class="token selector">input:valid + span::after</span> <span class="token punctuation">{</span> + <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span> + <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">"✓"</span><span class="token punctuation">;</span> + <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> +<span class="token punctuation">}</span> +</pre> +</div> <p>And finally, the JavaScript:</p> <div class="code-example"> +<p class="example-header"><span class="language-name">js</span></p> +<pre data-signature="zT/zJFwRezh9sWPMvboHVwppeJ6+FXXKQeoZeJcbrcM=" data-language="js"><span class="token keyword">const</span> metersInputGroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".metersInputGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> feetInputGroup <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".feetInputGroup"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> metersInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#meters"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> feetInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#feet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> inchesInput <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"#inches"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +<span class="token keyword">const</span> switchBtn <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">'input[type="button"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + +switchBtn<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> + <span class="token keyword">if</span> <span class="token punctuation">(</span>switchBtn<span class="token punctuation">.</span><span class="token function">getAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">"meters"</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> + switchBtn<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">,</span> <span class="token string">"feet"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + switchBtn<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Enter height in meters"</span><span class="token punctuation">;</span> + + metersInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + feetInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + metersInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + metersInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> + switchBtn<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"class"</span><span class="token punctuation">,</span> <span class="token string">"meters"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + switchBtn<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"Enter height in feet and inches"</span><span class="token punctuation">;</span> + + metersInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"block"</span><span class="token punctuation">;</span> + feetInputGroup<span class="token punctuation">.</span>style<span class="token punctuation">.</span>display <span class="token operator">=</span> <span class="token string">"none"</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span><span class="token function">removeAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + metersInput<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">"required"</span><span class="token punctuation">,</span> <span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span> + + feetInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + inchesInput<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">""</span><span class="token punctuation">;</span> + <span class="token punctuation">}</span> +<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> +</pre> +</div> <p>After declaring a few variables, an event listener is added to the <code>button</code> to control the switching mechanism. This is pretty simple, mostly involving changing over the button's <code>class</code> and <a href="../label"><code><label></code></a>, and updating the display values of the two sets of inputs when the button is pressed.</p> <p>(Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.)</p> <div class="notecard note" id="sect18"> <p><strong>Note:</strong> When the user clicks the button, the <code>required</code> attribute(s) are removed from the input(s) we are hiding, and empty the <code>value</code> attribute(s). This is so the form can be submitted if both input sets aren't filled in. It also ensures that the form won't submit data that the user didn't mean to.</p> <p>If you didn't do this, you'd have to fill in both feet/inches <strong>and</strong> meters to submit the form!</p> </div> +</div> +<h2 id="accessibility">Accessibility</h2> +<div class="section-content"> +<p>The implicit <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles">role</a> for the <code><input type="number"></code> element is <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role"><code>spinbutton</code></a>. If spinbutton is not an important feature for your form control, consider <em>not</em> using <code>type="number"</code>. Instead, use <a href="../../global_attributes/inputmode"><code>inputmode="numeric"</code></a> along with a <a href="../../attributes/pattern"><code>pattern</code></a> attribute that limits the characters to numbers and associated characters. With <code><input type="number"></code>, there is a risk of users accidentally incrementing a number when they're trying to do something else. Additionally, if users try to enter something that's not a number, there's no explicit feedback about what they're doing wrong.</p> <p>Also consider using the <a href="../../attributes/autocomplete"><code>autocomplete</code></a> attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, set <code>autocomplete="postal-code"</code>.</p> +</div> +<h2 id="technical_summary">Technical summary</h2> +<div class="section-content"><figure class="table-container"><div class="_table"><table class="properties"> <tbody> <tr> <td><strong><a href="#value">Value</a></strong></td> <td>A <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number"><code>Number</code></a> representing a number, or empty</td> </tr> <tr> <td><strong>Events</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event"><code>change</code></a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event"><code>input</code></a> </td> </tr> <tr> <td><strong>Supported common attributes</strong></td> <td> <a href="../input#autocomplete"><code>autocomplete</code></a>, <a href="../input#list"><code>list</code></a>, <a href="../input#placeholder"><code>placeholder</code></a>, <a href="../input#readonly"><code>readonly</code></a> </td> </tr> <tr> <td><strong>IDL attributes</strong></td> <td> +<code>list</code>, <code>value</code>, <code>valueAsNumber</code> +</td> </tr> <tr> <td><strong>DOM interface</strong></td> <td> <p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement"><code>HTMLInputElement</code></a></p> </td> </tr> <tr> <td><strong>Methods</strong></td> <td> <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/select"><code>select()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepUp"><code>stepUp()</code></a>, <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/stepDown"><code>stepDown()</code></a> </td> </tr> <tr> <td><strong>Implicit ARIA Role</strong></td> <td><code><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/spinbutton_role">spinbutton</a></code></td> </tr> </tbody> </table></div></figure></div> +<h2 id="specifications">Specifications</h2> +<div class="_table"><table class="standard-table"> +<thead><tr><th scope="col">Specification</th></tr></thead> +<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/input.html#number-state-(type=number)">HTML Standard <br><small># number-state-(type=number)</small></a></td></tr></tbody> +</table></div> +<h2 id="browser_compatibility">Browser compatibility</h2> +<div class="_table"><table> +<thead> +<tr id="bct-browser-type"> +<th></th> +<th colspan="6">Desktop</th> +<th colspan="6">Mobile</th> +</tr> +<tr id="bct-browsers"> +<th></th> +<th>Chrome</th> +<th>Edge</th> +<th>Firefox</th> +<th>Internet Explorer</th> +<th>Opera</th> +<th>Safari</th> +<th>WebView Android</th> +<th>Chrome Android</th> +<th>Firefox for Android</th> +<th>Opera Android</th> +<th>Safari on IOS</th> +<th>Samsung Internet</th> +</tr> +</thead> +<tbody><tr> +<th><code>number</code></th> +<td class="bc-supports-yes">7</td> +<td class="bc-supports-yes">12</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">10</td> +<td class="bc-supports-yes">15</td> +<td class="bc-supports-yes">5.1</td> +<td class="bc-supports-yes">4.4</td> +<td class="bc-supports-yes">18</td> +<td class="bc-supports-yes">29</td> +<td class="bc-supports-yes">14</td> +<td class="bc-supports-yes">5</td> +<td class="bc-supports-yes">1.0</td> +</tr></tbody> +</table></div> +<h2 id="see_also">See also</h2> +<div class="section-content"><ul> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms">HTML forms guide</a></li> <li><a href="../input"><code><input></code></a></li> <li><a href="tel"><code><input type="tel"></code></a></li> <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Forms/Property_compatibility_table_for_form_controls">Compatibility of CSS properties</a></li> <li><a href="https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/" target="_blank">Article: Why Gov.UK changed the input type for numbers</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/Element/input/number" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number</a> + </p> +</div> |