All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Password Pattern In HTML

Last Updated : Mar 11, 2024

Password Pattern In HTML

In this tutorial we will show you the solution of password pattern in HTML and we will know about how we can apply patterns in passwords.

Many times we see in websites on web that when we want to register using sign up page and in that when we come across password section there is validation applied like the password must be greater than eight characters, there should be an alphabet, small character with numeric and special characters.

Let us understand how we can apply them.

Step By Step Guide On Password Pattern In HTML :-

As, in below code we will understand how to apply patterns on password with the help of input tag.

These type of patterns are required nowadays due to security issues. With the advancement of technology, everyone required a password which is hard to crack.

Here, below we show you html code for patterns in passwords.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document</title>
   </head>
<body>
    <h2>Password pattern in html</h2>
    <div>
        <form>
            <label for="username">Username</label>
            <input id="username" type="text" name="username" required>
            <label for="password">Password</label>
            <input id="password" type="password” name="password"
                pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,24}$" required>
            <input type="submit">
        </form>
    </div>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title.
  4. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  5. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
  6. Here, in body we create a heading there first for reference. And after there we create a division and inside division we create a form.
  7. Now, inside form tag, we create some labels and input tag. You can use as much as you want. And in first input we apply required so that the inputs may not left blank.
  8. Now let’s talk about passwords and their pattern. For password input type password is used and pattern is described as.
  9. pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,24}$" required>
  10. Here, first we use pattern attribute and inside pattern the
  11. (?=.*[a-z]) - is for at least one lower character
  12. (?=.*[A-Z]) - is for at least one upper character
  13. (?=.*[0-9]) - is for at least one numeric value
  14. (?=.*[!@#$%^&*_=+-]) - is for at least one special symbol
  15. {8,24} - the length should be in between 8 to 24
  16. Here, above we give the description of every point of value of pattern used in above code. we hope that you understand code properly.
  17. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we can say that with the help of this article we are able to apply patterns on passwords in html. I hope this tutorial on password pattern in HTML helps you.