Form elements

Basic elements used when creating forms

Demo

API

Name	Type	Content
`form`	Native element	Any
`fieldset`	Native element	Any
`label`	Native element	Text
`small`	Native element	Text for "side-comments" associated with an input. Read more

Attributes

Nothing special to call out. See MDN: form attributes for the full list.

Events

Name	Detail	Description
`submit`	None	Fires when the form is submitted, which happens when the user clicks the submit button or hits enter.
`input`	None	Fires when the value of a text-like input or text area changes.
`change`	None	Fires when a value is committed, like selecting from a list, picking a file or date, checking a box, or blurring away from a text input.

Guidelines

Submit button vs. input button

M- recommends forms use <button type="submit"> instead of <input type="submit">. This is more semantic and provides greater control of the button style and content. For example, you can't put an Icon or Loader inside a submit input.

Why <fieldset>?

Rather than inventing new tags or using boilerplate divs and classes, M- leverages the native fieldset tag. Although it's historically uncommon to put just one input inside a fieldset, it is perfectly valid markup. Single or multiple input combinations of various types work perfectly well and results in the most clean and uniform form code:

Why <small>?

Understand that small's semantics have to do with its type of content and not font size or other visual characteristic. The HTML spec uses examples such as "disclaimers, caveats, legal restrictions, or copyrights", which is inline with this use case. Some examples:

Comment 183/200 characters left

Password Must include a number, special character, and be at least 8 characters long

Entrée Please call ahead for seasonal options

See Input, Checkbox, Radio, Select, and Textarea for their respective accessibility recommendations.