HTML5

Chapter 5 — HTML Forms & User Input

📚 Chapter Overview

Forms are the primary way users interact with websites. In this chapter, you will learn how to build complete forms using Text inputs, Checkboxes, Radio buttons, and Dropdowns.

Learning Objectives:

5.1 Basic Form Elements

Part 1 — Definition

An HTML form is used to collect user input. The <form> element is a container for different types of input elements. Labels are essential for accessibility, telling the user (and screen readers) what each field is for.

Part 2 — Syntax

<form>
    <label for="user">Username:</label>
    <input type="text" id="user" name="user">
    <input type="submit" value="Send">
</form>

Part 3 — Example

Problem: Create a simple "Contact Us" form.

index.html 
<form>
    <label>Name:</label><br>
    <input type="text" placeholder="Enter Name"><br>
    <label>Email:</label><br>
    <input type="email"><br>
    <button type="submit">Submit</button>
</form>

Observation: The placeholder attribute provides a hint inside the input field.

Part 4 — Video

Video: Coming Soon

5.2 Selection Controls

Part 1 — Definition

Checkboxes allow selecting multiple options. Radio buttons allow selecting only one from a group. The <select> tag creates a dropdown list.

Part 2 — Syntax

<input type="checkbox">
<input type="radio" name="group">
<select>
    <option>Choice</option>
</select>

Part 3 — Example

Problem: Ask for gender and interests.

index.html 
<p>Gender:</p>
<input type="radio" name="g"> Male
<input type="radio" name="g"> Female

<p>Interests:</p>
<input type="checkbox"> Coding
<input type="checkbox"> Music

Observation: Radio buttons must have the same name attribute to act as a group.

Part 4 — Video

Video: Coming Soon

🏆 Chapter Challenge

Challenge Objective

Build a "Job Application Form".

Requirements

Step-by-Step Process

  1. Structure the form using fieldset and legend for organization.
  2. Add labels to every input.
  3. Use <textarea> for "Cover Letter".
  4. Add a Submit button.

Expected Deliverables

Solve in Editor