YouTipAtt Input Maxlength
## HTML `` maxlength Attribute
The `maxlength` attribute specifies the maximum number of characters (UTF-16 code units) that a user can enter into an `` element.
When this attribute is set, the browser prevents the user from typing or pasting more than the specified limit, providing an immediate, client-side constraint on text input.
---
## Quick Example
Below is a simple form with a username field restricted to a maximum of 10 characters:
```html
```
---
## Browser Support
The `maxlength` attribute is universally supported by all modern web browsers:
* Google Chrome
* Mozilla Firefox
* Microsoft Edge / Internet Explorer
* Safari
* Opera
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| `number` | An integer greater than or equal to `0` that defines the maximum number of characters allowed in the input field. |
---
## Applicable Input Types
The `maxlength` attribute can be used with the following `` types:
* `text`
* `search`
* `url`
* `tel`
* `email`
* `password`
*Note: It is ignored for other input types, such as `number`, `range`, `date`, etc.*
---
## Detailed Examples
### 1. Password Length Restriction
Limit a password input to a maximum of 16 characters:
```html
```
### 2. Telephone Number Formatting
Limit a telephone input to 10 digits:
```html
```
---
## Important Considerations
### 1. Difference Between `maxlength` and `size`
* **`maxlength`**: Defines the maximum number of **characters** the user can type into the field.
* **`size`**: Defines the visual **width** of the input element on the screen (in terms of character width).
### 2. Validation and Security
* **Client-Side Limitation**: The `maxlength` attribute only prevents users from typing more than the limit in the browser UI. It does not guarantee secure data validation.
* **Server-Side Validation**: Users can easily bypass `maxlength` by modifying the HTML using browser developer tools or by sending direct HTTP requests. **Always validate the length of the input on your server.**
### 3. User Experience (UX)
When a user reaches the `maxlength` limit, the browser silently stops accepting further keystrokes. To improve usability, consider using JavaScript to display a character counter showing how many characters are remaining.