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.
Looking to become a front-end web developer?
We have put together a course that includes all the essential information you need to work towards your goal.
Before starting this module, you should at least work through our Introduction to HTML. At this point you should find the Introductory guides easy to understand, and also be able to make use of our Basic native form controls guide.
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 Glitch.
- 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 the original HTML
<input>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
<input>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
- Other form controls
- Next we take a look at all the non-
<input>form controls and associated tools, such as
Form styling guides
- Styling web 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 form styling
- 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 form elements.
- UI pseudo-classes
- An introduction to the UI pseudo-classes enabling HTML form controls to be targeted based on their current state.
Validating and submitting form data
- Client-side form validation
- Sending data is not enough — we also need to make sure that the data users enter into forms is in the correct format 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 not 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.
The following articles aren't essential to the learning pathway, but they'll prove interesting and useful when you've mastered the above techniques and want to know more.
- How to build custom form controls
- 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.
- CSS property compatibility table for form controls
- This last article provides a handy reference allowing you to look up what CSS properties are compatible with what form elements.