Articles → HTML 5 → Number Input Element In Html5

Number Input Element In Html5






Purpose





Syntax


<input type="number">



Example


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <form>
         <input type="number">
         <input type="submit" value="Click Me" />
      </form>
   </body>
</html>



Output


Picture showing the output of Number input element in HTML5

Click to Enlarge


Setting Up The Min And Max Value






<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <meta charset="utf-8" />
      <title></title>
   </head>
   <body>
      <form>
         <input type="number" min="2" max="11">
         <input type="submit" value="Click Me" />
      </form>
   </body>
</html>



Output


Picture showing setting the minimum and maximum value in Number input element in HTML5

Click to Enlarge


Browser Support


Internet ExplorerFirefoxChromeSafariOperaEdge
YesYesYesYesYesYes



Posted By  -  Karan Gupta
 
Posted On  -  Friday, September 15, 2017

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250