Using the input element to obtain a number

The type="number" creates an input box that will only accept numeric values.

The following table describes the additional attributes that are available when using type="number".

Attribute	Description	New in HTML5
list	Specifies the id of a datalist element that provides values for this element.	Yes
min	Specifies the minimum acceptable value for input validation.	Yes
max	Specifies the maximum acceptable value for input validation	Yes
readonly	makes the input box read-only	No
required	Specifies the required field	Yes
step	Specifies the granularity of increments and decrements to the value.	Yes
value	Specifies the initial value for the element.	No

The values for the min, max, step, and value attributes can be expressed as integer or decimal numbers.

 
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
      <form method="post" action="http://yourServer/form">
            <p>
                  <label for="name"> Name: <input value="Mark" id="name"
                        name="name" />
                  </label>
            </p>
            <p>
                  <label for="password"> Password: <input type="password"
                        placeholder="Min 6 characters" id="password" name="password" />
                  </label>
            </p>
            <p>
                  <label for="fave"> Input: <input value="CSS" id="fave" name="fave" />
                  </label>
            </p>
            <p>
                  <label for="price"> $ per unit in your area: <input
                        type="number" step="1" min="0" max="100" value="1" id="price"
                        name="price" />
                  </label>
            </p>
            <input type="submit" value="Submit Vote" />
      </form>
</body>
</html>

Click to view this demo.

Home
HTML CSS Book
HTML

input Restricted: