Added high level plan and some starter files (forms from HW3)

2024-11-24 22:37:34 -08:00
parent c3e0a28fce
commit 552f56cdb0
4 changed files with 416 additions and 5 deletions
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Form</title>
+    <link rel="stylesheet" href="styles.css" />
+    <script defer src="form.js"></script>
+  </head>
+  <body>
+    <main>
+      <h1>Website Under Construction :(</h1>
+      <form action="/submit" class="form-container">
+        <h2>Sign Up Form</h2>
+        <h3>Fill in the form below.</h3>
+
+        <div class="form-group">
+          <label for="name">Name:</label>
+          <input type="text" id="name" name="name" />
+        </div>
+
+        <div class="form-group">
+          <label for="uname">Username:</label>
+          <input type="text" id="uname" name="uname" />
+        </div>
+
+        <div class="form-group">
+          <label for="email">Email:</label>
+          <input type="email" id="email" name="email" />
+        </div>
+
+        <div class="form-group">
+          <label for="pword">Password:</label>
+          <input type="password" id="pword" name="pword" />
+        </div>
+
+        <div class="form-group">
+          <label for="dob">Date of birth:</label>
+          <input type="date" id="dob" name="dob" />
+        </div>
+
+        <fieldset class="pronoun-group">
+          <legend>Preferred Pronouns</legend>
+          <label class="radio-label"
+            ><input type="radio" name="pronouns" value="she-her" />
+            She/Her</label
+          >
+          <br />
+          <label class="radio-label"
+            ><input type="radio" name="pronouns" value="he-him" /> He/Him</label
+          >
+          <br />
+          <label class="radio-label"
+            ><input type="radio" name="pronouns" value="they-them" />
+            They/Them</label
+          >
+          <br />
+          <label class="radio-label"
+            ><input type="radio" name="pronouns" value="no-preference" /> I
+            prefer not to say</label
+          >
+        </fieldset>
+
+        <div class="form-actions">
+          <button type="submit">Submit</button>
+          <button type="reset">Reset</button>
+        </div>
+      </form>
+    </main>
+  </body>
+</html>