- HTML
- Beginner
About this Course
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
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.
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.
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.
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.
Teacher
-
Nick Pettit
Nick is a teacher and an independent game developer.