In this tutorial we will show you password validation in HTML and how we are able to apply validation on password. Validation means the password entered by user is according to your required pattern or not which you describe.
Nowadays, you found that there is always a required format of passwords in most of website.
This is due to security issue, due to evaluation in technology every one requires a strong password which is hard to crack.
That’s the reason why everyone require password validation. Let us understand it now.
Steps By Step Guide On Password Validation In HTML :-
As, we mostly see that the validation like length of password must be greater than 8 characters, there must be one lowercase letter, one uppercase letter, one numeric value and one special symbol.
Hence, today we are going to understand the most used validation. Here, below we show you some codes in html, which helps you to apply validation.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
</head>
<body>
<h2>Password pattern in html</h2>
<small> password length must be greater than 8 characters </small>
<small> their should be at least one lowercase alphabet </small>
<small> their should be at least one uppercase alphabet </small>
<small> their should be at least one numeric value </small>
<small> their should be at least one special symbol</small>
<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>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- 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.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here.
- 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. Before form, we create some lines of validations. So that, the user must know about what is required in password.
- 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.
- Now let’s talk about passwords and their pattern. For password input type password is used and pattern is described as - pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[!@#$%^&*_=+-]).{8,24}$" required>
- (?=.*[a-z]) - is for at least one lower character
- (?=.*[A-Z]) - is for at least one upper character
- (?=.*[0-9]) - is for at least one numeric value
- (?=.*[!@#$%^&*_=+-]) - is for at least one special symbol
- {8,24} - the length should be in between 8 to 24
- Here, above we give the description of every point of value of pattern used in above code. we hope that you understand code properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that after reading this article we are able to understand password validation in html. I hope this article on password validation in HTML helps you.
About Dikshita
