Form Basics

Forms collect user input and send it to a server. Understanding form structure is essential for interactive web applications.

Basic Form Structure

Form elements:

• <form> - Container for form controls
• action - URL to send data to
• method - HTTP method (get or post)

The Label Element

Labels are essential:

• Screen readers announce them
• Clicking label focuses the input
• Use for + id or wrap the input

Basic Input Types

Placeholder and Value

• placeholder - Hint text (disappears on focus)
• value - Pre-filled value

Required Fields

The required attribute:

• Prevents form submission if empty
• Shows browser validation message

Form Grouping with Fieldset

• <fieldset> - Groups related fields
• <legend> - Title for the group

Exercise: Create a Contact Form

Create a simple contact form:

Forms are the primary way to collect user input on the web!