<label for="tentacles">Number of tentacles (10-100):</label><input type="number" name="tentacles" min="10" max="100" />

label {  display: block;  font:    1rem "Fira Sans",    sans-serif;}input,label {  margin: 0.4rem 0;}

On browsers that don't support inputs of typenumber, anumber input falls back to typetext.

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 thevalue attribute, like so:

<input type="number" value="42" />

In addition to the attributes commonly supported by all<input> types, inputs of typenumber support these attributes.

The values of the list attribute is theid of a<datalist> element located in the same document. The<datalist> provides a list of predefined values to suggest to the user for this input. Any values in the list that are not compatible with thetype 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.

The maximum value to accept for this input. If thevalue entered into the element exceeds this, the element failsconstraint validation. If the value of themax attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of themin attribute.

The minimum value to accept for this input. If thevalue of the element is less than this, the element failsconstraint validation. If a value is specified formin that isn't a valid number, the input has no minimum value.

This value must be less than or equal to the value of themax attribute.

Theplaceholder 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 textmust not include carriage returns or line feeds.

If the control's content has one directionality (LTR orRTL) but needs to present the placeholder in the opposite directionality, you can use Unicode bidirectional algorithm formatting characters to override directionality within the placeholder; seeHow to use Unicode controls for bidi text for more information.

A Boolean attribute which, if present, means this field cannot be edited by the user. Itsvalue can, however, still be changed by JavaScript code directly setting theHTMLInputElementvalue property.

Thestep attribute is a number that specifies the granularity that the value must adhere to, or the special valueany, which is described below. Only values which are equal to the basis for stepping (min if specified,value otherwise, and an appropriate default value if neither of those is provided) are valid.

A string value ofany means that no stepping is implied, and any value is allowed (barring other constraints, such asmin andmax).

The default stepping value fornumber inputs is1, allowing only integers to be entered—unless the stepping base is not an integer.

Thenumber input type should only be used for incremental numbers, especially when spinbutton incrementing and decrementing are helpful to user experience. Thenumber 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<input type="tel"> or other<input> type with theinputmode attribute:

<input type="text" inputmode="numeric" pattern="\d*" />

<input type="number"> 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 propertype value,number, 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.

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.

In its most basic form, a number input can be implemented like this:

<label for="ticketNum">Number of tickets you would like to buy:</label><input type="number" name="ticketNum" value="0" />

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If therequired attribute is used, the input is no longer considered valid when empty.

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<input>. This is whereplaceholders come in. A placeholder is a value most commonly used to provide a hint as to the format the input should takevalue. It is displayed inside the edit box when the element'svalue is"". Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have annumber input with the placeholder "Multiple of 10". Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

<input type="number" placeholder="Multiple of 10" />

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 astep 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 astep value of10:

<input type="number" placeholder="multiple of 10" step="10" />

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.

You can use themin andmax attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of0, and a maximum of100:

<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />

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.

One issue with number inputs is that their step size is 1 by default. If you try to enter a number with a decimal value that's not a whole number (such as "1.1"), it will be considered invalid. Note that values like "1.0" are considered valid because they are numerically equivalent to whole numbers. If you want to enter values with fractions, you'll need to reflect this in thestep value (e.g.,step="0.01" to allow decimals to two decimal places). Here's a basic example:

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

See that this example allows any value between0.0 and10.0, with decimals to two places. For example, "9.52" is valid, but "9.521" is not.

If you want to allow arbitrary decimal values, you can set thestep value to"any".

<input> elements of typenumber don't support form sizing attributes such assize. You'll have to resort toCSS to change the size of these controls.

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 anid and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

<input  type="number"  placeholder="x10"  step="10"  min="0"  max="100"  />

Then we add some CSS to narrow the width of the element with theid selector#number:

#number {  width: 3em;}

The result looks like this:

You can provide a list of default options from which the user can select by specifying thelist attribute, which contains as its value theid of a<datalist>, which in turn contains one<option> element per suggested value. Eachoption'svalue is the corresponding suggested value for the number entry box.

<input type="number" name="ticketNum" list="defaultNumbers" /><span></span><datalist>  <option value="10045678"></option>  <option value="103421"></option>  <option value="11111111"></option>  <option value="12345678"></option>  <option value="12999922"></option></datalist>

