- Attribute of
- Input As The Fundamental Form Element In HTML: Here's What It Does
- What does
- Specifies the width of the input in characters.
<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
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 (Arial
vs.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