<input size=””>

Attribute of
<input> HTML Tag
What does <input size=""> do?
Specifies the width of the input in characters.

Code Example

 <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">

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> 

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for size