YouTipAtt Input Pattern
# HTML pattern Attribute
The `pattern` attribute is a powerful HTML5 validation mechanism that specifies a regular expression (regex) against which the `` element's value is checked on form submission.
---
## Introduction
The `pattern` attribute allows developers to perform client-side form validation without relying heavily on JavaScript. When a user submits a form, the browser automatically checks if the input value matches the specified regular expression. If the value does not match the pattern, the browser blocks the form submission and displays a validation message to the user.
---
## Syntax
```html
```
### Attribute Values
| Value | Description |
| :--- | :--- |
| `regexp` | Specifies the regular expression used to validate the `` element's value. |
---
## Supported Input Types
The `pattern` attribute is not applicable to all input types. It is designed to work with the following text-based input types:
* `text`
* `search`
* `url`
* `tel`
* `email`
* `password`
---
## Code Examples
### Example 1: Three-Letter Country Code
The following example demonstrates an input field that accepts only exactly three uppercase or lowercase letters (no numbers or special characters allowed):
```html
```
### Example 2: Phone Number Validation
This example validates a phone number format matching `123-456-7890`:
```html
```
---
## Best Practices and Considerations
### 1. Use the `title` Attribute for UX
Always pair the `pattern` attribute with the global `title` attribute. When validation fails, modern browsers display the text inside the `title` attribute as a tooltip or error message to help the user understand what format is expected.
### 2. Implicit Anchoring
Unlike standard JavaScript regular expressions, the pattern in the `pattern` attribute is compiled with implicit anchors at both ends. This means the pattern must match the **entire** input value, not just a substring.
* For example, `pattern=""` is treated as `^$`. It will only match a single uppercase letter, not a string containing one.
### 3. Empty Inputs are Ignored
If an input field is empty, the `pattern` validation is not triggered. If you want to make the field mandatory as well as formatted correctly, you must combine the `pattern` attribute with the `required` attribute.
### 4. Security Warning
Client-side validation using the `pattern` attribute is excellent for improving User Experience (UX) by providing instant feedback. However, it can easily be bypassed by malicious users. **Always perform server-side validation** to secure your application data.
---
## Browser Compatibility
| Feature | Chrome | Edge/IE | Firefox | Opera | Safari |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `pattern` Attribute | Yes | IE 10+ | Yes | Yes | Yes |
*Note: Older browsers (such as Internet Explorer 9 and earlier) do not support the `pattern` attribute. For these legacy environments, JavaScript-based fallback validation is recommended.*