Web forms

This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons, it's not always obvious how to use them to their full potential. In the articles listed below, we'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.

Prerequisites

Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the Introductory tutorials easy to understand, and also be able to make use of our Basic native form controls tutorial.

Mastering forms however requires more than just HTML knowledge — you also need to learn some specific techniques to style form controls, and some scripting knowledge is required to handle things like validation and creating custom form controls. Therefore, before you look at the other sections listed below we'd recommend that you go away and learn some CSS and JavaScript first.

The above text is a good indicator as to why we've put web forms into its own standalone module, rather than trying to mix bits of it into the HTML, CSS, and JavaScript topic areas — form elements are more complex than most other HTML elements, and they also require a close marriage of related CSS and JavaScript techniques to get the most out of them.

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 JS Bin or Glitch.

Introductory tutorials

Your first form

The first article in our series provides your very first experience of creating a web 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 a web 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.

The different form controls

Basic native form controls

We start off this section by looking at the functionality of the original HTML types in detail, looking at what options are available to collect different types of data.

The HTML5 input types

Here we continue our deep dive into the element, looking at the additional input types provided when HTML5 was released, and the various UI controls and data collection enhancements they provide. Additionally, we look at the element.

Other form controls

Next we take a look at all the non- form controls and associated tools, such as