HTML forms

This module provides a series of articles that will help you master HTML forms. HTML forms are a very powerful tool for interacting with users; however, for historical and technical reasons, it's not always obvious how to use them to their full potential. In this guide, we'll cover all aspects of HTML forms, from structure to styling, from data handling to custom widgets.

Prerequisites

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the Basic guides easy to understand, and also be able to make use of our Native form widgets guide.

The rest of the module however is a bit more advanced — it is easy to put form widgets on a page, but you can't actually do much with them without using some advanced form features, CSS, and JavaScript. Therefore, before you look at the other sections we'd recommend that you go away and learn some CSS and JavaScript first.

Note: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as JSBin or Thimble.

Basic guides

Your first HTML form
The first article in our series provides your very first experience of creating an HTML form, including designing a simple form, implementing it using the right HTML elements, adding some very simple styling via CSS, and how data is sent to a server.
How to structure an HTML form
With the basics out of the way, we now look in more detail at the elements used to provide structure and meaning to the different parts of a form.

What form widgets are available?

The learning path has three articles covering all the form controls you need to know. If you don't find what you need, there's an advanced article on creating your own widgets:

The native form widgets
We start off by looking at the functionality of the the original input widgets in detail, looking at what options are available to collect different types of data.
HTML5 input types
We continue our deep dive into the <input> element, looking on the newer input types, and the various UI widgets and data collection enhancements they provide, as well as the <output> element.
Additional form controls
We take a look at all the non-input form controls and associated widgets, such as <select>, <textarea>, <meter> and <progress>.
How to build custom form widgets (advanced)
You'll come across some cases where the native form widgets just don't provide what you need, e.g. because of styling or functionality. In such cases, you may need to build your own form widget out of raw HTML. This article explains how you'd do this and the considerations you need to be aware of when doing so, with a practical case study.

Form styling guides

Form controls are notoriously difficult to style. The learning path has one article on styling HTML forms, and a few additional form style guides if you want to take a dive deeper:

Styling HTML forms
This article provides an introduction to styling forms with CSS, including all the basics you might need to know for basic styling tasks.
Advanced styling for HTML forms (advanced)
Here we look at some more advanced form styling techniques that need to be used when trying to deal with some of the more difficult-to-style elements.
Property compatibility table for form widgets (advanced)
This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.

Validating and submitting form data

It's not enough to build and style a form; you need to ensure the data entered is valid and then send it off for processing. We take a look at validation and native form submission. If standard form submission is not the right solution, there is a more advanced article on using JavaScript to submit parts of a form without reloading the page.

Form data validation
Sending data is not enough — we also need to make sure that the data users fill out in forms is in the correct format we need to process it successfully, and that it won't break our applications. We also want to help our users to fill out our forms correctly and don't get frustrated when trying to use our apps. Form validation helps us achieve these goals — this article tells you what you need to know.
Sending form data
This article looks at what happens when a user submits a form — where does the data go, and how do we handle it when it gets there? We also look at some of the security concerns associated with sending form data.
Sending forms through JavaScript (advanced)
This article looks at ways to use a form to assemble an HTTP request and send it via custom JavaScript, rather than standard form submission. It also looks at why you'd want to do this, and the implications of doing so. (See also Using FormData objects.)

See also