Skip to content

Forms fixes: fieldset/legend, new .form-control-legend, accessibility advice #19277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 25, 2016
Merged

Forms fixes: fieldset/legend, new .form-control-legend, accessibility advice #19277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
727722d
Add form-control-legend
patrickhlauke Feb 19, 2016
c25556e
Appropriate use of fieldset/div, legend, callout for hidden/no label …
patrickhlauke Feb 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 51 additions & 43 deletions docs/components/forms.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `

{% example html %}
<form>
<fieldset class="form-group">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="exampleSelect1">Example select</label>
<select class="form-control" id="exampleSelect1">
<option>1</option>
Expand All @@ -37,8 +37,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="exampleSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleSelect2">
<option>1</option>
Expand All @@ -47,34 +47,37 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
<option>4</option>
<option>5</option>
</select>
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="exampleTextarea">Example textarea</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
<small id="fileHelp" class="text-muted">This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.</small>
</fieldset>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
<fieldset class="form-group">
<legend>Radio buttons</legend>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
</fieldset>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
Expand Down Expand Up @@ -258,14 +261,14 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o

{% example html %}
<form>
<fieldset class="form-group">
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
</fieldset>
<fieldset class="form-group">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
</fieldset>
</div>
</form>
{% endexample %}

Expand Down Expand Up @@ -330,11 +333,16 @@ Because of this, you may need to manually address the width and alignment of ind
</form>
{% endexample %}

{% callout warning %}
#### Alternatives to hidden labels
Assistive technologies such as screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the `.sr-only` class. There are further alternative methods of providing a label for assistive technologies, such as the `aria-label`, `aria-labelledby` or `title` attribute. If none of these are present, assistive technologies may resort to using the `placeholder` attribute, if present, but note that use of `placeholder` as a replacement for other labelling methods is not advised.
{% endcallout %}

### Using the Grid

For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls.

Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels.
Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.form-control-legend` to make them appear similar to regular `<label>` elements.

{% example html %}
<form>
Expand All @@ -350,8 +358,8 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Radios</label>
<fieldset class="form-group row">
<legend class="col-sm-2 form-control-legend">Radios</legend>
<div class="col-sm-10">
<div class="radio">
<label>
Expand All @@ -372,17 +380,17 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
</label>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2">Checkbox</label>
</fieldset>
<fieldset class="form-group row">
<legend class="col-sm-2 form-control-legend">Checkbox</legend>
<div class="col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-secondary">Sign in</button>
Expand Down Expand Up @@ -463,17 +471,17 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes

### Without labels

Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.**
Should you have no text within the `<label>`, the input is positioned as you'd expect. **Currently only works on non-inline checkboxes and radios.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).

{% example html %}
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1">
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>
{% endexample %}
Expand Down
12 changes: 12 additions & 0 deletions scss/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,18 @@ select.form-control {
margin-bottom: 0; // Override the `<label>` default
}

//
// Legends
//

// For use with horizontal and inline forms, when you need the legend text to
// be the same size as regular labels, and to align with the form controls.
.form-control-legend {
padding: $input-padding-y $input-padding-x;
margin-bottom: 0;
font-size: $font-size-base;
}


// Todo: clear this up

Expand Down