Number- New HTML5 Input type

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.
  1. 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.
  2. Min: As name suggest it defines minimum value for a range that you can you can choose in number input types.
  3. Max: It defines maximum number value for the range a number input type can have.
  4. 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.

Html5, Input Type, Number

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..

Shout it

kick it on DotNetKicks.com

7 comments:

  1. Hi Jalpesh,

    Awesome blog! Is there an email address I can contact you in private?

    ReplyDelete
  2. I have sent my email address to you in mail

    ReplyDelete
  3. I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.

    ReplyDelete
  4. I am exicited about HTML5 but Flash can do all these things html5 can do in a better way.Creating slideshow in HTML5! wow! what, flash did that 10 years ago! It is very easy to create a flash animation, for example a ball bouncing in flash professional in less than am minute. Javascript is a mess when compared to AS3.

    ReplyDelete
  5. genefer s - I think you misleading the points I am making.. now website does not only run on desktop or laptop. its run on the Iphone,Ipad,Android phones and other smart devices and some phones and devices does not support flash as its a plugin. Html5 is a native HTML and its supported every where. So that's why we need HTML5.. Hope you understand my point!!
     

    ReplyDelete
  6. JavaOne
    and Oracle Develop conference is taking place at Hyderabad this year on 3-4 may
    2012(Link: http://www.oracle.com/javaone/in-en/index.html?pcode=WWMK11024795MPP084&src=7268797&Act=155
    ). I wasn’t able to make it last year but hoping
    to catch tracks on JAVA ME and User Experience technologies this year.

    ReplyDelete
  7. Great work came at a perfect time for me, html5 music playerwould be really cool if we could at least get an option to enable the HTML5 mode player in the next Subsonic release. Not only would it bypass the need for flash, but it also has some extra features (wav playback, etc).It seems the biggest issue would be with flv video, but by transcoding to mp4 instead of flv, that could be solved. Even without the video fix, making it optional would allow those of us the mainly use Subsonic for music to benefit from the new player.

    ReplyDelete

Your feedback is very important to me. Please provide your feedback via putting comments.