In: Computer Science
Is there a simple way to create a username and password for a registeration form?
The username should be between 4 and 20 characters. The password should be between 4 and 12 characters, contain at least one digit, and contain at least one uppercase and one lowercase character. Select four special characters and require that the password contain at least one of them.
Step by step solution to create simple registration form given below,
HTML code:
<!DOCTYPE html>
<html>
<body>
<h1>Registration Form</h1>
<form>
Username:<input type="text" id="username" name="username" minlength="4" maxlength="20" required><br><br>
Password:<input type="password" id="password" name="password" required pattern="(?=.*\d)(?=.*[@$!?])(?=.*[a-z])(?=.*[A-Z]).{4,12}" title="Must contain at least one number and one uppercase and lowercase and one special character from this list[@$!?], and length between 4 to 20"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Attributes definition:
minlength - it specifies the minimum number of characters required in an input field.
maxlength - it specifies the maximum number of characters allowed in the <input> element
required - it specifies that an input field must be filled out before submitting the form
pattern - it specifies a regular expression that the <input> element's value is checked
title - The information is most often shown as a tooltip text when the mouse moves over the element
patterns explanation:
(?=.*\d) - At least one digit
(?=.*[@$!?]) - At least one special character
(?=.*[a-z]) - At least one lower case
(?=.*[A-Z]) - At least one Upper case
{4,12} - length between 4 to 12.
Output should be displaying like this,
sample 1:
sample 2: