HTML pattern Attribute

Posted in HTML Tutorial

Updated on Jan 30, 2024

By Mari Selvan

👁️ 93 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The pattern attribute is a powerful feature in HTML that allows developers to define a regular expression pattern for validating the input in a form field.

This attribute is commonly used with text-based input fields, such as textboxes and password fields, to ensure that the entered data matches a specified pattern.

🎯 Purpose of pattern

The primary purpose of the pattern attribute is to enforce a specific format for user input.

By providing a regular expression pattern, developers can guide users in entering data that adheres to a predefined structure.

This is particularly useful for collecting consistent and valid information through web forms.

💎 Values

The pattern attribute accepts a regular expression pattern as its value. Regular expressions are powerful tools for matching patterns in strings. When applied to the pattern attribute, the regular expression defines the valid format for the input.

For example, a pattern for a valid email address might look like this:

pattern.html

Copied

<input type="email" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}">

🧠 How it Works

In this example, the pattern attribute ensures that the input follows the standard format of an email address.

📄 Example

Let's look at a simple example of how to use the pattern attribute in an HTML form:

pattern.html

Copied

<form>
  <label for="phone">Phone Number:</label>
  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" placeholder="XXX-XXX-XXXX" required>
  <small>Enter the phone number in the format XXX-XXX-XXXX.</small>

  <input type="submit" value="Submit">
</form>

🧠 How it Works

In this example, the pattern attribute is used to enforce a specific pattern for the phone number input, requiring users to enter it in the format XXX-XXX-XXXX.

🔄 Dynamic Values with JavaScript

The pattern attribute can also be manipulated dynamically with JavaScript. This allows you to change the validation pattern based on user interactions or other dynamic factors.

pattern.html

Copied

<script>
  // Dynamically set a new pattern for an input field
  document.getElementById("dynamicPatternField").pattern = "[A-Za-z]{3}";
</script>

🧠 How it Works

In this script, the pattern attribute is dynamically set to "[A-Za-z]{3}" for an input field with the id "dynamicPatternField." This can be useful when you need to adjust validation patterns based on changing requirements.

🏆 Best Practices

Choose or create regular expression patterns that accurately match the expected format for the input field.
Provide clear instructions to users on the expected input format, especially when using patterns that might not be immediately obvious.
Always perform server-side validation to ensure data integrity and security, as client-side validation can be bypassed.

🎉 Conclusion

The pattern attribute is a valuable tool for enforcing specific input formats in HTML forms.

By utilizing regular expressions, developers can guide users in providing accurate and valid data, contributing to a more seamless and error-free user experience.