Foundations of Web Design

Class Exercise 3:

Creating an HTML Form with additional elements and a table

Goal:

Create an HTML form with various input types, including
textarea, select, and fieldset, with a table.

Instructions:

Download starter_code03.zip:

Create a New HTML File:

Basic HTML Structure:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML Form and Table</title>
  </head>
  <body>
    <h1>Sign Up Form</h1>
    <form action="/submit" method="post">
      <fieldset>
        <legend>Personal Information</legend>
        <label for="fname">First Name:</label><br />
        <input type="text" id="fname" name="fname" /><br /><br />
        <label for="lname">Last Name:</label><br />
        <input type="text" id="lname" name="lname" /><br /><br />
        <label for="email">Email:</label><br />
        <input type="email" id="email" name="email" /><br /><br />
        <label for="dob">Date of Birth:</label><br />
        <input type="date" id="dob" name="dob" /><br /><br />
      </fieldset>
      <fieldset>
        <legend>Other Information</legend>
        <label for="gender">Gender:</label><br />
        <select id="gender" name="gender">
          <option value="male">Male</option>
          <option value="female">Female</option>
          <option value="other">Other</option>
        </select>
        <br /><br />
        <label for="comments">Comments:</label><br />
        <textarea id="comments" name="comments"></textarea><br /><br />
      </fieldset>
      <input type="submit" value="Submit" />
    </form>

    <h2>Sample Table</h2>
    <table border="1">
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
      <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
        <td>Row 1, Cell 3</td>
      </tr>
      <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
        <td>Row 2, Cell 3</td>
      </tr>
    </table>
  </body>
</html>

Viewing Your Web Page:

  1. Run Your Project with Live Server:
    • Right-click on your “CE03.html” file and select “Open with Live Server”.
    • This will open your web page in your default browser.
    • You should now see your HTML form and table.
  2. Run Your Project with Live Preview:
    • Right-click on your “CE03.html” file and select “Show Preview”.
    • This will open your web page in a tab in VS Code next to your HTML file.