WDD 130 | HTML Forms

HTML: The Form Element

Overview

Forms allow us to interact with the user and collect data. The form element is the container for all form elements. The form element has attributes that allow for processing. In this activity, we focus only on the frontend, learning how to build a form using some basic form elements, elements that you already recognize as a user of forms. Processing form data is beyond the scope of this course.

"Web forms are one of the main points of interaction between a user and a website or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way." - MDN

Prepare

Read the following sections from the article 📄 'Best Practices for Form Design'
1. The components of forms,
2. Form structure, and
3. Input fields.
Read and Try It Yourself: 📄 HTML Forms - w3schools.com
Read: 📄 "Help users enter data in forms" by Google Chrome Developer web.dev.
This article provides a good overview of the form element and its attributes that you will use in this activity.

Activity Instructions

Getting Started

In a "week05" folder in your wdd130 course repository, create a new file named "poll-form.html".

Create a basic HTML page with a header, main, and footer.

Check Your Understanding

<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WDD 130 | HTML Form - User Poll</title>
</head>
<body>
<header>
  <h1>WDD 130 | Your Name | HTML Form - User Poll</h1>
</header>
<main>

</main>
<footer>
  <p>©2024 | HTML Form - User Poll Activity | Your Name</p>
</footer>
</body>
</html>

Build the Form

Create a form element within the main element.

Within the form, include two (2) fieldset elements with legend child elements as shown in this example:

<main>
  <form>
    <fieldset>
      <legend>Contact Information</legend>
      <!-- form elements will go here -->
    </fieldset>
    <fieldset>
      <legend>Questions</legend>
      <!-- form elements will go here -->
    </fieldset>
  </form>
</main>

Add the following input content to the first, "Contact Information" fieldset.
Be sure to use the label element for each form element.
- User's full name using input of type text, id of "fullname" and name of "fullname"
- User's email address using input of type email, an id of "useremail", and a name property value of "useremail"
Check Your Understanding
```
<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="fullname">Full Name:</label>
    <input type="text" id="fullname" name="fullname">
    <label for="useremail">Email:</label>
    <input type="email" id="useremail" name="useremail">
  </fieldset>

</form>
```
Another valid way to write this is to surround the input elements with the label element. This is called the "implicit label" method. The following is an example of this method:
```
<fieldset>
  <legend>Contact Information</legend>
  <label>Full Name: <input type="text" name="fullname"></label>
  <label>Email: <input type="email" name="useremail"></label>
</fieldset>
```

Add the following input content to the second, "Questions" fieldset.
Be sure to use a label element for each form element.

"What is your favorite browser?" Use a select element with three or more options and be sure to include values. Provide a name and id attribute and value. this select input field "browser".
"Do you have a household pet?" Use a single checkbox element. The id and name attribute value is "pet".
"List the places you have lived:" Use a textarea element and provide placeholder attribute values.

Check Your Understanding

<fieldset>
  <legend>Questions</legend>
  <label for="browser">What is your favorite internet browser?</label>
  <select id="browser" name="browser">
    <option value="chrome">Chrome</option>
    <option value="firefox">Firefox</option>
    <option value="safari">Safari</option>
    <option value="edge">Edge</option>
    <option value="brave">Brave</option>
    <option value="other">Other</option>
  </select>
  <label for="pet">Do you have a household pet?</label>
  <input type="checkbox" id="pet" name="pet">
  <label for="feedback">List the places you have lived:</label>
  <textarea id="feedback" name="feedback" rows="4" placeholder="Stillwater Florida, Amsterdam Netherlands, Tibuktu Mali"></textarea>
</fieldset>

Add a button with a type of submit at the end of the form element. The text content of the button is "Submit Poll".
Check Your Understanding
```
<button type="submit">Submit Poll</button>
```
Where should this button element be placed in the HTML document?

Hint:

Make sure it is within the form element.

Screenshot of Example Basic Form — Figure 1: Example poll form page. Note that this is not styled, just HTML structure.

Testing and Submission

Test and validate your HTML in the browser.
Save your work. CSS styling will be added in the next activity.

Note that this form does not include processing the user input. We are only working with the frontend of the form design and structure. This scope of this course does not include the processing of the data.