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
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.
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
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.
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.
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).
A form widget with 3 possible types:
submit: triggers the action and method to make an HTTP request.
reset: resets the contents of the form
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
multiplethat allows users to select multiple options.
- Options are specified in child
optiontakes an optional, boolean attr of
selectedto set a default value.
- Can nest
- Can nest
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
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.
- Certain form input types will be validated in certain browsers. For example, if an input type is
- You can pass a
patternprop to an input to specify a regex validator for the input
- More customization can be achieved using JS
Clicking a submit widget (either a default
type='submit') triggers a
And don’t forget, this is mostly unnecessary when building a form with Vue