pattern

pattern attribute

The pattern attribute sets a regular expression for validating values in <input> fields, making sure the data entered matches the required format before submitting the form.

Purpose: Specifies a regular expression to validate input, ensuring the data follows a specific format.
Usage: Used with <input> elements to enforce a particular format for user entries, such as phone numbers or email addresses.

Syntax

<input pattern="regexp">

Example

<form>
  <label for="username">Username (must contain only letters and numbers, 3-10 characters):</label><br>
  <input type="text" id="username" name="username" pattern="[A-Za-z0-9]{3,10}" title="Username must contain only letters and numbers and be between 3 to 10 characters long" required><br><br>
  <label for="password">Password (must be at least 8 characters long):</label><br>
  <input type="password" id="password" name="password" pattern=".{8,}" title="Password must be at least 8 characters long" required><br><br>
  <input type="submit" value="Submit">
</form>

Definition and Usage

The pattern attribute specifies a regular expression that the value of an <input> element must match for the form to be submitted.

Values

• regexp
  • A regular expression is provided without enclosing forward slashes. If the attribute is omitted, left empty, or contains an invalid pattern, no regular expression will be enforced.

Applies To

The pattern attribute can be applied to the following HTML elements:

• <input>

Conclusion

The pattern attribute enforces custom validation using regular expressions, ensuring user inputs match a defined format. It works with various input types like text, email, and password. By applying this attribute, you can create more secure and user-friendly forms.