DEV Community

Youn
Youn

Posted on

HTML <input type="number">: Proper Understanding and Usage

#html #input #type #number

😄 This post is based on the content from coding.courses.

Definition and Usage

The type="number" attribute of the tag represents a numeric input field. This field is configured to allow only numbers to be entered or selected, and has built-in validation that rejects non-numeric input.

In most browsers, stepper arrows (or spinners) are provided to allow users to increase or decrease the number using a mouse. On some devices with a virtual keyboard, such as mobile devices, a numeric keypad is displayed.

Basic Example 

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show">
Enter fullscreen mode Exit fullscreen mode

Using Related Attributes

# placeholder Attribute

The placeholder attribute specifies the text displayed in a text input control when no value is set. This is called placeholder text. This value should provide the user with a brief hint about the expected type of data to enter into the control. When the user starts entering text, the placeholder text disappears from the text input field.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" placeholder="Numbers only...">
Enter fullscreen mode Exit fullscreen mode

# value Attribute

The value attribute sets the initial value.
This value specifies the number displayed in the element when the page loads.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" value="7">
Enter fullscreen mode Exit fullscreen mode

# min Attribute

The min attribute specifies the minimum number that can be entered in the field.
If the max attribute is specified, the value of the min attribute must be less than or equal to the value of the max attribute.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" min="0" value="7">
Enter fullscreen mode Exit fullscreen mode

Note

This minimum value setting prevents the browser from allowing the number to be decreased below the minimum value when using the stepper arrows (or spinners) that allow users to increase or decrease the number with a mouse. However, if the user directly enters a number below the minimum value, the input itself is not restricted.

# max Attribute

The max attribute specifies the maximum number that can be entered in the field.
If the min attribute is specified, the value of the max attribute must be greater than or equal to the value of the min attribute.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" max="10" value="7">
Enter fullscreen mode Exit fullscreen mode

Note

This maximum value setting prevents the browser from allowing the number to be increased above the maximum value when using the stepper arrows (or spinners) that allow users to increase or decrease the number with a mouse. However, if the user directly enters a number above the maximum value, the input itself is not restricted.

# step Attribute

The step attribute specifies the interval between numbers that the user can enter.
You can use a number greater than 0, including floating-point numbers, or any, which means that there is no restriction on the interval between values.

The value specified by this attribute acts as the interval between numbers. For example, step="1" increases or decreases the number by 1, while setting it to step="2" increases or decreases the number by 2. If nothing is specified, the default value of step="1" is applied.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" value="7" step="2">
Enter fullscreen mode Exit fullscreen mode

# readonly Attribute

The readonly attribute prevents the control from being changed or edited.
It is a Boolean attribute, meaning you only need to include the attribute name without specifying a value.
It is mainly used with the value attribute to display the value entered or stored in the control to the user while preventing it from being edited.

However, the value can still be changed using JavaScript, which can set the value directly.

<label for="number-to-show">Number to display</label>
<input type="number" id="number-to-show" value="7" step="2" readonly>
Enter fullscreen mode Exit fullscreen mode

# required Attribute

The required attribute indicates that the control is required, meaning that the user must enter a value before submitting the form. It is a Boolean attribute, meaning you only need to include the attribute name without specifying a value.

<form>
    <label for="number-to-show">Number to display (*required)</label>
    <input type="number" id="number-to-show" required> <!-- Specify as a required input field -->
    <button type="submit">Submit</button>
</form>
Enter fullscreen mode Exit fullscreen mode

# name Attribute

The name attribute specifies the name of the element.
When the name attribute is specified, its value is used as the name of the data sent when the form is submitted.

# list Attribute

The list attribute specifies the value of the id attribute of the <datalist> tag that provides a list of predefined options for the <input type="number">.

The user can select an option from this predefined list or enter a different number. When the user clicks or double-clicks the control, the corresponding suggested values are displayed in a drop-down menu. For example, in the Chrome browser, an arrow (â–¼) is also displayed on the right side of the control to indicate that predefined values are available.

<label for="user-number">Number to display</label>
<input type="number" list="number-list" id="user-number">

<!-- Displayed in the drop-down menu -->
<datalist id="number-list">
    <option value="1"></option>
    <option value="2"></option>
    <option value="3"></option>
</datalist>
Enter fullscreen mode Exit fullscreen mode

Using Floating-Point Values

The examples we have looked at so far have all used integer values. To use floating-point values, specify a number with a decimal point as the value of the step attribute, as shown in the example below. In this case, a decimal point is also included in the value of the value attribute, which specifies the initial value, to visually indicate to the user that the values they enter are in floating-point increments.

<label for="number-to-show">Number to display</label>
<input type="number" id="numberr-to-show" value="7.0" step="0.1">
Enter fullscreen mode Exit fullscreen mode

References

HTML <input type="number">: Proper Understanding and Usage – codingCourses

The type="number" attribute of the input tag represents a numeric input field. This field is configured to allow only numbers to be entered or selected, and has built-in validation that rejects non-numeric input.

favicon coding.courses

Top comments (0)