EXPERIMENT-5
AIM: Create a “registration form” with the following fields: Name (Text field) Password (password field)
E-mailid (text field) Phone Number (text field) Sex (radio button) Date of birth (3 select boxes) Languages
known (checkboxes–English, Telugu, Hindi, Tamil) Address (text area)
HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="form-container">
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password"
required>
<label for="email">E-mail ID:</label>
<input type="text" id="email" name="email" placeholder="Enter your email" required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" placeholder="Enter your phone number"
required>
<label>Sex:</label>
<input type="radio" id="male" name="sex" value="Male"> Male
<input type="radio" id="female" name="sex" value="Female"> Female
<input type="radio" id="other" name="sex" value="Other"> Other
<label for="dob">Date of Birth:</label>
<select id="day" name="day">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<!-- Add all days up to 31 -->
</select>
<select id="month" name="month">
<option value="">Month</option>
<option value="1">January</option>
<option value="2">February</option>
<!-- Add all months -->
</select>
<select id="year" name="year">
<option value="">Year</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<!-- Add years range -->
</select>
<label>Languages Known:</label>
<input type="checkbox" id="english" name="languages" value="English"> English
<input type="checkbox" id="telugu" name="languages" value="Telugu"> Telugu
<input type="checkbox" id="hindi" name="languages" value="Hindi"> Hindi
<input type="checkbox" id="tamil" name="languages" value="Tamil"> Tamil
<label for="address">Address:</label>
<textarea id="address" name="address" placeholder="Enter your address" required></textarea>
<button type="submit">Register</button>
</form>
<div id="message"></div>
</div>
<script src="script.js"></script>
</body>
</html>
Css:
/* General Styling */ h2 {
body { text-align: center;
font-family: 'Arial', sans-serif; margin-bottom: 20px;
background-color: #f7f7f7; color: #9b59b6;
display: flex; font-size: 32px;
justify-content: center; }
align-items: center;
height: 100vh; label {
margin: 0; display: block;
} font-size: 24px;
margin: 10px 0 5px;
.form-container { color: black;
background-color: white; }
padding: 50px;
border-radius: 8px; input[type="text"],
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); input[type="password"],
width: 500px; textarea,
border: 2px solid #9b59b6; select {
} width: 100%;
padding: 10px; background-color: #6a1b9a;
margin-bottom: 15px; }
border-radius: 5px;
border: 1px solid #9b59b6; #message {
font-size: 18px; text-align: center;
box-sizing: border-box; margin-top: 20px;
} font-size: 18px;
input[type="text"]:focus,
input[type="password"]:focus, #error {
textarea:focus, color: red;
select:focus { }
border-color: #6a1b9a;
outline: none; #success {
} color: green;
button {
background-color: #9b59b6; /* Responsive Design */
color: white; @media (max-width: 600px) {
padding: 12px; .form-container {
font-size: 18px; width: 90%;
border: none; padding: 30px;
border-radius: 5px; }
width: 100%;
cursor: pointer; h2 {
transition: background-color 0.3s; font-size: 28px;
} }
button:hover { label {
font-size: 20px; const email =
document.getElementById("email").value.trim()
}
;
const phone =
input[type="text"], document.getElementById("phone").value.trim(
);
input[type="password"],
const sex =
textarea, document.querySelector('input[name="sex"]:ch
select { ecked');
font-size: 16px; const day =
document.getElementById("day").value.trim();
}
const month =
document.getElementById("month").value.trim(
button { );
font-size: 16px; const year =
document.getElementById("year").value.trim();
}
const languages =
} document.querySelectorAll('input[name="langu
ages"]:checked');
const address =
Script:
document.getElementById("address").value.tri
function showMessage(message, type) { m();
const messageDiv =
document.getElementById('message');
// Check required fields
messageDiv.innerText = message;
if (!name || !password || !email || !phone ||
messageDiv.className = type === 'error' ? !sex || !day || !month || !year || !address) {
'error' : 'success';
showMessage("Please fill out all required
} fields.", 'error');
return false;
function validateForm() { }
const name =
document.getElementById("name").value.trim()
// Password validation
;
if (!/^[a-zA-Z0-9]{6,}$/.test(password)) {
const password =
document.getElementById("password").value.tr showMessage("Password must be at least 6
im(); characters long.", 'error');
return false;
// Email validation
if (!/^\S+@\S+\.\S+$/.test(email)) {
showMessage("Please enter a valid email
address.", 'error');
return false;
// Language selection validation
if (languages.length === 0) {
showMessage("Please select at least one
language.", 'error');
return false;
showMessage("Registration Successful!",
'success');
return true;
OUTPUT
