User Id :    Password :      New Member   Forgot Password  
 
Number : A new Input type in HTML5
Description I have been writing few series of new HTML5 input types and this is another post on same series. In this post I am going to explain Number input types. The number type is for numeric values. When you use number input type it will have spinner with up and down arrow and with the help of this you can increase or decrease of value.   No. of Views     677
  Rating     0
Author Jalpesh Vadgama   Posted On     20 Feb 2012
Tags HTML,ASP.NET-MVC    

Sample Code   Download Code

 

I have been writing few series of new HTML5 input types and this is another post on same series. In this post I am going to explain Number input types. The number type is for numeric values. When you use number input type it will have spinner with up and down arrow and with the help of this you can increase or decrease of value.

Attributes of Number Input type:

There are four attributes of Number input types.

    Value : This attribute is used to specify the default value of the input type once its first loaded. So what ever you put there in input value it will be there.
    Min: As name suggest it defines minimum value for a range that you can you can choose in number input types.
    Max: It defines maximum number value for the range a number input type can have.
    Step: This attribute defines the number which will decrease or increase number value. If you don’t specify the value for it the default value for this will be 1.

So now we know all attributes for number input types it is time for writing some code now. I am going to use same code for that I was using for that. Following is a code for that.

@{
ViewBag.Title = "Home Page";
}
 
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<form action="" method="post">
<label for="numberInput">Select Number:</label>
<input id="numberInput" name="numberInput" type="number" min="1" max="10"/>
</form>

 

Here in the above code you can see I have specified min value is 1 and max value is 10. So it can have any values between 1 to 10. So let’s run that code in browser.

 

 

As you can see it is displaying output as expected. Please note that number input type are supported in following browsers.

    Safari 5 or higher
    Chrome 8 or higher
    Opera 11

For other browsers that are not supporting number input type it will work as normal input type. That’s it. Hope you like it. Stay tuned for more.. Till than happy programming..

 

 

 

About Author

About Author I am jalpesh vadgama an Microsoft MVP for Visual C# and BrainBench Certified ASP.NET Developer having more then 5 years of experience in .NET Technology.Please feel free to contact me for any queries via posting comments on my blog I will try to reply as early as possible. Please also visit my blog at http://jalpesh.blogspot.com/ Jalpesh Vadgama
No Photo
 
Country India
Company N/A
Home Page http://jalpesh.blogspot.com/

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

   
Write your comment here.
Comment
Verification Code