Show Input tag(textbox control) with two digit format in HTML5

Unfortunately it is not possible, in pure HTML5, to achieve this. Javascript will be required...

<input id="hourInput" type="number" min="1" max="24" step="1" onchange="if(parseInt(this.value,10)<10)this.value='0'+this.value;" />

EDIT: Since this answer seems to get good trafic, I'd like to add the fact that the approach I have suggested is a naïve way to do it and will only correctly work with a min attribute higher than -9. If the number goes lower, the 0 will still get added resulting in 0-234 when the user enter a negative value of 234.


There is no native way to do that. However you can use oninput event to format.

    <input id="hourInput" type="number" oninput='format(this)' min="1" max="24" step="1"  />

Javascript

function format(input){
  if(input.value.length === 1){
    input.value = "0" + input.value;
  }
}

http://jsbin.com/dedixapasi/edit?html,js,output