- Submitting a form should not require JavaScript
- All inputs should have corresponding
<label>
s- Association a
<label>
with a field- If the label is a sibling of the field, the
for
attribute of the<label>
must match theid
attribute of the field - If the label is the parent of the field, the
for
attribute is unnecessary
- If the label is a sibling of the field, the
- Placement of the
<label>
- a sibling relationship is usually appropriate and enables simple styling with the
<label>
above or to the left of the field - a parent relationship works well for choices because specifying an id for each is less valuable. styling with the label to the right of the field works well in this case
- a sibling relationship is usually appropriate and enables simple styling with the
- Association a
- Inputs providing a list of choices (like checkboxes, and radio buttons) should be grouped by a
<fieldset>
and labeled by its<legend>
Last active
February 18, 2016 20:16
-
-
Save travi/4a9167cc4229141d6d43 to your computer and use it in GitHub Desktop.
Semantic markup for forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<form method="post" action="#"> | |
<fieldset> | |
<legend>Legend</legend> | |
<ul class="fields"> | |
<li> | |
<label for="field-1">Field 1</label> | |
<input type="text" id="field-1" name="field-1" /> | |
</li> | |
<li> | |
<label for="field-2">Email</label> | |
<input type="email" id="field-2" name="field-2" required /> | |
<label for="field-2" class="validation-error">Email is required</label> | |
</li> | |
<li> | |
<fieldset> | |
<legend>Radio Buttons</legend> | |
<ul class="choices"> | |
<li> | |
<label> | |
<input type="radio" name="choose-from-group-1" value="1" /> Choice 1 | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="radio" name="choose-from-group-2" value="1" /> Choice 2 | |
</label> | |
</li> | |
</ul> | |
</fieldset> | |
</li> | |
<li> | |
<fieldset> | |
<legend>Checkboxes</legend> | |
<ul class="choices"> | |
<li> | |
<label> | |
<input type="checkbox" name="choose-multiple-1" value="1" /> Choice 1 | |
</label> | |
</li> | |
<li> | |
<label> | |
<input type="checkbox" name="choose-multiple-2" value="1" /> Choice 2 | |
</label> | |
</li> | |
</ul> | |
</fieldset> | |
</li> | |
<li> | |
<ol class="actions"> | |
<li> | |
<input type="submit" value="Update Resource" /> | |
</li> | |
<li> | |
<a href="path/to/previous/page">Cancel</a> | |
</li> | |
</ol> | |
</li> | |
</ul> | |
</fieldset> | |
</form> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$validation-error-radius: 4px !default; | |
$form-left-gutter-width: 93px !default; | |
$text-white: #fff !default; | |
$text-black: #000 !default; | |
$error-red: #f00 !default; | |
.form { | |
font-variant: small-caps; | |
color: $text-white; | |
padding: 3px; | |
} | |
fieldset { | |
margin: 0 0 5px; | |
opacity: 1; | |
} | |
legend { | |
font-size: 1.5em; | |
} | |
.fields { | |
list-style-type: none; | |
margin: 0; | |
li { | |
margin-bottom: 10px; | |
} | |
> li > label { | |
&:after { | |
content: ':'; | |
} | |
&.validation-error:after { | |
content: ''; | |
} | |
} | |
label { | |
width: $label-gutter; | |
display: inline-block; | |
vertical-align: top; | |
&.validation-error { | |
border-radius: $validation-error-radius; | |
width: auto; | |
margin-left: $form-left-gutter-width; | |
padding: 3px 3px 3px 20px; | |
margin-top: 3px; | |
color: $text-white; | |
display: block; | |
border: 0; | |
background: $error-red url('/resources/thirdparty/travi-styles/dist/img/icons/ui-icon-ffffff-alert.png') no-repeat 3px 2px; | |
} | |
} | |
button { | |
margin-left: $form-left-gutter-width; | |
} | |
fieldset { | |
border: 0; | |
padding: 0; | |
margin: 3px 0 10px; | |
.choices { | |
margin-left: $form-left-gutter-width; | |
} | |
li { | |
list-style-type: none; | |
} | |
label { | |
padding: 0; | |
width: auto; | |
&.ui-state-error { | |
padding-right: 200px; | |
vertical-align: top; | |
} | |
} | |
legend { | |
margin: 0; | |
padding: 0 0 5px; | |
font-weight: normal; | |
font-size: 1em; | |
&:after { | |
content: ':'; | |
} | |
} | |
} | |
.notearea { | |
display: inline; | |
padding-left: 0; | |
} | |
.submitButton { | |
margin-left: 94px; | |
clear: both; | |
display: block; | |
} | |
} | |
form ol.actions { | |
margin: 20px 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment