HTML Forms Course (How To)

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.

• 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.

• 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.

• 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.