Form fields
How to use all the built-in form fields you can think of!

In the Forms 101 unit we worked with a simple text input form field.

In this unit I want to introduce you to a variety of other fiends you can use.

We’ll expand the textual field types, then we’ll add other kinds of fields: checkboxes, radio buttons, textarea, select, and more.

Each field accepts those attributes:

  • id and class as any HTML element to assign an unique identifier and HTML classes
  • name to give a label to the data
  • value to set the initial value
  • required to set the field as required
  • disabled to set the field as disabled (grayed out and not editable)
  • readonly to set the field as read only (not editable)
  • placeholder sets a placeholder for the field, similar to value as it’s displayed in the field, but not sent to the server
  • autofocus put on a single form field in the page, the browser will put its focus on that field on page load

Lessons in this unit:

0: ▶︎ Introduction
1: Form submit field
2: Specialized input fields
3: Checkboxes
4: Radio buttons
5: File input fields
6: Textarea
7: Select
8: Autocompleting form fields