YouTipAtt Input Size
## HTML `` size Attribute
The `size` attribute specifies the visible width of an `` element, measured in characters.
This attribute helps developers control the visual layout of form fields directly in HTML, ensuring that input boxes are appropriately sized for their expected content (such as a short PIN, a postal code, or a longer email address).
---
## Browser Support
The `size` attribute is universally supported by all modern and legacy web browsers:
* Google Chrome
* Microsoft Edge / Internet Explorer
* Mozilla Firefox
* Apple Safari
* Opera
---
## Definition and Usage
* **Purpose:** Defines the visible width of the input field in terms of character count.
* **Default Value:** If the `size` attribute is not specified, the default visible width is typically **20** characters (though this can vary slightly depending on the browser and applied CSS).
* **Applicable Input Types:** The `size` attribute only works with the following text-based input types:
* `text`
* `search`
* `tel`
* `url`
* `email`
* `password`
> 💡 **Tip:** The `size` attribute only limits the **visible width** of the input box; it does not restrict how many characters a user can actually type into the field. To limit the maximum number of characters a user can enter, use the [`maxlength`](att-input-maxlength.html) attribute.
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| *number* | An integer greater than 0 that specifies the visible width of the `` element in characters. |
---
## Code Examples
### Basic Example
In the following form, the Email field is set to display a wider box (35 characters), while the PIN field is set to a narrow box (4 characters). The PIN field also uses `maxlength` to restrict the actual input length to 4 characters.
```html
```
---
## Considerations & Best Practices
### 1. `size` vs. CSS `width`
While the `size` attribute is a quick way to set the width of an input element, modern web design practices favor using CSS for styling and layout.
* **HTML `size`:** Sets the width based on character count. Because monospaced fonts are rarely used for standard inputs, the actual physical width can vary depending on the font family and browser rendering engine.
* **CSS `width`:** Offers precise control using absolute or relative units (e.g., `px`, `em`, `rem`, `%`, or `ch`).
If both the HTML `size` attribute and a CSS `width` property are applied to the same `` element, the **CSS styles will override** the HTML `size` attribute.
**Example of overriding with CSS:**
```html
```
### 2. User Experience (UX)
Always match the visual size of the input field to the expected length of the data. For instance, a state abbreviation field (e.g., "NY", "CA") should have a small `size` (e.g., `size="3"`), whereas a street address field should be much wider. This provides clear visual cues to users about what type of input is expected.