I am upgrading my website to adopt HTML5 standard. I have a field that only accepts integers from 0-99. Originally it has the following code:
<input name='age' type='text' size=2 maxlength=2>
Using HTML5, I can eliminate some client-side checking:
<input name='age' type='number' min=0 max=99>
maxlength are unrestricted, user experience suffers on multiple fronts:
- User is not prevented from entering any length of input
- User cannot visually tell what is the restriction on the input
- User can still enter non-digits or decimals although he couldn't submit.
I have seen some people suggesting using
I realise that the problem I described above is now restricted to Firefox browser. Google Chrome automatically calculates the size and maxlength for number input based on the min max value, providing the much needed visual clue.
See this JsFiddle