Scribd
Upload
6 views

Experiment 2

f3

Uploaded by

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

Experiment 2

f3

Uploaded by

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

ATHEESH A

953622205012

EXPERIMENT 2
FORM VALIDATION USING JAVASCRIPT
FORM.HTML:
<!DOCTYPE html> <label
for="confirmPassword">Confirm
<html lang="en">
Password:</label>
<head>
<input type="password"
<meta charset="UTF-8"> id="confirmPassword" required>

<meta name="viewport"
content="width=device-width, initial-
<label for="dob">Date of
scale=1.0">
Birth:</label>
<title>Registration Form</title>
<input type="date" id="dob" required>
<link rel="stylesheet" href="style.css">
</head>
<label for="gender">Gender:</label>
<body>
<select id="gender" required>
<div class="container">
<option value="">Select</option>
<h2>Registration Form</h2>
<option
<form id="registrationForm" value="male">Male</option>
onsubmit="submitForm(event)">
<option
<label for="fullName">Full value="female">Female</option>
Name:</label>
<option
<input type="text" id="fullName" value="other">Other</option>
required>
</select>

<label for="email">Email
<button
Address:</label>
type="submit">Register</button>
<input type="email" id="email"
</form>
required>
</div>

<label
for="password">Password:</label> <script src="script.js"></script>
<input type="password" </body>
id="password" required>
</html>
ATHEESH A
953622205012

STYLE.CSS:
body { }
font-family: Arial, sans-serif;
margin: 0; input, select {
padding: 0; width: 100%;
display: flex; padding: 8px;
justify-content: center; margin-bottom: 10px;
align-items: center; border: 1px solid #ccc;
height: 100vh; border-radius: 3px;
background-color: #f2f2f2; box-sizing: border-box;
} }

.container { button {
background-color: #fff; width: 100%;
padding: 20px; padding: 10px;
border-radius: 5px; border: none;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 3px;
} background-color: #007bff;
color: #fff;
h2 { cursor: pointer;
text-align: center; }
}
button:hover {
label { background-color: #0056b3;
display: block; }
margin-bottom: 5px;
ATHEESH A
953622205012

SCRIPT.JS:
function submitForm(event) { // Validation example (you can
customize it further)
event.preventDefault();
if (password !== confirmPassword) {
const fullName =
document.getElementById('fullName').val alert("Passwords don't match");
ue;
return;
const email =
}
document.getElementById('email').value;
const password =
document.getElementById('password').val // You can perform further actions like
ue; sending data to server, etc.
const confirmPassword = console.log("Full Name:", fullName);
document.getElementById('confirmPassw
ord').value; console.log("Email Address:", email);

const dob = console.log("Password:", password);


document.getElementById('dob').value; console.log("Date of Birth:", dob);
const gender = console.log("Gender:", gender);
document.getElementById('gender').value;
}

OUTPUT:
ATHEESH A
953622205012

You might also like