Macro photograph of water droplets clinging to the surface of a tulip
Part of the HTML Reading List

In many respects, forms are the most complex aspect of front-end web development. This section approaches form HTML simply: the forms you create here won't process submitted information (that’s usually the role of a backend process in or another server-side language). Working through this material will allow you to understand the fundamentals of form creation, and prepare you for styling and processing the form in the future.

Goal: Create an accessible form that follows ethical best practices.

Prerequisite: Basic HTML

Total time (Core Material): 3 hours

Core Material

Introduction

  1. Introduction
  2. Form Design Principles
  3. The Form Element
  4. The name attribute
  5. Accessibility
  6. Form Hints & Tips
  7. Ethical Considerations

Form Inputs & Elements

  1. Generic Text Inputs
  2. Select drop-downs
  3. Radio buttons
  4. Checkboxes
  5. <button>
  6. Textareas
  7. The file input
  8. Other input types
  9. submit & reset
  10. required, placeholder & autofocus
  11. search, url & eMail
  12. color input
  13. tel
  14. number input
  15. range slider
  16. output
  17. progress
  18. meter
  19. date
  20. Autosuggest With DataList

Optional: Read how Canada’s CASL laws will affect web forms. Read how to how add tick marks to the range slider automatically with JavaScript. Learn how to design forms for 21st century culture.

HTML5 allows for the native, client-side validation of form elements. If you want to learn more about this, read:

  1. Regular Expressions
  2. Custom errors with CSS
  3. Custom errors with JS
  4. title attribute custom errors

Supplementary Material

Watch the Forms material at Treehouse and take the Quiz at the end (total time: 40 minutes). Optionally, take the HTML Mastery Challenge at the end of the section. Note that Nick uses <br> tags and align to push form elements around: don’t do this.

Recommended Reading

Read Chapter 7, Learning Web Design by Jennifer Niederst Robbins.

When You’re Finished

You now have enough knowledge to complete a basic web form as an exercise.

Forms are perhaps not the most exciting aspects of web development, but they are a necessary one: every piece of feedback you leave on the web is written inside a form.

The next section, multimedia, has been changed radically by HTML5.

Photograph by Hege, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.