Refactor form.html for better structure and accessibility

TheComputerCrasher · web-flow · commit 2f52bef8f79a · 2025-12-11T16:17:21.000-05:00
Updated the form structure and improved accessibility features.
diff --git a/tsa-site/form.html b/tsa-site/form.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 
 <head>
@@ -7,13 +7,11 @@
     <title>Williamsburg Resource Hub</title>
     <link rel="icon" type="image/x-icon" href="https://www.google.com/s2/favicons?sz=16&domain_url=https://tsaweb.org">
     <link rel="stylesheet" href="tsa.css">
-    
 </head>
 
 <body>
     <a class="skip-to-content" href="#main-content">Skip to content</a>
     <header>
-        <a href="index.html"></a>
         <h1>
             <a href="index.html">Welcome to the Williamsburg Resource Hub!</a>
         </h1>
@@ -27,19 +25,17 @@ <h1>
         </ul>
     </nav>
     <main id="main-content">
-        <title>
-            <p>Williamsburg Resource Hub</p>
-        </title>
         <form action="example.php" method="post">
             <fieldset>
+                <legend></legend>
                 <p>
                     <label for="name">Name of resource*</label>
-                    <input type="text" id="name" name="name" required />
+                    <input type="text" id="name" name="name" required>
                 </p>
 
                 <p>
                     <label for="type">Type*</label>
-                    <select id="type" name="type" required="">
+                    <select id="type" name="type" required>
                         <option value="">Choose...</option>
                         <option value="Non-profit">Non-profit</option>
                         <option value="Support">Support</option>
@@ -50,22 +46,20 @@ <h1>
                         <option value="School">School</option>
                         <option value="Event">Event</option>
                     </select>
+                </p>
 
                 <p>
                     <label for="phone">Phone number*</label>
-                    <input type="text" id="phone" name="phone" placeholder="(123) 456-7890" required pattern="(?:([+][0-9]{1,4})[- ]?)?(?:[(]([0-9]{1,3})[)][- ]?)?([0-9]{1,4})[- ]?([0-9]{1,4})[- ]?([0-9]{1,9})" />
+                    <input type="text" id="phone" name="phone" placeholder="(123) 456-7890" required pattern="(?:([+][0-9]{1,4})[- ]?)?(?:[(]([0-9]{1,3})[)][- ]?)?([0-9]{1,4})[- ]?([0-9]{1,4})[- ]?([0-9]{1,9})">
                 </p>
-        
                 <p>
                     <label for="email">Email*</label>
-                    <input type="email" id="email" name="email" required />
+                    <input type="email" id="email" name="email" required>
                 </p>
-        
                 <p>
                     <label for="bdate">Birthdate</label>
-                    <input type="date" id="bdate" name="bdate" />
+                    <input type="date" id="bdate" name="bdate">
                 </p>
-        
                 <p>
                     <label for="referrer">How did you hear about us?</label><br>
                     <select multiple id="referrer" name="referrer">
@@ -75,36 +69,29 @@ <h1>
                         <option value="Other">Other</option>
                     </select>
                 </p>
-        
                 <p>
                     Would you recommend this site to others? <br>
                     <label for="recommendYes" class="radio">Yes</label>
                     <input type="radio" id="recommendYes" name="recommend">
                     <label for="recommendNo" class="radio">No</label>
                     <input type="radio" id="recommendNo" name="recommend">
                 </p>
-        
                 <p>
                     <label for="comments">Questions/Comments</label>
                     <br>
                     <textarea id="comments" name="comments" rows="5" cols="50"></textarea>
                 </p>
-        
-                <p>
+
                     <label for="submit"></label>
-                    <input id="submit" type="submit" name="submit" value="Submit">
-                </p>
-        
-                <p>
+                    <button id="submit" type="submit" name="submit">Submit</button>
                     <label for="reset"></label>
-                    <input id="reset" type="reset" value="Cancel">
-                </p>
+                    <button id="reset" type="reset">Reset</button>
             </fieldset>
         </form>
-
     </main>
     <footer>
-        <p>This page was made as a project for TSA's 2025 "Webmaster" theme.
+        <p>
+            This page was made as a project for TSA's 2025 "Webmaster" theme.
         </p>
     </footer>
 </body>
