HTML Forms.

Forms are the primary way to collect user data on the web. They are used for login, registration, search, and data entry.

The Essentials

The <form> element defines a container for different types of input elements.

The 'action' attribute defines where the data is sent.

The 'method' attribute defines the HTTP method (GET or POST).

Inputs like <input type='text'> collect the actual data.

Labels (<label>) are essential for accessibility and user experience.

The 'name' attribute on inputs is what the server uses to identify the data.

Professional Insights

GET vs POST Methods

Use GET for non-sensitive data like search queries (data appears in URL). Use POST for sensitive data like passwords or when sending large amounts of data (data is hidden in the request body).

Accessibility: The 'for' Attribute

Always link a <label> to an <input> using the 'for' attribute (matching the input's 'id'). This allows screen readers to announce the label when the input is focused and makes the label clickable.

The 'required' Attribute

HTML5 provides built-in validation. Simply adding 'required' to an input prevents the form from being submitted if the field is empty, without needing JavaScript.

Input Types and Keyboard Behavior

Using specific types like type='email' or type='tel' on mobile devices will trigger a specialized keyboard (e.g., showing the @ symbol or a number pad), greatly improving UX.

Critical Pitfalls

Forgetting to include a 'name' attribute on inputs—without it, the server receives nothing.

Not using <label> elements, making it difficult for screen reader users to understand the form.

Using <div> tags to 'submit' a form instead of a real <button type='submit'> or <input type='submit'>.

Forgetting to use type='password' for sensitive fields, which leaves the text visible as the user types.

Interactive Lab

Sprint Tasks

Add a label with the text 'Username:' and link it to the input below

Make the username input mandatory using the 'required' attribute

Add a submit button with the text 'Join Now'

Loading editor...

Production Preview