I'm writing a form in HTML5. One of the inputs is type=number
. I want the input to only show 2 digits but it seems to default to showing at least 5 digits, which takes up extra space. I've tried adding size="2"
attribute, with no effect.
This the tag i'm using:
<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />
What am I missing?
Also you can replace size
attribute by a style
attribute:
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />
<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />
I have been looking for the same solution and this worked for me...add an inline css tag to control the width of the input.
For example:
<input type="number" min="1" max="5" style="width: 2em;">
Combined with the min and max attributes you can control the width of the input.
Unfortunately in HTML 5 the 'pattern' attribute is linked to only 4-5 attributes. However if you are willing to use a "text" field instead and convert to number later, this might help you;
This limits an input from 1 character (numberic) to 3.
<input name=quantity type=text pattern='[0-9]{1,3}'>
The CSS basically allows for confirmation with an "Thumbs up" or "Down".
HTML5 number input doesn't have styles attributes like width or size, but you can style it easily with CSS.
input[type="number"] {
width:50px;
}
There is a way:
<input type="number" min="0" max="100" step="5"/>
There are only 4 specific atrributes:
So you cannot control length of what user type by keyword. But the implementation of browsers may change.
Source: Stackoverflow.com