JavaBeat

  • Home
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Privacy
  • Contact Us

HTML5 Number Input Type

March 21, 2014 by Krishna Srinivasan Leave a Comment

The number is input type is used for specifying numerical value. It is used to collect the number either it is integer or floating point. All known browsers use this as spinner which have up and down arrow at right side of the textbox to increase or decrease the number value. If we specify type=”number” in the type attribute of the tag, number input field is created.

The number input type has following attributes:

  • value: The initial value when a page is first loaded.
  • step: It specifies how much to change the value when you click on up or down arrows of the control. The default value is 1.
  • min: It represents smallest value of the number.
  • max: It represents biggest number of the number input.

Browser Support

The number input type is supported by browsers such as Google Chrome 8.0, Opera,Safari, IE.

Syntax of number Input Type

[code lang=”html”]
<input type="number" name="some-name" min="0" max="20" step="2"/>
[/code]

HTML5 Input Type Example

[code lang=”html”]
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>number input type</title>
</head>
<body>
<form>
<input type="number" min="2" max="15" step="1" value="0" name="myNumber">
</form>
</body>
</html>
[/code]

As shown in the above program, we have used number input type which specifies numerical value which is either in integer or floating point. It specifies attributes namely min to represents smallest number , max attribute to specify biggest number and step attribute specifies how much to change the value when you click on up or down arrows of the control, value attribute specifies initial value when page is first loaded and name attribute provides name to form part.

HTML5 Input Type Demo

  • Save the file as number_example.html in your system.
  • Just open file in the browser, you will see the below picture in the browser. Note that the browser must support HTML5 specification.

When the execution process is completed successfully, we will get the following output:

HTML5 Number Input Type

When we run the program, we will get number starting from 2 to 15, because we have set minimum number to 2 and maximum number to 15. The number will increase or decrease one number as we have set step value as 1.

Filed Under: HTML Tagged With: HTML5

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Follow Us

  • Facebook
  • Pinterest

As a participant in the Amazon Services LLC Associates Program, this site may earn from qualifying purchases. We may also earn commissions on purchases from other retail websites.

JavaBeat

FEATURED TUTORIALS

Answered: Using Java to Convert Int to String

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Copyright © by JavaBeat · All rights reserved