When you want to restrict user input to a specific format, the HTML5 pattern attribute is a powerful tool. You can add this attribute to input fields to define a regular expression that the entered value must match. This means the browser can automatically check if the user's input fits the expected pattern before allowing the form to submit. The pattern attribute works only on input fields of type text, search, tel, url, email, and password, and it provides a simple way to enforce formatting rules without writing any JavaScript.

Using the pattern attribute, as shown above, allows you to define exactly what a valid input should look like. In this example, the field only accepts phone numbers in the "123-456-7890" format. If the input does not match the pattern, the browser will prevent the form from submitting and display a validation message. This approach is simple and requires no JavaScript, making it easy to add basic validation rules.

However, the pattern attribute has its limitations. Regular expressions can be hard to read and maintain, especially for complex patterns. The browser's built-in validation messages are often generic and may not give users clear instructions about what went wrong. Additionally, the pattern attribute only works for certain input types, and it cannot enforce rules that depend on other fields or more complex logic. Still, for straightforward format requirements, pattern-based validation is a fast and effective solution.