Basic elements used when creating forms
See more examples
||Native element||Text for "side-comments" associated with an input. Read more|
Nothing special to call out. See MDN: form attributes for the full list.
||None||Fires when the form is submitted, which happens when the user clicks the submit button or hits enter.|
||None||Fires when the value of a text-like input or text area changes.|
||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.|
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.
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:
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:
See Input, Checkbox, Radio, Select, and Textarea for their respective accessibility recommendations.