diff options
Diffstat (limited to 'docs/4.0/components/forms.md')
| -rw-r--r-- | docs/4.0/components/forms.md | 42 |
1 files changed, 23 insertions, 19 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index 6abe03e58..ed4d95b70 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -238,17 +238,17 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl ### 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.** Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). +Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`). {% example html %} <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="..."> </label> </div> <div class="form-check"> <label class="form-check-label"> - <input class="form-check-input" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> + <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="..."> </label> </div> {% endexample %} @@ -337,7 +337,10 @@ More complex layouts can also be created with the grid system. </div> <div class="form-group col-md-4"> <label for="inputState" class="col-form-label">State</label> - <select id="inputState" class="form-control">Choose</select> + <select id="inputState" class="form-control"> + <option selected>Choose...</option> + <option>...</option> + </select> </div> <div class="form-group col-md-2"> <label for="inputZip" class="col-form-label">Zip</label> @@ -645,9 +648,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi <option>Disabled select</option> </select> </div> - <div class="checkbox"> - <label> - <input type="checkbox"> Can't check this + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Can't check this </label> </div> <button type="submit" class="btn btn-primary">Submit</button> @@ -658,7 +661,7 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi {% callout warning %} #### Caveat with anchors -By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. +By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links. {% endcallout %} {% callout danger %} @@ -669,7 +672,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an ## Validation -Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](http://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. +Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript. {% callout warning %} We **highly recommend** custom validation styles as native browser defaults are not announced to screen readers. @@ -684,7 +687,7 @@ Here's how form validation works with Bootstrap: - As a fallback, `.is-invalid` and `.is-valid` classes may be used instead of the pseudo-classes for [server side validation](#server-side). They do not require a `.was-validated` parent class. - Due to constraints in how CSS works, we cannot (at present) apply styles to a `<label>` that comes before a form control in the DOM without the help of custom JavaScript. - All modern browsers support the [constraint validation API](https://www.w3.org/TR/html5/forms.html#the-constraint-validation-api), a series of JavaScript methods for validating form controls. -- Feedback messages may utilize the [browser defaults](#browser-default) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. +- Feedback messages may utilize the [browser defaults](#browser-defaults) (different for each browser, and unstylable via CSS) or our custom feedback styles with additional HTML and CSS. - You may provide custom validity messages with `setCustomValidity` in JavaScript. With that in mind, consider the following demos for our custom form validation styles, optional server side classes, and browser defaults. @@ -736,18 +739,19 @@ When attempting to submit, you'll see the `:invalid` and `:valid` styles applied <script> // Example starter JavaScript for disabling form submissions if there are invalid fields (function() { - "use strict"; - window.addEventListener("load", function() { - var form = document.getElementById("needs-validation"); - form.addEventListener("submit", function(event) { - if (form.checkValidity() == false) { + 'use strict'; + + window.addEventListener('load', function() { + var form = document.getElementById('needs-validation'); + form.addEventListener('submit', function(event) { + if (form.checkValidity() === false) { event.preventDefault(); event.stopPropagation(); } - form.classList.add("was-validated"); + form.classList.add('was-validated'); }, false); }, false); -}()); +})(); </script> {% endexample %} @@ -1004,8 +1008,8 @@ Here's how it works: - We wrap the `<input>` in a `<label>` so the custom control properly triggers the file browser. - We hide the default file `<input>` via `opacity`. -- We use `:after` to generate a custom background and directive (*Choose file...*). -- We use `:before` to generate and position the *Browse* button. +- We use `::after` to generate a custom background and directive (*Choose file...*). +- We use `::before` to generate and position the *Browse* button. - We declare a `height` on the `<input>` for proper spacing for surrounding content. In other words, it's an entirely custom element, all generated via CSS. |