Form elements

Basic elements used when creating forms

Demo

Must be at least 8 characters

See more examples

API

Tags

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
Note: Form controls are documented separately. See Input, Checkbox, Radio, Select, and Textarea.

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

Mdash 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, Mdash 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:

183/200 characters left
Must include a number, special character, and be at least 8 characters long
Please call ahead for seasonal options

Accessibility

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