From c2f4b5442c065c2a7a6288ce46ed409aa054d8bb Mon Sep 17 00:00:00 2001 From: Saumit Dinesan Date: Mon, 18 Sep 2023 23:04:05 +0530 Subject: Lab05: HTML Form Verification using JavaScript --- Lab05/index.html | 48 ++++++++++++++++++++++++++++++++++++++++++++++++ Lab05/script.js | 32 ++++++++++++++++++++++++++++++++ Lab05/style.css | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 114 insertions(+) create mode 100644 Lab05/index.html create mode 100644 Lab05/script.js create mode 100644 Lab05/style.css 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 @@ + + + + + + + HTML Form Creation + + +
+

Registration Form

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+
+ +
+
+ + + 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; +} -- cgit v1.2.3