input type='number' - HTML CSS HTML Tag

HTML CSS examples for HTML Tag:input

  1. HOME
  2. HTML CSS
  3. HTML Tag
  4. input

Introduction

The number value of type attribute creates an input box that will only accept numeric values.

The following table describes the additional attributes that are available when using this input type.

Attribute Description
listSpecifies the id of a datalist element that provides values for this element.
min Specifies the minimum acceptable value for the purposes of input validation (and sets the limits for the decrement button, if displayed).
max Specifies the maximum acceptable value for the purposes of input validation (and sets the limits for the increment button, if displayed).
readonlyIf present, this attribute makes the input box read-only, and the user cannot edit the content.
requiredSpecifies that the user must provide a value for the purposes of input validation.
stepSpecifies the granularity of increments and decrements to the value.
value Specifies the initial value for the element.

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

The following code shows how to use the number Type of the input Element

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
   <head> 
      <title>Example</title> 
   </head> 
   <body> 
      <form method="post" action="http://example.com/form"> 
         <p> 
            <label for="name">
                Name: <!--from   ww  w  . j ava  2s .co  m-->
               <input value="java2s.com" 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">
                Fruit: 
               <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>

Related Tutorials