Course Outline (Part 6)

Welcome to Part 6 of the HTML5 & Semantic Web Development Course. In this part, we will cover Web Forms.

Forms are how websites accept input and data from users. Whether you are typing a search query, logging into an account, registering for a course, or submitting a payment, you are using a form. We will cover form containers, text input variants, selection inputs, validations, textareas, and advanced inputs.

Chapter 28: Introduction to Forms

An HTML form is defined using the <form> container tag. This element wraps all inputs and buttons.

28.1 Core Form Attributes

A form needs two primary attributes to determine where and how to send data:

  1. action: The destination URL (typically a server-side script like /api/login) where the form data will be sent.
  2. method: The HTTP protocol method to use when sending the data:
    • GET: Appends the form data directly to the URL as query parameters (e.g., search.php?q=html). Use GET for searches or queries where data is not sensitive.
    • POST: Sends the data securely inside the HTTP request body. Use POST for sensitive details (like passwords) or when updating databases.
<form action="/search" method="GET">
    <!-- Form elements go here -->
</form>

Chapter 29: Labels & Text Inputs

29.1 The Input Tag (<input>)

The <input> tag is a self-closing element used to create interactive fields. Its behavior changes drastically depending on the type attribute.

29.2 The Label Tag (<label>)

Every input should have an associated <label> tag. Labels are critical for:

  • Accessibility: Screen readers read the label aloud when the input field is focused.
  • User Experience: Clicking the label text automatically focuses the cursor on the linked input.

29.3 Linking Labels and Inputs

Use the for attribute on the <label> and match it with the id attribute on the <input>:

<label for="username-field">Username:</label>
<input type="text" id="username-field" name="username" placeholder="e.g. johndoe">
  • name: The key associated with the input’s value when the form data is sent to the server.
  • placeholder: Faded temporary text shown in the input box until the user starts typing.

Chapter 30: Basic Input Types

HTML provides native data validation by changing the input type attribute:

  • type="password": Masks the typed characters for security.
  • type="email": Requires the value to match an email format (e.g., must contain @ and a domain).
  • type="number": Restricts input to numbers, adding up/down arrows.
  • type="tel": Used for telephone numbers.
  • type="url": Validates that the input is a valid website address.
<label for="email">Email Address:</label>
<input type="email" id="email" name="user_email" required>

<label for="password">Password:</label>
<input type="password" id="password" name="user_password" required>

Chapter 31: Choices and Selectors

31.1 Checkboxes

Allow the user to select one or multiple options:

<p>Which topics are you interested in?</p>
<label>
    <input type="checkbox" name="interest" value="html"> HTML
</label>
<label>
    <input type="checkbox" name="interest" value="css"> CSS
</label>

31.2 Radio Buttons

Allow the user to select exactly one option from a list. To link them together, all options must share the same name attribute value:

<p>Choose your experience level:</p>
<label>
    <input type="radio" name="level" value="beginner" checked> Beginner
</label>
<label>
    <input type="radio" name="level" value="intermediate"> Intermediate
</label>

31.3 Dropdown Menus (<select>)

Creates a dropdown selection menu. Use <select> as the wrapper and <option> for each item:

<label for="country">Country:</label>
<select id="country" name="user_country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
</select>

Chapter 32: Textareas and Buttons

32.1 Textarea Element (<textarea>)

Used for multi-line text input (like message fields or comments). It requires a closing tag.

<label for="comments">Message:</label>
<textarea id="comments" name="message" rows="5" cols="40"></textarea>

32.2 Form Buttons (<button>)

Buttons are used to submit or clear a form. You can declare their behavior using the type attribute:

  • type="submit" (default): Sends form data to the action URL.
  • type="reset": Clears all inputs in the form.
  • type="button": A generic button, usually wired to trigger JavaScript code.
<button type="submit">Submit Form</button>
<button type="reset">Reset Fields</button>

Chapter 33: HTML5 Form Validation

HTML5 offers built-in validation attributes that run automatically in the browser before the form is submitted:

  • required: The field cannot be left blank.
  • minlength / maxlength: Restricts characters count.
  • min / max: Set numeric limits on type="number" or type="date".
  • pattern: Requires the input to match a regular expression (regex) pattern.
<label for="zipcode">ZIP Code (5 digits):</label>
<input type="text" id="zipcode" name="zip" required pattern="[0-9]{5}">

Chapter 34: Grouping Elements & Modern Controls

34.1 Fieldset and Legend

Use <fieldset> to group related inputs together, and <legend> to label the group:

<fieldset>
    <legend>Account Security</legend>
    <label for="pin">Create PIN:</label>
    <input type="number" id="pin" name="user_pin" min="1000" max="9999">
</fieldset>

34.2 Modern Inputs

  • type="color": Opens a system color picker.
  • type="date": Opens a native date selector calendar.
  • type="range": Creates a slider bar.
  • type="file": Allows uploading files.
<label for="bday">Birthday:</label>
<input type="date" id="bday" name="birthday">

<label for="volume">Volume Level:</label>
<input type="range" id="volume" name="volume" min="0" max="100">

Discussion

Loading comments...