This repository has been archived by the owner on Nov 4, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 13
form fields
Harris Schneiderman edited this page Aug 7, 2017
·
2 revisions
Fields are meant to be used within forms.
Each field needs the following:
- A wrapper with the
"dqpl-field-wrap"
class - A
<label />
element with the"dqpl-label"
or"dqpl-label-inline"
class. It is expected that the association will be handled in the markup (using the"for"
attribute or"aria-labelledby"
) If it is a required field, use the"dqpl-required"
on the label and place the"Required"
text in a span with the"dqpl-required-text"
class. It is important to addaria-hidden="true" to the
"dqpl-required-text"` span to prevent duplicate "Required" readouts. - A form control element with the proper class
- for text fields (
<input type="text" />
) the"dqpl-text-input"
class - for textareas, the
"dqpl-textrea"
class.
- for text fields (
Disabled fields simply need aria-required="true"
- If the field has validation, a
"dqpl-error-wrap"
element needs to exist within the"dqpl-field-wrap"
wrapper. This"dqpl-error-wrap"
is where the validation messages should be appended. It is also required that you add the proper association between an erroneous field and it's error message.
- If the field has help text, use the field help pattern:
- a wrapping element with the
"dqpl-help-button-wrap"
class - a button (which will act as the tooltip trigger) with the
"dqpl-help-button"
trigger. This button also needs the"data-help-text"
attribute which dictates what content will show up in the help tooltip. Within this button add a icon element with the"fa"
and"fa-question-circle"
classes (also make surearia-hidden="true"
is set on the icon element)
- a wrapping element with the
<div class="dqpl-field-wrap">
<label class="dqpl-label dqpl-required" for="password">Password<span class="dqpl-required-text">Required</span></label>
<input class="dqpl-text-input" type="text" id="password" aria-required="true"/>
<div class="dqpl-error-wrap"></div>
</div>
<div class="dqpl-field-wrap">
<label class="dqpl-label" for="disabled-field">First name</label>
<input class="dqpl-text-input" id="disabled-field" disabled="disabled" type="text" aria-disabled="true" value="John"/>
</div>
<div class="dqpl-field-wrap">
<label class="dqpl-label" for="field-with-help">First name</label>
<div class="dqpl-field-help">
<input class="dqpl-text-input" id="field-with-help" type="text"/>
<button class="dqpl-help-button" type="button" aria-label="First name help" data-help-text="Your first name is the name that comes before your middle and last names.">
<div class="fa fa-question-circle" aria-hidden="true"></div>
</button>
</div>
</div>