Forms provide patterns for creating HTML forms that are easy to use and accessible for as many as possible.
- work on guidelines for microcopy
- work on colour system
- think about form actions and buttons
fieldsetwhen a typography system is in place
Field is the bread and butter of a form, so it is
important to get right. It Must have a label to prompt
the field to be filled in. It can have a hint too, when the label needs
more explanation. It may have a
placeholder but it isn't
advised, an empty-box is more enticing to fill in.
A field should be
<label> element with
class="field"> and the input element nested inside of it.
If you can't use a
label, fields must have a unique id and the label that points to it
range input can have a
.rangeHints inside the
label and any inline elements inside are evenly spread
horizontally to describe the range.
Checkbox give users a binary option, yes or no, agree or disagree. You can also group them together into a CheckboxGroup
FormMessage is for displaying good/bad/information text to users, usually in response to a form submission.
The style is bare by default so it can more easily be overridden. Note the use of
🚧 This is under review
FieldSet should be used to group related fields together.
Like a section of a form or a component of a larger entity. It should have
legend as the first child to label the group. It can also
.fieldset-hint to provide a description of the
grouping that is in play.
form, FieldSet makes sure all
child elements are evenly spaced, just like a