WDD 130: Web Fundamentals

W05 Learning Activity: HTML Forms

Overview

HTML Forms allow us to interact with the user and collect data. The form element is the container for all form elements and includes attributes that enable data processing. In this activity, you will only focus on the frontend design and development, learning how to build a form using basic form elements. Processing the form data after a submission is beyond the scope of this course.

Prepare

HTML forms are special sections of a webpage that allow users to enter and submit information. Think of forms as digital versions of paper forms you might fill out at a doctor's office or when applying for something. Forms collect information from users and send it to a web server for processing.

Forms are essential for creating interactive websites. They allow users to search for information, create accounts, make purchases, send messages, and perform many other tasks that require user input. You will study forms in more detail in future courses. In this activity you will become familiar with the most important parts of HTML forms.

Basic Form Structure

Every HTML form starts with a <form> tag and ends with a </form> tag. All form elements must be placed between these tags. The <form> tag tells the browser that everything inside is part of the same form.

The most important parts of a form include:

• Form container – The <form> element that holds all form parts
• Form fields – Where users type or select information
• Labels – Text that describes the purpose of each form field
• Submit button – What users click to send their information

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
  <button type="submit">Submit</button>
</form>

This example shows a simple form with one text input field for a username and a submit button. The label element describes what the input is for, and the for attribute connects the label to the input field. You can test this above by clicking on the label text, which will focus the input field.

Common Form Field Elements

HTML provides several different types of form field elements to collect different kinds of information from users. Each element serves a specific purpose and appears differently on the webpage.

The most commonly used form elements include:

• Text input – For single lines of text like names or email addresses
• Password input – For secret information that should be hidden
• Textarea – For longer text like comments or messages
• Checkbox – For yes/no choices or multiple selections
• Radio buttons – For choosing one option from several choices
• Select dropdown – For choosing from a list of options

<form>
  <label for="email">Email Address</label>
  <input type="email" id="email" name="email">
  
  <label for="password">Password</label>
  <input type="password" id="password" name="password">
  
  <label for="message">Your Message</label>
  <textarea id="message" name="message" rows="4"></textarea>
  
  <label><input type="checkbox" id="newsletter" name="newsletter"> Send me updates</label> 

  <button type="submit">Send Message</button>
</form>

This example demonstrates several different input types working together in one form. Notice how each input has both an id and name attribute – these are important for the form to work properly.

Input Attributes

Input elements use attributes to control how they behave and work with input. Understanding these attributes helps you create forms that work correctly and provide a good experience for users.

Important input attributes include:

• type – Defines the kind of input (text, email, password, etc.)
• name – A unique identifier for each form element
• id – Another identifier used to connect labels to inputs
• required – Makes a field mandatory to fill out
• placeholder – Shows example text inside an input field
• value – Sets a default value for the input field

<form>
  <label for="fullname">Full Name:</label>
  <input type="text" id="fullname" name="fullname" required>
  
  <label for="phone">Phone Number:</label>
  <input type="tel" id="phone" name="phone" placeholder="123-456-7890">
  
  <button type="submit">Submit Contact Information</button>
</form>

In this example, the full name field is required. You can test this by trying to submit the form without filling it out – the browser will prevent submission and prompt you to complete the field. The phone number field includes placeholder text to help users with the expected input format.

Activity Instructions

Getting Started

1. In the week05 folder in your wdd130 course repository, create a new file named "poll-form.html".
2. Create a basic HTML page with a header, main, and footer.

Build the Form

1. Create a form element within the main element.
2. Add the following form fields to the form. Be sure to use a label element for each form element.
   • The user's full name using input of type text, id of "fullname" and name of "fullname" and make it required.
   • The user's email address using input of type email, an id of "useremail", and a name property value of "useremail" and make it required.
     Check Your Understanding

     <form>
       <label for="fullname">Full Name:</label>
       <input type="text" id="fullname" name="fullname" required>
       <label for="useremail">Email:</label>
       <input type="email" id="useremail" name="useremail" required>
     
     </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:

     <label>Full Name: <input type="text" name="fullname" required></label>
     <label>Email: <input type="email" name="useremail" required></label>

   • Create a multiple-choice format type of question using a select element that asking for the user's favorite browser. The following is an example of the select element with three options:

     <label for="quantity">Select Quantity</label>
     <select name="quantity" id="quantity">
       <option value="1">One</option>
       <option value="2">Two</option>
       <option value="3">Three</option>
     </select>

     How this select element appears (with some added styling):

     ---

     Select Quantity One Two Three
     The question should ask "What is your favorite browser?" Provide a name and id attribute and value of "browser" to the select element and give at least three options for the user to choose from. The options could include "Chrome", "Safari", "Edge", "Brave", or "Other", etc.
   • Include a question, "Do you have a household pet?"
     Use a single checkbox element. The id and name attribute value is "pet".
   • Include a final question, "List the places you have lived."
     Use a textarea element and provide placeholder attribute values. In addition, provide a name and id attribute value of "feedback" and set the number of rows.
   Check Your Understanding

   <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="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>

3. 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>

Testing and Submission

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