HTML5 Number Input Type - HTML CSS HTML

HTML CSS examples for HTML:Form Input

  1. HOME
  2. HTML CSS
  3. HTML
  4. Form Input

Description

HTML5 Number Input Type

Demo Code

ResultView the demo in separate window 

For the following number input, if you try to enter the number out of the range (1-10) or text character it will show error.

<!DOCTYPE html>
<html lang="en">
 <head> 
  <title>HTML5 Number Input Type</title> 
  <style type="text/css">
    input[type="number"]:valid{
        outline: 2px solid green;
    }<!--from   w  w  w.j  a v  a  2 s .  co m-->
    input[type="number"]:invalid{
        outline: 2px solid red;
    }
</style> 
 </head> 
 <body> 
  <form> 
   <label> Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber"> </label> 
  </form> 
 </body>
</html>

Related Tutorials