HTML Forms

The web is a two-way communication medium. There’s lots of HTML elements for displaying data and producing output, and conversely, there’s 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.

• Overview of Forms1:37
• The Form Element3:11
• Create a Form Element3 objectives
• The Input Element5:30
• Create a Text Input4 objectives
• The Textarea Element2:08
• Create a Textarea5 objectives
• The Button Element2:06
• Create a Submit Button5 objectives

• Extra Credit

  Did you know that the input element has over 30 attributes? The type attribute alone has over 20 values. Try readingthe documentation for the elementand 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 Element4:05
• Add Labels4 objectives
• Fieldsets and Legends3:39
• Add Fieldsets and Legends4 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 element, the

  element, and the

  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 Menus6:40
• Create a Select Menu4 objectives
• Radio Buttons5:38
• Create Radio Buttons5 objectives
• Checkboxes4:15
• Create Checkboxes3 objectives
• Going Further1:20
• HTML Forms Review10 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.