Web form

nlz18001 · Mar 24, 2024 · dc1d1ba · dc1d1ba
1 parent 76ce8e3
commit dc1d1ba
Showing 1 changed file with 117 additions and 0 deletions.
diff --git a/week-09/web-form/index.html b/week-09/web-form/index.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web Form</title>
+<style>
+    body {
+        display: flex;
+        justify-content: center;
+    }
+
+    .container {
+        border: 1px solid black;
+        padding: 10px;
+        max-width: fit-content;
+        display: flex;
+        flex-direction: column;
+    }
+
+    form {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+    }
+
+    button {
+        width: 147px;
+        background-color: rgb(168, 212, 252);
+        border-color: rgb(0, 140, 255);
+    }
+
+    header {
+        font-family: Arial, Helvetica, sans-serif;
+        display: flex;
+        flex-direction: column;
+    }
+
+    h1 {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        color: black;
+    }
+
+    h2 {
+        margin-top: 5px;
+        font-size: 18px;
+        color: black;
+    }
+
+    .error {
+        display: none;
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: 12px;
+        color: red;
+        margin-top: 10px;
+    }
+</style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>Web Form</h1>
+            <h2>Please fill out the following information to send us a message.</h2>
+        </header>
+        <form action="index.html">
+            <div class="name">
+                <input type="text" name="first-name" id="first" placeholder="First Name">
+                <input type="text" name="second-name" id="second" placeholder="Last Name">
+            </div>
+            <div class="email">
+                <input type="text" name="email-address" id="email" placeholder="Email">
+            </div>
+            <div class="subject">
+                <input type="text" name="subject-line" id="subject" placeholder="Subject">
+            </div>
+            <div class="message">
+                <input type="text" name="message-input" id="message" placeholder="Message">
+            </div>
+            <button type="submit">Send</button>
+        </form>
+        <div class="error"></div>
+    </div>
+<script>
+    const form = document.querySelector('form');
+    form.addEventListener('submit', function(event){
+        event.preventDefault();
+
+        let firstName = document.getElementById('first').value.trim();
+        let lastName = document.getElementById('second').value.trim();
+        let email = document.getElementById('email').value.trim();
+        let subject = document.getElementById('subject').value.trim();
+        let message = document.getElementById('message').value.trim();
+        let error = document.querySelector('.error');
+
+        if (!firstName || !lastName || !email || !subject || !message) {
+            error.style.display = 'block';
+            error.textContent = "Please fill in all of the information before proceeding.";
+            if (!firstName) {
+                document.getElementById('first').focus();
+            } else if (!lastName) {
+                document.getElementById('second').focus();
+            } else if (!email) {
+                document.getElementById('email').focus();
+            } else if (!subject) {
+                document.getElementById('subject').focus();
+            } else {
+                document.getElementById('message').focus();
+            }
+        } else {
+            error.style.display = 'none';
+            form.submit();
+        }
+    });
+</script>
+</body>
+</html>