HTML Number Input

HTML number input fields allow users to enter numerical values into web forms. They are commonly used for age, quantity, product prices, ratings, and other fields that require numbers. HTML provides the <input type="number"> element to create a number input field with built-in browser controls and validation.

What Is an HTML Number Input?

An HTML number input is a form field designed for numeric values. Depending on the browser, it may display small up and down arrows that allow users to increase or decrease the value.

For example, an online shopping website can use a number input to let customers select how many products they want to purchase.

To understand the basics, explore HTML Input and HTML Input Types.

HTML Number Input Example

The following example demonstrates how to create a simple number input field.

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

  <button type="submit">Submit</button>
</form>

In this example:

• <input type="number"> creates the numeric input field.
• id="quantity" identifies the field.
• name="quantity" defines the field name when form data is submitted.
• <label> describes the information users should enter.
• <button type="submit"> submits the form.

Important Attributes of HTML Number Input

HTML number inputs support several useful attributes that control the allowed values.

• min specifies the minimum allowed value.
• max specifies the maximum allowed value.
• step defines the permitted increments.
• value sets an initial value.
• required makes the field mandatory.
• placeholder displays a hint when the field is empty.

Here is an example using these attributes:

<label for="age">Age:</label>
<input
  type="number"
  id="age"
  name="age"
  min="18"
  max="60"
  step="1"
  placeholder="Enter your age"
  required
>

This field is intended to accept whole-number ages between 18 and 60. The browser can prevent normal form submission when the value violates these constraints.

For additional information, read about HTML Form Attributes and the HTML Required Attribute.

Understanding the Step Attribute

The step attribute controls the increments users can enter. For example, step="1" allows whole-number increments, while step="0.5" permits half-unit increments.

<label for="weight">Weight (kg):</label>
<input
  type="number"
  id="weight"
  name="weight"
  min="0"
  step="0.5"
>

This example allows non-negative values in increments of 0.5, such as 50, 50.5, and 51.

Styling HTML Number Inputs with CSS

CSS can improve the appearance of number input fields.

<style>
  input[type="number"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }

  input[type="number"]:focus {
    border-color: #007bff;
    outline: 2px solid #cce5ff;
  }
</style>

The input[type="number"] selector targets number fields specifically. The :focus selector changes the appearance when the user selects the field.

When Should You Use a Number Input?

Use number inputs when the value represents a quantity or another numeric measurement. For example, they work well for product quantities, age ranges, and measurements.

However, phone numbers, postal codes, and identification numbers are usually better represented by text inputs because they may contain leading zeros, plus signs, or other characters. For phone numbers, consider using type="tel" instead.

Remember that browser validation can be bypassed. Always validate important numeric values on the server before processing them.

Frequently Asked Questions

Can I set a minimum and maximum number?

Yes. Use the min and max attributes to define the allowed range.

Can a number input accept decimal values?

Yes. Use an appropriate step value, such as step="0.1", to allow decimal increments.

Is a number input mandatory by default?

No. Add the required attribute if users must provide a value.

Can I use a number input for phone numbers?

It is generally better to use type="tel" because phone numbers are identifiers, not quantities, and may contain leading zeros or a plus sign.