<input size="">
- Attribute of
- How To Use Input To Create Form Fields In HTML: Easy Tutorial
- What does
<input size="">
do? - Specifies the width of the input in characters.
Code Example
<form>
<label for="ccnum">CC Number</label><br>
<input size="16" name="ccnum" id="ccnum"><br>
<label for="ccv">CCV</label>
<input id="ccv" name"ccv" size="4">
</form>
Size in Characters, not display width
The size
attribute of the [<input>
] element controls the size of the input field in typed characters. This may affects its display size, but somewhat indirectly. From a display perspective, one character is equivalent to 1 em
(actually that’s the definition of the em
CSS unit). This means that the width will change depending on the font size — both the font-size
property (12 pt
vs. 14 pt) and the relative size of the font being used (
Arialvs.
Helvetica`, for example). However, the size
attribute doesn’t actually limit the length of potential entries. For example, if you wanted to have a field for a 4-digit PIN number, the following is not sufficient for making sure that the PIN input only gets four digits.
<form> <label for="pin">PIN</label><br> <input id="pin" name="pin" size="4"><br> <input type="submit"> </form>
Because of this, the size
attribute is often not the best approach. The actual display size might vary, and the user can type in more than you want them to. In most cases, it is usually better to use CSS to control the sizing, and (if needed) maxlength
to control the number of characters input by the user. Using size
in conjuction with maxlength
also makes sense, especially in plain, unstyled forms.
<form> <label for="pin2">PIN</label><br> <input id="pin2" name="pin2" size="4" maxlength="4"><br> <input type="submit"> </form>
Browser Support for size
![]() | ![]() | ![]() | ![]() | ![]() | ![]() |
All | All | All | All | All | All |