HTML Forms Course (How To)

Overview

The web is a two-way communication medium. There are lots of HTML elements for displaying data and producing output, and conversely, there are also lots of HTML elements for accepting input. Accepting input from the user means creating web forms. In this course, we’ll learn about all the most important form elements that web professionals use on a daily basis.

What you'll learn

Forms
Input elements
Select menus
Radio buttons
Checkboxes

Syllabus

Form Basics

To learn about forms, we’re going to create a simple sign up form for an imaginary web app. Our form won’t actually submit anywhere, since that requires additional server-side code. However, we will learn about all the most important HTML form elements.

Chevron 9 steps

Overview of Forms

1:37
The Form Element

3:11
Create a Form Element

3 objectives
The Input Element

5:30
Create a Text Input

4 objectives
The Textarea Element

2:08
Create a Textarea

5 objectives
The Button Element

2:06
Create a Submit Button

5 objectives
Extra Credit

Did you know that the input element has over 30 attributes? The type attribute alone has over 20 values. Try reading the documentation for the <input> element and test some of the other input types.

Organizing Forms

A form can be created with just a form element and some controls, but it's helpful to the user if the form is organized with labels and fieldset elements.

Chevron 4 steps

The Label Element

4:05
Add Labels

4 objectives
Fieldsets and Legends

3:39
Add Fieldsets and Legends

4 objectives
Extra Credit

Styling form elements can be slightly more difficult than other types of HTML elements. Try removing some of the default CSS in this project and practice adding your own style to the <label> element, the <fieldset> element, and the <legend> element.

Choosing Options

Sometimes when creating a form, it's better for the user to choose from predefined options rather than typing in text. This can be accomplished with select menus, radio buttons, and checkboxes.

Chevron 8 steps

Select Menus

6:40
Create a Select Menu

4 objectives
Radio Buttons

5:38
Create Radio Buttons

5 objectives
Checkboxes

4:15
Create Checkboxes

3 objectives
Going Further

1:20
HTML Forms Review

10 questions
Extra Credit
- Check the notes and read the documentation for HTML forms. We’ve covered the essentials, but this is a very in-depth topic.
- Try adding your own CSS to make this form look the way you want it to look. It's good to practice, because styling form elements can be a little bit more challenging than other HTML elements.
- Try to make this form submit somewhere by learning a server-side language such as Ruby, PHP, or Python.