This course breaks down HTML forms into easy to understand pieces.
Over the next few modules, you'll learn how an HTML form works and how to use them effectively in your projects.
Use the menu pane by the **Learn Forms** logo to navigate the modules.

You'll learn how to build a basic HTML form, about HTML form elements,
styling forms, help users re-entering data,
ensuring the form is accessible, and secure, how to test your forms, and about specific form types.

Each module is full of interactive demos and self-assessments for you to test your knowledge.

This course is suitable for beginners and advanced HTML developers.
The first few modules help you get started with building HTML forms,
the other modules give more detail.
You can go through the series from start to finish to get a general understanding of HTML forms,
or pick a specific module you want to learn more about.

## Prerequisites

Before starting this course, you should know about HTML.
For those new to web development,
check out the [intro to HTML](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML)
course from MDN to learn all about how to write markup.

## Demos

For most demos, we use [CodePen](https://codepen.io/).

Looking at the demos, you might wonder where the styles come from.
We use a general stylesheet included in all demos, so only the relevant styles are shown there.
In CodePen, you can select included CSS files from Settings.

## Form controls and form fields

A **form control** is an element that enables user interaction and data entry or selection:
an `<input>`, `<select>`, `<textarea>` or `<button>`.

Sometimes **form field** is used to refer to form controls,
in particular elements for text entry: `<input>` and `<textarea>`.

## Here's what you'll learn

### [Use forms to get data from users](https://web.dev/learn/forms/form-element)

Learn the basics of using a form on the web with this introduction to the form element.

### [Help users enter data in forms](https://web.dev/learn/forms/form-fields)

An overview of the various form elements you can choose from to build your form.

### [Help users avoid re-entering data in forms](https://web.dev/learn/forms/auto)

Make it more convenient for users to fill out forms.

### [Help users enter the right data in forms](https://web.dev/learn/forms/validation)

Learn how to validate your forms on the frontend.

### [Test your forms](https://web.dev/learn/forms/testing)

Learn how to test and analyze your forms.

### [Design basics](https://web.dev/learn/forms/design-basics)

Learn how to build user-friendly forms.

### [Accessibility](https://web.dev/learn/forms/accessibility)

How to build inclusive forms.

### [Internationalization and localization](https://web.dev/learn/forms/internationalization)

Be prepared for international data formats, and learn how to plan your form for localization.

### [Security and privacy](https://web.dev/learn/forms/security-privacy)

Learn how to make your forms secure and keep your users' data private.

### [Autofill](https://web.dev/learn/forms/autofill)

Learn all about autofill and the autocomplete attribute.

### [How to test forms for usability](https://web.dev/learn/forms/usability-testing)

Discover how to do usability testing and ensure your form works well for all your users.

### [Test forms across devices and platforms](https://web.dev/learn/forms/cross-platform-testing)

Ensure your form works with different devices, browsers, platforms, and different contexts.

### [Gathering data](https://web.dev/learn/forms/data)

Learn how to measure and analyze your form.

### [The form element in depth](https://web.dev/learn/forms/form)

Learn all about the form element, when you should use a form, and how a form works in detail.

### [Form fields in depth](https://web.dev/learn/forms/fields)

Learn about the different form fields you can use, and how to choose the right form element.

### [Form attributes in depth](https://web.dev/learn/forms/attributes)

Learn all about form attributes: how to modify the layout of on-screen keyboards, activate built-in validation, and more.

### [Styling forms](https://web.dev/learn/forms/styling)

Style forms using CSS, while ensuring they remain usable and readable for everyone.

### [Styling form controls](https://web.dev/learn/forms/styling-form-controls)

Learn how to implement form controls with CSS.

### [JavaScript](https://web.dev/learn/forms/javascript)

Find out how to use JavaScript to enhance your forms.

### [](https://web.dev/learn/forms/identity)

<br />

### [Payment forms](https://web.dev/learn/forms/payment)

Improve conversion rates by building better payment forms.

### [Address forms](https://web.dev/learn/forms/address)

Help users fill out address forms quickly and easily.

### [Conclusion and next steps](https://web.dev/learn/forms/conclusion)

Further resources to help you take your next steps.

So, are you ready to learn about forms? [Let's get started](https://web.dev/learn/forms/form-element).

> [!NOTE]
> **Note:**   
> This course is written and edited by forms community experts: [Michael Scharnagl](https://twitter.com/justmarkup), [Sam Dutton](https://twitter.com/sw12), and [Rachel Andrew](https://twitter.com/rachelandrew). [Rob Dodson](https://twitter.com/rob_dodson) and [Jiwoong Lee](https://twitter.com/jiwoong) shepherded the UX and production build, along with help from [Ewa Gasperowicz](https://twitter.com/devnook) and [Sam Thorogood](https://twitter.com/samthor).