How to add a regular expression in HTML that checks the value of an input element?-HTML Tutorial-php.cn

How to add a regular expression in HTML that checks the value of an input element?

WBOY

Release： 2023-08-19 19:33:12

forward

715 people have browsed it

How to add a regular expression in HTML that checks the value of an input element?

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">

Copy after login

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>

Copy after login

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>

Copy after login

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!