HTML size Attribute

Description

The size attribute in HTML is used to specify the visual size of an input element. Primarily, it is applicable to <input> elements with a type of text, search, tel, url, email, and password, indicating how many characters wide the input field should be. The value of the size attribute is a positive integer that represents the number of characters.

For example, using <input type="text" size="30"> creates a text input field that is 30 characters wide, making it visually larger and capable of displaying more text without scrolling. This does not limit the number of characters that can be entered into the field; for that purpose, the maxlength attribute is used.

It's important to note that the actual visual width of the input field can vary depending on the user's browser and the CSS applied to the element. CSS can be used to override the size specified by the size attribute, offering more flexibility and control over the appearance of the input field.

While the size attribute provides a simple way to control the width of input elements, modern web development practices often favor CSS for styling and layout, including setting the width of form elements, due to its greater consistency and flexibility across different browsers and devices.

Syntax

<tagname size="number">

Values

• numberFor an input element, the element's width in number of characters. For a select element, the number of visible options.

Applies To

The size attribute can be used on the following html elements.

• <input>
• <select>

Example

<label for="username">Name:</label><br>

<input type="text" id="name" size="40" placeholder="Enter your name"><br><br>

<label for="username">Username:</label><br>

<input type="text" id="username" size="20" placeholder="Enter your username">

Browser Support

The following table will show you the current browser support for the HTML size Attribute.

Desktop
Yes	Yes	Yes	Yes	Yes

Tablets / Mobile
Yes	Yes	Yes	Yes	Yes	Yes

Last updated by CSSPortal on: 27th March 2024