It’s been awhile since I’ve made a form. I’m a little embarrassed to take notes on the process, but why not? There’s a lot to forms, from structure to validation to accessibility. Plus like most other things HTML, you can do them a bunch of different ways, and none of them are right.

Notes based on MDN forms articles

The form element

Forms are wrapped in a form element. It’s considered… good form (sorry) to include action and method attributes in a form. action points to the endpoint the form should interact with, and method is the, you guessed it, HTTP method to use when submitting the form.

Form Widgets

Forms contain inputs of varying types. Some are identified with a <input type="radio" /> where type specifies the kind of input, but some get special HTML elements, like textarea. The name attr on a widget determines the name associated with the value when the form is submitted to a server.

input elements have a large number of types to choose from.

Labels

You can associate a label element to a widget by pointing the label’s for attr to the id of the input. There are a few benefits to doing this:

  • Clicking label activates widget
  • Screen reader includes label when describing the form widget.

Default values

Many widgets take a value attr that determines the value of the widget on page load. Elements like textarea (Is it the only one?) require passing the default value as the body of the element (So in between the openeing and closing ele tags).

Buttons

A form widget with 3 possible types:

  1. submit: triggers the action and method to make an HTTP request.
  2. reset: resets the contents of the form
  3. button: does nothing. Useful for custom buttons.

<fieldset> and <legend>

Useful to group related widgets together. For example, a set of radio buttons. The legend describes the purpose of the fieldset.

  • A drop down box.
  • Takes an optional boolean attr multiple that allows users to select multiple options.
  • Options are specified in child option elements.
  • An option takes an optional, boolean attr of selected to set a default value.
    • Can nest options under optgroup elements

autocomplete dropdowns

Wraps options and links to a text input. When user types into the text input, a list of matching options pops up. Not yet supported in Safari

Certain input types will enable browser specific widgets

An input of type datetime-local, for instance, will be displayed as a date time picker in Chrome. Safari, however, has no custom implementation or validation.

Validation

  • Certain form input types will be validated in certain browsers. For example, if an input type is email, then Chrome and Safari will complain if you attempt to submit a value that doesn’t match the email pattern.
  • You can pass a pattern prop to an input to specify a regex validator for the input
  • More customization can be achieved using JS

Submitting

Clicking a submit widget (either a default button or input of type='submit') triggers a submit event.

And don’t forget, this is mostly unnecessary when building a form with Vue

https://vuejs.org/v2/guide/forms.html