RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.w3resource.com/html-css-exercise/basic/input-pattern-answer.php below:

Website Navigation

HTML5: How to specify a regular expression that an input element's value is checked against?

HTML5: How to specify a regular expression that an input element's value is checked against?Last update on February 09 2024 12:52:43 (UTC/GMT +8 hours)

Go to Exercise page

Solution:

HTML Code:

<!DOCTYPE html><!-- Declares the document type and version of HTML -->
<html>
<head>
<meta charset="utf-8"><!-- Specifies the character encoding for the document -->
<title>How to specify a regular expression that an input element's value is checked against</title><!-- Sets the title of the document -->
</head>
<body>
<form method="post" <!-- Begins a form element with the method attribute set to "post", indicating that form data will be submitted via HTTP POST method -->
action="https://www.w3resource.com/html-css-exercise/basic/solution/input-pattern-answer-demo.php"><!-- Specifies the URL where the form data will be sent upon submission -->
Pin code: <input type="text" name="pin_code" <!-- Creates a text input field for entering the pin code. The name attribute is set to "pin_code" to identify the input data on the server side -->
pattern="[0-9]{6}" title="six number pin code"><!-- Specifies a regular expression pattern that the pin code input value must match. In this case, it specifies that the pin code must consist of six digits. The title attribute provides a tooltip or hint to the user -->
<input type="submit"><!-- Creates a submit button within the form -->
</form>
</body>
</html>

Explanation:

The HTML document starts with a declaration of its type and version (<!DOCTYPE html>).
The <html> element encloses the entire HTML document.
The <head> section contains metadata about the document, including the character encoding (<meta charset="utf-8">) and the title of the document (<title>).
Within the <body> section, a <form> element is used to create a form for user input. The method attribute is set to "post", indicating that form data will be submitted via HTTP POST method, and the action attribute specifies the URL where the form data will be sent upon submission.
Inside the form, there's an <input> element with type "text" for entering the pin code. The name attribute is set to "pin_code" to identify the input data on the server side.
The input element also includes a pattern attribute, which specifies a regular expression pattern that the pin code input value must match. In this case, it specifies that the pin code must consist of six digits ([0-9]{6}). The title attribute provides a tooltip or hint to the user, stating that the pin code should be six numbers.
Finally, an <input> element with type "submit" is used to create a submit button within the form, allowing users to submit the form data.

Live Demo:

See the Pen input-pattern-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser

Go to Exercise page

What is the difficulty level of this exercise?

Test your Programming skills with w3resource's quiz.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4