We have already mentioned a number of validation features ofnumber inputs, but let's review them now:

• <input type="number"> elements automatically invalidate any entry that isn't a number (or empty, unlessrequired is specified).
• You can use therequired attribute to make an empty entry invalid. (In other words, the inputmust be filled in.)
• You can use thestep attribute to constrain valid values to a certain set of steps (e.g., multiples of 10).
• You can use themin andmax attributes to constrain valid values to lower and upper bounds.

The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons, depending on theinput's value:

<form>  <div>    <label for="balloons">Number of balloons to order (multiples of 10):</label>    <input           type="number"      name="balloons"      step="10"      min="0"      max="100"      required />    <span></span>  </div>  <div>    <input type="submit" />  </div></form>

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.

The CSS applied to this example is as follows:

div {  margin-bottom: 10px;}input:invalid + span::after {  content: "✖";  padding-left: 5px;}input:valid + span::after {  content: "✓";  padding-left: 5px;}

Here we use the:invalid and:valid pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent<span> element, as a visual indicator of validity.

We put it on a separate<span> 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<input type="date"> validation.)

<input type="number"> elements do not support use of thepattern attribute for making entered values conform to a specific regex pattern.

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 themin andmax attributes (as explained above).

The implicitrole for the<input type="number"> element isspinbutton. If spinbutton is not an important feature for your form control, considernot usingtype="number". Instead, useinputmode="numeric" along with apattern attribute that limits the characters to numbers and associated characters. With<input type="number">, 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.

Also consider using theautocomplete attribute to help users complete forms more quickly and with fewer chances of errors. For example, to enable autofill on a zip code field, setautocomplete="postal-code".

We've already covered the fact that by default, the increment is1, and you can use thestep attribute to allow decimal inputs. Let's take a closer look.

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.

The HTML looks like this:

<form>  <div>    <label for="meters">Enter your height — meters:</label>    <input           type="number"      name="meters"      step="0.01"      min="0"      placeholder="e.g. 1.78"      required />    <span></span>  </div>  <div>    <span>Enter your height — </span>    <label for="feet">feet:</label>    <input type="number" name="feet" min="0" step="1" />    <span></span>    <label for="inches">inches:</label>    <input type="number" name="inches" min="0" max="11" step="1" />    <span></span>  </div>  <div>    <input      type="button"           value="Enter height in feet and inches" />  </div>  <div>    <input type="submit" value="Submit form" />  </div></form>

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 thestep value to0.01, so that values like1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially usingstyle="display: none;", so that meters is the default entry type.

Now, onto the CSS. This looks very similar to the validation styling we saw before; nothing remarkable here.

div {  margin-bottom: 10px;  position: relative;}input[type="number"] {  width: 100px;}input + span {  padding-right: 30px;}input:invalid + span::after {  position: absolute;  content: "✖";  padding-left: 5px;}input:valid + span::after {  position: absolute;  content: "✓";  padding-left: 5px;}

And finally, the #".metersInputGroup");const feetInputGroup = document.querySelector(".feetInputGroup");const metersInput = document.querySelector("#meters");const feetInput = document.querySelector("#feet");const inchesInput = document.querySelector("#inches");const switchBtn = document.querySelector('input[type="button"]');feetInputGroup.style.display = "none"; // Hide feet/inches inputs initiallyswitchBtn.addEventListener("click", () => { if (switchBtn.getAttribute("class") === "meters") { switchBtn.setAttribute("class", "feet"); switchBtn.value = "Enter height in meters"; metersInputGroup.style.display = "none"; feetInputGroup.style.display = "block"; feetInput.setAttribute("required", ""); inchesInput.setAttribute("required", ""); metersInput.removeAttribute("required"); metersInput.value = ""; } else { switchBtn.setAttribute("class", "meters"); switchBtn.value = "Enter height in feet and inches"; metersInputGroup.style.display = "block"; feetInputGroup.style.display = "none"; feetInput.removeAttribute("required"); inchesInput.removeAttribute("required"); metersInput.setAttribute("required", ""); feetInput.value = ""; inchesInput.value = ""; }});

Note:When the user clicks the button, therequired attribute(s) are removed from the input(s) we are hiding, and empty thevalue 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.

If you didn't do this, you'd have to fill in both feet/inchesand meters to submit the form!