|
The HTML SignUp form is a user interface component comprising input fields for capturing personal information such as name, email, password, typically styled with CSS for presentation and validation.
Approach- Form Structure: The HTML form includes fields for username, email, password, and confirm password, with a submit button to send the data.
- Styling: CSS styles are applied to make the form visually appealing, including a centered container with padding, rounded corners, and shadow effects. Input fields and buttons are styled for better user interaction.
- Password Validation: JavaScript is used to validate the password against specific criteria: at least 8 characters, one uppercase letter, one lowercase letter, one number, and one special character.
- Password Strength Indicator: As the user types the password, a strength indicator dynamically shows if the password is weak, medium, or strong, helping users create secure passwords.
- Error Handling and Messages: Error messages are displayed if the password does not meet the criteria or if the password and confirmation do not match. A success message is shown upon successful signup.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Form</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
width: 100%;
padding: 10px;
background-color: #5cb85c;
border: none;
color: white;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #4cae4c;
}
#message {
margin-top: 20px;
text-align: center;
}
.error {
color: red;
font-size: 0.9em;
}
.password-hint {
font-size: 0.9em;
color: #666;
margin-top: 5px;
display: none;
}
.password-strength {
margin-top: 5px;
}
.password-strength div {
height: 5px;
border-radius: 4px;
}
.weak {
width: 33%;
background-color: red;
}
.medium {
width: 66%;
background-color: orange;
}
.strong {
width: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<h2>Signup Form</h2>
<form id="signupForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<div class="password-hint" id="passwordHint">
Password must be at least 8 characters long, and include at
least one uppercase letter, one lowercase letter, one
number, and one special character.
</div>
<span id="passwordError" class="error"></span>
<div class="password-strength" id="passwordStrength"></div>
</div>
<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword"
name="confirmPassword" required>
<span id="confirmPasswordError" class="error"></span>
</div>
<button type="submit">Signup</button>
</form>
<p id="message"></p>
</div>
<script>
document.getElementById('signupForm').addEventListener('submit', function (event) {
event.preventDefault();
let username = document.getElementById('username').value;
let email = document.getElementById('email').value;
let password = document.getElementById('password').value;
let confirmPassword = document.getElementById('confirmPassword').value;
let message = document.getElementById('message');
let passwordError = document.getElementById('passwordError');
let confirmPasswordError = document.getElementById('confirmPasswordError');
let passwordValid = validatePassword(password);
if (!passwordValid) {
passwordError.textContent = 'Password does not meet the requirements.';
return;
} else {
passwordError.textContent = '';
}
if (password !== confirmPassword) {
confirmPasswordError.textContent = 'Passwords do not match!';
return;
} else {
confirmPasswordError.textContent = '';
}
// Here you can add code to send the form data to the server
message.style.color = 'green';
message.textContent = 'Signup successful!';
});
document.getElementById('password').addEventListener('focus', function () {
document.getElementById('passwordHint').style.display = 'block';
});
document.getElementById('password').addEventListener('blur', function () {
document.getElementById('passwordHint').style.display = 'none';
});
document.getElementById('password').addEventListener('input', function () {
let password = this.value;
let passwordStrength = document.getElementById('passwordStrength');
let strength = getPasswordStrength(password);
passwordStrength.innerHTML = ''; // Clear previous strength bars
if (strength) {
let strengthBar = document.createElement('div');
strengthBar.className = strength;
passwordStrength.appendChild(strengthBar);
}
});
function validatePassword(password) {
let regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
return regex.test(password);
}
function getPasswordStrength(password) {
if (password.length < 8) {
return 'weak';
}
if (password.match(/(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])/)) {
return 'strong';
}
return 'medium';
}
</script>
</body>
</html>
Output:
 HTML Sign-Up Form
|
HTML5
How to Get Milliseconds in JavaScript?
How to Add Symbols in HTML?