diff options
Diffstat (limited to 'docs/4.0/components/forms.md')
| -rw-r--r-- | docs/4.0/components/forms.md | 19 |
1 files changed, 11 insertions, 8 deletions
diff --git a/docs/4.0/components/forms.md b/docs/4.0/components/forms.md index eb3deb415..d2ca3bb73 100644 --- a/docs/4.0/components/forms.md +++ b/docs/4.0/components/forms.md @@ -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 %} @@ -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. @@ -1004,8 +1007,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. |