Number Input


HTML Number Input (<input type="number">)

The HTML number input type creates a field where users can enter only numerical values. This input type is great for forms requiring quantities, ages, or other numerical data, offering built-in validation and spinner controls in many browsers.

Example 1: Basic Number Input

<label for="quantity">Quantity:</label>
<input type="number" id="quantity" name="quantity">

Explanation This code sets up a basic numerical input field, often displayed with up/down arrows for easy incrementing or decrementing. It's perfect for gathering integer values like product quantities.


Example 2: Number Input with Minimum and Maximum Values

<label for="age">Your Age:</label>
<input type="number" id="age" name="age" min="18" max="99">

Explanation Here, min and max attributes define the valid range for the number input. This enhances user experience and client-side validation for inputs like age or rating scales.


Example 3: Number Input with Step Attribute

<label for="price">Price (increments of 0.01):</label>
<input type="number" id="price" name="price" step="0.01">

Explanation The step attribute specifies the legal number intervals for the input. This is useful for financial amounts or measurements where precise decimal values or specific increments are needed.


Example 4: Number Input with Placeholder

<label for="zipcode">Zip Code:</label>
<input type="number" id="zipcode" name="zipcode" placeholder="e.g., 98052">

Explanation Adding a placeholder attribute gives users a hint about the expected format or type of input. While type="number" restricts input, the placeholder guides users before they type.


Example 5: Required Number Input

<label for="guests">Number of Guests:</label>
<input type="number" id="guests" name="guests" required>

Explanation The required attribute makes the number input a mandatory field for form submission. This ensures crucial numerical data is provided, improving data integrity.