Skip to content

Commit 13194ad

Browse files
patrickhlaukepatrickhlauke
committed
Merge pull request #19277 from patrickhlauke/v4-dev-forms-fixes#2
Forms fixes: fieldset/legend, new .form-control-legend, accessibility advice
2 parents b25f37b + c25556e commit 13194ad

File tree

2 files changed

+63
-43
lines changed

2 files changed

+63
-43
lines changed

‎docs/components/forms.md

Lines changed: 51 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
1919

2020
{% example html %}
2121
<form>
22-
<fieldset class="form-group">
22+
<div class="form-group">
2323
<label for="exampleInputEmail1">Email address</label>
2424
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
2525
<small id="emailHelp" class="text-muted">We'll never share your email with anyone else.</small>
26-
</fieldset>
27-
<fieldset class="form-group">
26+
</div>
27+
<div class="form-group">
2828
<label for="exampleInputPassword1">Password</label>
2929
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
30-
</fieldset>
31-
<fieldset class="form-group">
30+
</div>
31+
<div class="form-group">
3232
<label for="exampleSelect1">Example select</label>
3333
<select class="form-control" id="exampleSelect1">
3434
<option>1</option>
@@ -37,8 +37,8 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
3737
<option>4</option>
3838
<option>5</option>
3939
</select>
40-
</fieldset>
41-
<fieldset class="form-group">
40+
</div>
41+
<div class="form-group">
4242
<label for="exampleSelect2">Example multiple select</label>
4343
<select multiple class="form-control" id="exampleSelect2">
4444
<option>1</option>
@@ -47,34 +47,37 @@ Remember, since Bootstrap utilizes the HTML5 doctype, **all inputs must have a `
4747
<option>4</option>
4848
<option>5</option>
4949
</select>
50-
</fieldset>
51-
<fieldset class="form-group">
50+
</div>
51+
<div class="form-group">
5252
<label for="exampleTextarea">Example textarea</label>
5353
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
54-
</fieldset>
55-
<fieldset class="form-group">
54+
</div>
55+
<div class="form-group">
5656
<label for="exampleInputFile">File input</label>
5757
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
5858
<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>
59-
</fieldset>
60-
<div class="radio">
61-
<label>
62-
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
63-
Option one is this and that&mdash;be sure to include why it's great
64-
</label>
65-
</div>
66-
<div class="radio">
67-
<label>
68-
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
69-
Option two can be something else and selecting it will deselect option one
70-
</label>
71-
</div>
72-
<div class="radio disabled">
73-
<label>
74-
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
75-
Option three is disabled
76-
</label>
7759
</div>
60+
<fieldset class="form-group">
61+
<legend>Radio buttons</legend>
62+
<div class="radio">
63+
<label>
64+
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
65+
Option one is this and that&mdash;be sure to include why it's great
66+
</label>
67+
</div>
68+
<div class="radio">
69+
<label>
70+
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
71+
Option two can be something else and selecting it will deselect option one
72+
</label>
73+
</div>
74+
<div class="radio disabled">
75+
<label>
76+
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
77+
Option three is disabled
78+
</label>
79+
</div>
80+
</fieldset>
7881
<div class="checkbox">
7982
<label>
8083
<input type="checkbox"> Check me out
@@ -258,14 +261,14 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o
258261

259262
{% example html %}
260263
<form>
261-
<fieldset class="form-group">
264+
<div class="form-group">
262265
<label for="formGroupExampleInput">Example label</label>
263266
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
264-
</fieldset>
265-
<fieldset class="form-group">
267+
</div>
268+
<div class="form-group">
266269
<label for="formGroupExampleInput2">Another label</label>
267270
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
268-
</fieldset>
271+
</div>
269272
</form>
270273
{% endexample %}
271274

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

336+
{% callout warning %}
337+
#### Alternatives to hidden labels
338+
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.
339+
{% endcallout %}
340+
333341
### Using the Grid
334342

335343
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.
336344

337-
Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels.
345+
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.
338346

339347
{% example html %}
340348
<form>
@@ -350,8 +358,8 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
350358
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
351359
</div>
352360
</div>
353-
<div class="form-group row">
354-
<label class="col-sm-2">Radios</label>
361+
<fieldset class="form-group row">
362+
<legend class="col-sm-2 form-control-legend">Radios</legend>
355363
<div class="col-sm-10">
356364
<div class="radio">
357365
<label>
@@ -372,17 +380,17 @@ Be sure to add `.form-control-label` to your `<label>`s as well so they're verti
372380
</label>
373381
</div>
374382
</div>
375-
</div>
376-
<div class="form-group row">
377-
<label class="col-sm-2">Checkbox</label>
383+
</fieldset>
384+
<fieldset class="form-group row">
385+
<legend class="col-sm-2 form-control-legend">Checkbox</legend>
378386
<div class="col-sm-10">
379387
<div class="checkbox">
380388
<label>
381389
<input type="checkbox"> Check me out
382390
</label>
383391
</div>
384392
</div>
385-
</div>
393+
</fieldset>
386394
<div class="form-group row">
387395
<div class="col-sm-offset-2 col-sm-10">
388396
<button type="submit" class="btn btn-secondary">Sign in</button>
@@ -463,17 +471,17 @@ Use the `.checkbox-inline` or `.radio-inline` classes on a series of checkboxes
463471

464472
### Without labels
465473

466-
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.**
474+
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`).
467475

468476
{% example html %}
469477
<div class="checkbox">
470478
<label>
471-
<input type="checkbox" id="blankCheckbox" value="option1">
479+
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
472480
</label>
473481
</div>
474482
<div class="radio">
475483
<label>
476-
<input type="radio" name="blankRadio" id="blankRadio1" value="option1">
484+
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
477485
</label>
478486
</div>
479487
{% endexample %}

‎scss/_forms.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,18 @@ select.form-control {
8080
margin-bottom: 0; // Override the `<label>` default
8181
}
8282

83+
//
84+
// Legends
85+
//
86+
87+
// For use with horizontal and inline forms, when you need the legend text to
88+
// be the same size as regular labels, and to align with the form controls.
89+
.form-control-legend {
90+
padding: $input-padding-y $input-padding-x;
91+
margin-bottom: 0;
92+
font-size: $font-size-base;
93+
}
94+
8395

8496
// Todo: clear this up
8597

0 commit comments

Comments
 (0)