HTML input fields are ubiquitous on the internet, found on almost any website you visit. They are used to gather user input in various forms – from text to numbers, dates, and email addresses. While there are input fields that accept any type of data, sometimes you want to restrict user input to a specific format. This tutorial explores the HTML input field type that allows only numbers (integers and decimals) to be entered by the user.
HTML Numeric Input
The HTML5 specification introduced the "number" input type. Declaring an input as the "number" type tells the browser to display a numeric keyboard on mobile devices and restrict input to numeric characters on desktops.
The "number" input type has several attributes that allow you to further define input restrictions. Let's take a look at some of these attributes.
min and max
The "min" and "max" attributes define the minimum and maximum values that can be entered in the field, respectively. For example, if you're asking for the user's age, you can set the minimum age to 18 and the maximum to 100, so that users can only input numbers between these two values.
Example:
step
The "step" attribute specifies the numerical increment between values. For instance, if you want users to input values in increments of 10, you would set the "step" attribute of the input field to 10. This means that every time the user inputs a number, it will increase (or decrease) by 10.
Example:
value
The "value" attribute sets the initial value of the input field. You can set a default value for the field, which will be displayed to the user until they enter their own value.
Example:
disable scrolling
On mobile devices, when an input field is created using the "number" type, the numeric keyboard is displayed, but users can also scroll the screen to input numbers. If you wish to disable scrolling, just add the "touch-action" CSS property and set it to "manipulation".
Example:
Pattern
The "pattern" attribute accepts regular expressions that define the allowed format of input values. This is especially useful for inputs that require a specific format (e.g. phone numbers, credit card numbers, postal codes, etc.). The regular expression pattern is matched against the input value every time the user enters input.
Example:
Conclusion
In conclusion, allowing users to input only numbers in HTML input fields is essential in many cases, such as when you collect user age, salary, or measurements. The "number" input type is a great way to achieve this and can be further customized with attributes such as "min," "max," "step," "value," "disabled," and "pattern." Regular expressions can also be used to define custom input format restrictions.
With an understanding of the "number" input type and its attributes, you can create input fields that will only accept numeric values and meet your specific needs.
let's dive deeper into some of the topics we covered in the previous article.
Defining Minimum and Maximum Values
As mentioned in the previous article, the "min" and "max" attributes allow you to set the minimum and maximum allowed values in the input field. These attributes can be used for a wide range of purposes. For instance, if you are collecting user data for a product order, you can restrict the input field to only allow quantities between 1 and 10. In such a case, the input field's code would look like this:
<input type="number" min="1" max="10">
This code will limit the user to entering values between 1 and 10 only. If a user tries to enter a number outside this range, the input field will display an error message. You can customize the error message by using the "title" attribute in the input field.
The "Step" Attribute
The "step" attribute in an input field allows you to specify the increment between numeric values. This attribute is useful when you want to accept input values in a specific range. For instance, if you are asking the user to enter their age, there is no point in allowing decimals or non-integer numbers. In this case, you can use the "step" attribute to limit input to whole numbers like this:
<input type="number" min="0" max="120" step="1">
This code will only allow whole numbers between 0 and 120. The "step" attribute can also be used to restrict input values to a specific range. For instance, if you are accepting input values in increments of 0.5, you'd use the following code:
<input type="number" min="0" max="10" step="0.5">
In this case, the user can only enter values such as 0.5, 1.0, 1.5, 2.0, and so on.
Disabling Scrolling on Mobile Devices
When an input field is created using the "number" type, the numeric keyboard displays automatically on mobile devices. However, users can also scroll the screen to input values, which can be annoying or confusing for some users. To prevent this, you can disable scrolling on mobile devices using CSS.
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
touch-action: manipulation;
}
</style>
<input type="number" min="-100" max="100">
This CSS code disables the spin buttons and prevents users from scrolling the input field.
In conclusion, HTML input fields with numeric-only input types are useful in many scenarios. They are easy to use and highly customizable, allowing you to set specific restrictions on input values, including minimum and maximum values, input increments, and pattern matching. With these attributes, you can create input fields that meet your specific requirements, making data collection much easier and more efficient.
Popular questions
-
What is the HTML input type that allows only numbers?
Answer: The HTML input type that allows only numbers is "number". -
How do you restrict input to a specific range of values using the "min" and "max" attributes?
Answer: You can set the minimum and maximum allowed values using the "min" and "max" attributes. For example, if you want to restrict input to values between 1 and 10, you can use the following code:
-
What is the purpose of the "step" attribute in HTML input fields?
Answer: The "step" attribute is used to specify the increment between numeric values. This allows you to restrict input values to a specific range or set of values. For example, if you want to restrict input to numbers in increments of 5, you can use the following code:
-
How can you prevent users from scrolling the input field on mobile devices?
Answer: You can prevent users from scrolling the input field on mobile devices by using CSS. The following code disables scrolling on mobile devices:
- What is the purpose of the "pattern" attribute in HTML input fields?
Answer: The "pattern" attribute is used to restrict input to a specific format using regular expressions. This is useful when you want to validate user input for a specific pattern, such as a phone number, credit card number, or email address. For example, you can use the following code to restrict input to a phone number format:
Tag
numinput
