Home > Article > Web Front-end > How to add a regular expression in HTML that checks the value of an input element?
How to add a regular expression in HTML that checks the value of an input element?
- WBOYforward
- 2023-08-19 19:33:12675browse
The task we are going to perform in this article is about how to add a regular expression that an input elements value is checked against in HTML.
The regular expression that will be used to check the value of the input element is specified by the mode attribute of HTML. The following input types are compatible with this property: text, password, date, search, email, etc.
Syntax
The following is the syntax of the pattern attribute of the HTML tag.
<input pattern = "regular_exp">
For getting more idea on how to add a regular expression that an input elements value is checked against in HTML, let’s look into the following examples
For type="password"
The type="password" attribute on the tag creates a text field where users can safely enter a password. Depending on the browser, characters are replaced as they are entered by a dot ("•") or asterisk ("*").
Example
In the following example, we use the element, whose type is "password".
<!DOCTYPE html>
<html>
<body>
<form action="#">
<label for="tutorial">Password:</label>
<input type="password" id="tutorial" name="tutorial" pattern=".{8,}"
title="Eight or More Characters">
<input type="submit">
</form>
</body>
</html>
When the above script is executed, it will generate an input field of type password and set a mode to ensure that it meets the constraints before it can be submitted, otherwise an alert box will be displayed.
For input field restricted with three letters
In this case, we have restricted the input field to only allow the user to enter three letters.
Example
Considering the following we are using the input field restricted with three letters with no numbers or special characters.
<!DOCTYPE html>
<html>
<body>
<form action="#">
<label for="tutorial">Country Code:</label>
<input type="text" id="tutorial" name="tutorial"
pattern="[A-Za-z]{3}" title=" country code"><br><br>
<input type="submit">
</form>
</body>
</html>
When the script is executed, it will display an output with the name "countrycode", and a submit button limited to three letters. If the limit is not met, it will display a warning box.
The above is the detailed content of How to add a regular expression in HTML that checks the value of an input element?. For more information, please follow other related articles on the PHP Chinese website!