HTML size Attribute

HTML size Attribute

The HTML size attribute controls the visible size of certain form controls. On supported <input> elements, it indicates how many characters should be visible while editing the value. On a <select> element, it specifies how many options should be shown at one time.

Elements That Use the size Attribute

The size attribute is used with the <input> and <select> elements.

size Attribute Value

The size attribute must contain a valid non-negative integer greater than zero.

<input type="text" size="30">

The meaning of the number depends on the element. For supported <input> elements, it represents the number of characters the user agent should allow to be visible while editing. For <select>, it represents the number of options to show.

Using size with <input>

On supported <input> elements, the size attribute controls the approximate visible width of the field by specifying how many characters should be visible while the value is being edited.

<label for="username">Username:</label>
<input type="text" id="username" name="username" size="20">

A value of 20 asks the browser to make at least approximately 20 characters visible. The exact physical width can vary because characters and fonts do not all have the same width.

Supported Input Types

The size attribute applies to the following <input> types:

The size attribute does not apply to other input types such as checkbox, radio, number, range, date, file, or button controls.

Using size with <select>

On a <select> element, the size attribute specifies how many options should be visible at one time.

<label for="browser">Choose a browser:</label>
<select id="browser" name="browser" size="3">
  <option value="chrome">Chrome</option>
  <option value="edge">Edge</option>
  <option value="firefox">Firefox</option>
  <option value="safari">Safari</option>
</select>

In supporting browsers, a value greater than 1 normally displays the control as a list box with the specified number of visible rows. When size="1" is used, a single-selection <select> normally appears as a drop-down control.

If size is omitted, the display size is 1 when multiple is absent and 4 when multiple is present.

size vs maxlength

The size and maxlength attributes serve different purposes on an <input>. The size attribute affects how much of the field is visible, while maxlength limits how many characters the user can enter.

<input type="text" size="20" maxlength="50">

In this example, the field is sized to display approximately 20 characters while allowing a maximum of 50 characters to be entered.

size and CSS

The size attribute provides an HTML sizing hint for the form control. CSS can be used when more precise control over the physical width or layout of a form control is needed.

input {
  width: 300px;
}

A CSS width can override the width that would otherwise result from the size attribute. Use CSS for layout and visual sizing when a specific width is required.

Common Mistakes

Do not use size to limit how many characters a user can enter. Use the maxlength attribute when an input needs a maximum character limit.

Do not use a value of 0 or a negative number. When specified, the size value must be an integer greater than zero.

Do not expect size="20" on an input to produce an exact width of 20 characters in every font. Character widths vary, so the resulting physical width is approximate.

Do not assume that size has the same effect on <input> and <select>. It affects the visible width of supported input controls but specifies the number of visible options for a select control.

Browser Support

Baseline: Limited availability indicates that a feature is not yet available in all core browsers. Use these features with caution because they may only work in select browsers, so additional compatibility checks may be needed before general use.

The size attribute is supported on applicable <input> elements, but support and presentation for size on <select> can vary, particularly on mobile browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the size Attribute

The example compares text fields with different size values and uses size="3" on a <select> element to display three options at one time.

Summary

The HTML size attribute controls the visible size of certain form controls. On supported <input> elements, it specifies how many characters should be visible while editing the value. On a <select> element, it specifies how many options should be shown at one time. The value must be an integer greater than zero, and CSS can be used when more precise visual sizing is required.