diff options
| author | Saumit Dinesan <justsaumit@protonmail.com> | 2023-09-18 23:04:05 +0530 |
|---|---|---|
| committer | Saumit Dinesan <justsaumit@protonmail.com> | 2023-09-18 23:04:05 +0530 |
| commit | c2f4b5442c065c2a7a6288ce46ed409aa054d8bb (patch) | |
| tree | 80dfbced53332ec7275210e57f25e8b42be2a45d | |
| parent | 802596f49808b4a1c0d49b7fb3701fe390615854 (diff) | |
Lab05: HTML Form Verification using JavaScript
| -rw-r--r-- | Lab05/index.html | 48 | ||||
| -rw-r--r-- | Lab05/script.js | 32 | ||||
| -rw-r--r-- | Lab05/style.css | 34 |
3 files changed, 114 insertions, 0 deletions
diff --git a/Lab05/index.html b/Lab05/index.html new file mode 100644 index 0000000..b29a22b --- /dev/null +++ b/Lab05/index.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <link rel="stylesheet" href="style.css"> + <title>HTML Form Creation</title> +</head> +<body> + <div class="container"> + <h1>Registration Form</h1> + <form id="registrationForm"> + <label for="fname">First name:</label><br> + <input type="text" id="fname" name="fname" required><br> + <label for="lname">Last name:</label><br> + <input type="text" id="lname" name="lname" required><br> + <label for="gender">Gender:</label><br> + <select name="gender" id="gender"> + <option value="male">Male</option> + <option value="female">Female</option> + <option value="other">Other</option> + </select> + <br> + <label for="phone">Phone Number:</label><br> + <input type="tel" id="phone" name="phone" required><br> + <label for="email">Email Address:</label><br> + <input type="email" id="email" name="email" required><br> + <label for="address">Home Address:</label><br> + <input type="text" id="address" name="address" required><br> + <br> + <label for="department">Department: </label><br> + <input type="radio" id="it" name="department" value="IT" required> + <label for="it">Information Technology</label><br> + <input type="radio" id="cse" name="department" value="CSE" required> + <label for="cse">Computer Science and Engineering</label><br> + <input type="radio" id="mech" name="department" value="MECH" required> + <label for="mech">Mechanical Engineering</label><br> + <input type="radio" id="civil" name="department" value="CIVIL" required> + <label for="civil">Civil Engineering</label><br> + <input type="radio" id="ece" name="department" value="ECE" required> + <label for="ece">Electronics and Communication Engineering</label><br> + <br> + <input type="submit" value="Submit"> + </form> + </div> + <script src="script.js"></script> +</body> +</html> diff --git a/Lab05/script.js b/Lab05/script.js new file mode 100644 index 0000000..c8a542c --- /dev/null +++ b/Lab05/script.js @@ -0,0 +1,32 @@ +document.addEventListener("DOMContentLoaded", function () { + const form = document.getElementById("registrationForm"); + + form.addEventListener("submit", function (event) { + event.preventDefault(); // Prevent the default form submission behavior + + const fname = document.getElementById("fname").value; + const lname = document.getElementById("lname").value; + const gender = document.getElementById("gender").value; + const phone = document.getElementById("phone").value; + const email = document.getElementById("email").value; + const address = document.getElementById("address").value; + const department = document.querySelector('input[name="department"]:checked'); + + const verificationText = ` + First Name: ${fname}\n + Last Name: ${lname}\n + Gender: ${gender}\n + Phone Number: ${phone}\n + Email Address: ${email}\n + Home Address: ${address}\n + Department: ${department ? department.value : "Not specified"}\n + `; + + const isVerified = window.confirm("Please verify the entered information:\n\n" + verificationText + "\n\nDo you want to proceed?"); + + if (isVerified) { + alert("Form successfully submitted!"); + form.reset(); // Clear the form fields + } + }); +}); diff --git a/Lab05/style.css b/Lab05/style.css new file mode 100644 index 0000000..6fadd64 --- /dev/null +++ b/Lab05/style.css @@ -0,0 +1,34 @@ +html { + font-family: sans-serif; + background-color: whitesmoke; + margin: 0; + padding: 0; + height: 100%; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + padding: 0; +} + +h1 { + text-decoration: underline; + font-size: 1.9rem; +} + +.container { + text-align: center; + background: linear-gradient(to bottom right, #4ea6e0, #3a8cc5); + padding: 20px; + border-radius: 10px; + box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); +} + +.container input[type="radio"] { + text-align: left; + margin-left: 20px; +} |