Scribd
Upload
11 views

New Text Document Reg

This document is an HTML template for a registration page for ABC Services. It includes a form for users to register as either a customer or an admin, with fields for personal information, preferences, and password confirmation. The page also features validation scripts to ensure user input is correct and provides feedback on errors.

Uploaded by

Anubhav Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views

New Text Document Reg

This document is an HTML template for a registration page for ABC Services. It includes a form for users to register as either a customer or an admin, with fields for personal information, preferences, and password confirmation. The page also features validation scripts to ensure user input is correct and provides feedback on errors.

Uploaded by

Anubhav Paul
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 8

<!

DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register - ABC Services</title>
<style>
/* Same styles as before */
body {
font-family: Arial, sans-serif;
background-color: #d1f2d1;
margin: 0;
padding: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
}

header {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

header h1 {
margin: 0;
font-size: 24px;
color: #2d3748;
}

.main-content {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}

.register-box {
background-color: #e6f5e6;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

.register-box h2 {
margin: 0 0 20px 0;
text-align: center;
color: #2d3748;
}

.role-selection {
margin-bottom: 20px;
display: flex;
gap: 20px;
justify-content: center;
}

.role-option {
display: flex;
align-items: center;
}

.role-option input[type="radio"] {
margin-right: 8px;
}

.role-option label {
font-size: 14px;
color: #4a5568;
}

.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
color: #4a5568;
font-size: 14px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
width: 100%;
padding: 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
box-sizing: border-box;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #3b82f6;
outline: none;
}

.mobile-number {
display: flex;
gap: 10px;
}

.mobile-number select {
width: 30%;
}

.mobile-number input {
width: 70%;
}
.show-password {
display: flex;
align-items: center;
margin-top: 5px;
font-size: 12px;
color: #666;
}

.show-password input[type="checkbox"] {
margin-right: 4px;
transform: scale(0.9);
}

.register-button,
.reset-button {
width: 48%;
padding: 10px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}

.register-button {
background-color: #3b82f6;
color: white;
}

.register-button:hover {
background-color: #2563eb;
}

.reset-button {
background-color: #f8f9fa;
color: #4a5568;
border: 1px solid #d1d5db;
}

.reset-button:hover {
background-color: #e2e8f0;
}

.button-group {
display: flex;
justify-content: space-between;
margin-top: 20px;
}

.error-message {
color: #dc2626;
font-size: 12px;
margin-top: 5px;
display: none;
}

.success-message {
color: #16a34a;
font-size: 14px;
text-align: center;
margin-top: 20px;
}

.acknowledgment-screen {
display: none;
}

.preferences-group {
display: flex;
gap: 20px;
margin-bottom: 15px;
}

.preferences-group div {
display: flex;
align-items: center;
}

.preferences-group input[type="checkbox"] {
margin-right: 8px;
}

footer {
background-color: #c8e6c9;
padding: 15px;
text-align: center;
font-size: 12px;
color: #4a5568;
}

/* New style for the login link */


.login-link {
text-align: center;
margin-top: 20px;
font-size: 14px;
color: #4a5568;
}

.login-link a {
color: #3b82f6;
text-decoration: none;
}

.login-link a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<header>
<h1>ABC Services Company</h1>
</header>

<div class="main-content">
<div class="register-box">
<h2>Register</h2>
<form id="registerForm">
<div class="role-selection">
<div class="role-option">
<input type="radio" id="customerRole" name="role"
value="customer" checked>
<label for="customerRole">Customer</label>
</div>
<div class="role-option">
<input type="radio" id="adminRole" name="role"
value="admin">
<label for="adminRole">Admin</label>
</div>
</div>

<!-- Personal Information -->


<div class="form-group">
<label for="customerName">Customer Name</label>
<input type="text" id="customerName" maxlength="50" required>
<div id="customerNameError" class="error-message"></div>
</div>

<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" required>
<div id="emailError" class="error-message"></div>
</div>

<div class="form-group">
<label for="mobileNumber">Mobile Number</label>
<div class="mobile-number">
<select id="countryCode">
<option value="+1">+1 (USA)</option>
<option value="+91">+91 (India)</option>
<option value="+44">+44 (UK)</option>
</select>
<input type="text" id="mobileNumber" maxlength="10"
required>
</div>
<div id="mobileNumberError" class="error-message"></div>
</div>

<div class="form-group">
<label for="address">Address</label>
<textarea id="address" rows="3" required></textarea>
<div id="addressError" class="error-message"></div>
</div>

<!-- Password -->


<div class="form-group">
<label for="password">Password</label>
<input type="password" id="password" maxlength="30" required>
<div class="show-password">
<input type="checkbox" id="showPassword">
Show password
</div>
<div id="passwordError" class="error-message"></div>
</div>

<div class="form-group">
<label for="confirmPassword">Confirm Password</label>
<input type="password" id="confirmPassword" maxlength="30"
required>
<div id="confirmPasswordError" class="error-message"></div>
</div>

<!-- Preferences -->


<div class="form-group">
<label>Preferences</label>
<div class="preferences-group">
<div>
<input type="checkbox" id="mailDelivery">
<label for="mailDelivery">Mail updates</label>
</div>
<div>
<input type="checkbox" id="notifications">
<label for="notifications">Notifications</label>
</div>
</div>
</div>

<!-- Buttons -->


<div class="button-group">
<button type="submit" class="register-button">Register</button>
<button type="reset" class="reset-button">Reset</button>
</div>
</form>

<!-- Login Link -->


<div class="login-link">
Already have an account? <a href="login.html">Login here</a>
</div>

<!-- Acknowledgment Screen -->


<div id="acknowledgmentScreen" class="acknowledgment-screen">
<div class="success-message">Consumer Registration
Successful!</div>
<div class="form-group">
<label>Customer Name:</label>
<span id="ackName"></span>
</div>
<div class="form-group">
<label>Email:</label>
<span id="ackEmail"></span>
</div>
</div>
</div>
</div>

<footer>
<p>Helpline: +1 123 456 7890 • Address: 123 Green Street, Eco City,
Earth</p>
<p>&copy; 2025 ABC Services. All rights reserved.</p>
</footer>

<script>
// Show/hide password functionality
document.getElementById('showPassword').addEventListener('change',
function() {
const passwordInput = document.getElementById('password');
const confirmPasswordInput =
document.getElementById('confirmPassword');
passwordInput.type = this.checked ? 'text' : 'password';
confirmPasswordInput.type = this.checked ? 'text' : 'password';
});

// Form validation and submission


document.getElementById('registerForm').addEventListener('submit',
function(e) {
e.preventDefault();

// Get form values


const customerName = document.getElementById('customerName').value;
const email = document.getElementById('email').value;
const mobileNumber = document.getElementById('mobileNumber').value;
const address = document.getElementById('address').value;
const password = document.getElementById('password').value;
const confirmPassword =
document.getElementById('confirmPassword').value;

// Reset error messages


document.querySelectorAll('.error-message').forEach(el => {
el.style.display = 'none';
});

let hasError = false;

// Validate Customer Name


if (customerName.length > 50) {
document.getElementById('customerNameError').textContent =
'Customer Name must be less than 50 characters';
document.getElementById('customerNameError').style.display =
'block';
hasError = true;
}

// Validate Email
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
document.getElementById('emailError').textContent = 'Invalid email
format';
document.getElementById('emailError').style.display = 'block';
hasError = true;
}

// Validate Mobile Number


if (!/^\d{10}$/.test(mobileNumber)) {
document.getElementById('mobileNumberError').textContent = 'Mobile
number must be 10 digits';
document.getElementById('mobileNumberError').style.display =
'block';
hasError = true;
}

// Validate Address
if (address.trim() === '') {
document.getElementById('addressError').textContent = 'Address is
required';
document.getElementById('addressError').style.display = 'block';
hasError = true;
}
// Validate Password
const hasUpperCase = /[A-Z]/.test(password);
const hasLowerCase = /[a-z]/.test(password);
const hasSpecialChar = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]
+/.test(password);

if (password.length < 8 || password.length > 30 || !hasUpperCase || !


hasLowerCase || !hasSpecialChar) {
document.getElementById('passwordError').textContent = 'Password
must contain: At least one uppercase letter, one lowercase letter, and one special
character';
document.getElementById('passwordError').style.display = 'block';
hasError = true;
}

// Validate Confirm Password


if (password !== confirmPassword) {
document.getElementById('confirmPasswordError').textContent =
'Passwords do not match';
document.getElementById('confirmPasswordError').style.display =
'block';
hasError = true;
}

// If no errors, show acknowledgment screen


if (!hasError) {
document.getElementById('registerForm').style.display = 'none';
document.getElementById('acknowledgmentScreen').style.display =
'block';

// Display acknowledgment details


document.getElementById('ackName').textContent = customerName;
document.getElementById('ackEmail').textContent = email;
}
});

// Reset form
document.getElementById('registerForm').addEventListener('reset',
function() {
document.querySelectorAll('.error-message').forEach(el => {
el.style.display = 'none';
});
});
</script>
</body>
</html>

You might also like