Skip to content
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

Jump to bottom

Drop useless text faking a label in horizontal forms example #31904

Merged
merged 4 commits into from Oct 19, 2020
Merged

Drop useless text faking a label in horizontal forms example #31904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6fb3953
docs(forms): drop useless text faking a label in horizontal forms exa…
ffoodd Oct 15, 2020
143192a
docs(forms): fix incorrect legend nesting in fieldset
ffoodd Oct 15, 2020
be86507
docs(forms): use a legend for fieldset instead of aria-label
ffoodd Oct 15, 2020
b591d62
Merge branch 'main' into main-fod-docs-horizontal-forms
XhmikosR Oct 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
45 changes: 21 additions & 24 deletions site/content/docs/5.0/forms/layout.md
View file
Open in desktop
Expand Up @@ -132,34 +132,31 @@ At times, you maybe need to use margin or padding utilities to create that perfe
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset>
<div class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="row mb-3">
<div class="col-form-label col-sm-2 pt-0">Checkbox</div>
<div class="col-sm-10">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Expand Down
3 changes: 2 additions & 1 deletion site/content/docs/5.0/forms/overview.md
View file
Open in desktop
Expand Up @@ -103,7 +103,8 @@ However, if your form also includes custom button-like elements such as `<a clas

{{< example >}}
<form>
<fieldset disabled aria-label="Disabled fieldset example">
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="mb-3">
<label for="disabledTextInput" class="form-label">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
Expand Down