📝

HTML Forms

Master HTML forms from the ground up. Build text inputs, dropdowns, checkboxes, radio buttons, and learn validation, styling, accessibility, and HTTP methods.

Prerequisites:📦Tag Builder

Why Forms Exist

Discover why HTML forms are the backbone of every interactive website and how they let users communicate with the web.

The Form Element

Learn how the <form> tag works as a container, and understand the action and method attributes that control where and how data is sent.

Text Inputs and Labels

Master the <input> element, the <label> element, and learn why wiring them together is essential for usability and accessibility.

Input Types

Discover the many faces of the <input> element — from email and telephone to date pickers, color choosers, and file uploads.

Checkboxes and Radio Buttons

Learn when to use checkboxes (pick many) vs radio buttons (pick one), how grouping works, and why labels are even more critical for these small targets.

Select Dropdowns and Datalists

Learn how to create dropdown menus with <select>, organize options with <optgroup>, and build autocomplete fields with <datalist>.

Textarea and Other Form Elements

Learn about <textarea> for multi-line text, button types, fieldset/legend for grouping, and lesser-known elements like <output>, <meter>, and <progress>.

HTML5 Form Validation

Learn how to validate form data using built-in HTML attributes — required, minlength, pattern, and more — plus CSS pseudo-classes for styling valid/invalid fields.

Styling Forms with CSS

Learn how to override default browser form styles, create polished inputs, style buttons with hover/active/disabled states, and use accent-color for checkboxes.

HTTP Methods Explained

Understand what really happens when a form is submitted — HTTP requests, GET query strings, POST request bodies, and form encoding types.

Form Accessibility

Make your forms usable by everyone — proper grouping with fieldset/legend, ARIA attributes for help text, error handling, and keyboard navigation.

Capstone: Multi-Section Registration Form

Put everything together! Build a complete, multi-section, validated, accessible, and styled registration form using all the skills you've learned.

Codelab: Build a Contact Form

Follow along step-by-step to build a complete, styled, accessible contact form from scratch in your code editor and browser.

Codelab: Build a Survey Form

Build a complete survey form from scratch with multiple question types, datalist autocomplete, grouped fieldsets, validation, and responsive CSS styling.