diff options
| -rw-r--r-- | site/content/docs/4.3/forms/file.md | 2 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/layout.md | 96 | ||||
| -rw-r--r-- | site/content/docs/4.3/forms/validation.md | 29 |
3 files changed, 52 insertions, 75 deletions
diff --git a/site/content/docs/4.3/forms/file.md b/site/content/docs/4.3/forms/file.md index 1c5370bc8..bbf4afd98 100644 --- a/site/content/docs/4.3/forms/file.md +++ b/site/content/docs/4.3/forms/file.md @@ -46,4 +46,4 @@ Longer placeholder text is truncated and an ellipsis is added when there's not e </div> {{< /example >}} -We hide the default file `<input>` via `opacity` and instead style the `<label>`. The button is generated and positioned with `::after`. Lastly, we declare a `width` and `height` on the `<input>` for proper spacing for surrounding content. +We hide the default file `<input>` via `opacity` and instead style the `<label>`, and declare a `width` and `height` on the `<input>` for proper spacing for surrounding content. diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md index e9cdda2c1..fb57d2760 100644 --- a/site/content/docs/4.3/forms/layout.md +++ b/site/content/docs/4.3/forms/layout.md @@ -239,19 +239,28 @@ The example below uses a flexbox utility to vertically center the contents and c <form> <div class="form-row align-items-center"> <div class="col-auto"> - <label class="sr-only" for="inlineFormInput">Name</label> - <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe"> + <label class="sr-only" for="autoSizingInput">Name</label> + <input type="text" class="form-control mb-2" id="autoSizingInput" placeholder="Jane Doe"> </div> <div class="col-auto"> - <label class="sr-only" for="inlineFormInputGroup">Username</label> + <label class="sr-only" for="autoSizingInputGroup">Username</label> <div class="input-group mb-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> - <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> + <input type="text" class="form-control" id="autoSizingInputGroup" placeholder="Username"> </div> </div> <div class="col-auto"> + <label class="sr-only" for="autoSizingSelect">Preference</label> + <select class="form-select mb-2" id="autoSizingSelect"> + <option selected>Choose...</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> + <div class="col-auto"> <div class="form-check mb-2"> <input class="form-check-input" type="checkbox" id="autoSizingCheck"> <label class="form-check-label" for="autoSizingCheck"> @@ -272,41 +281,21 @@ You can then remix that once again with size-specific column classes. <form> <div class="form-row align-items-center"> <div class="col-sm-3 my-1"> - <label class="sr-only" for="inlineFormInputName">Name</label> - <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe"> + <label class="sr-only" for="specificSizeInputName">Name</label> + <input type="text" class="form-control" id="specificSizeInputName" placeholder="Jane Doe"> </div> <div class="col-sm-3 my-1"> - <label class="sr-only" for="inlineFormInputGroupUsername">Username</label> + <label class="sr-only" for="specificSizeInputGroupUsername">Username</label> <div class="input-group"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> - <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> + <input type="text" class="form-control" id="specificSizeInputGroupUsername" placeholder="Username"> </div> </div> - <div class="col-auto my-1"> - <div class="form-check"> - <input class="form-check-input" type="checkbox" id="autoSizingCheck2"> - <label class="form-check-label" for="autoSizingCheck2"> - Remember me - </label> - </div> - </div> - <div class="col-auto my-1"> - <button type="submit" class="btn btn-primary">Submit</button> - </div> - </div> -</form> -{{< /example >}} - -And of course [custom form controls](#custom-forms) are supported. - -{{< example >}} -<form> - <div class="form-row align-items-center"> - <div class="col-auto my-1"> - <label class="mr-sm-2 sr-only" for="inlineFormSelect">Preference</label> - <select class="form-select mr-sm-2" id="inlineFormSelect"> + <div class="col-sm-3 my-1"> + <label class="sr-only" for="specificSizeSelect">Preference</label> + <select class="form-select" id="specificSizeSelect"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> @@ -314,9 +303,11 @@ And of course [custom form controls](#custom-forms) are supported. </select> </div> <div class="col-auto my-1"> - <div class="form-check mr-sm-2"> - <input type="checkbox" class="form-check-input" id="formCheckAutosizing"> - <label class="form-check-label" for="formCheckAutosizing">Remember my preference</label> + <div class="form-check"> + <input class="form-check-input" type="checkbox" id="autoSizingCheck2"> + <label class="form-check-label" for="autoSizingCheck2"> + Remember me + </label> </div> </div> <div class="col-auto my-1"> @@ -338,46 +329,33 @@ You may need to manually address the width and alignment of individual form cont {{< example >}} <form class="form-inline"> - <label class="sr-only" for="inlineFormInputName2">Name</label> - <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe"> + <label class="sr-only" for="inlineFormInputName">Name</label> + <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName" placeholder="Jane Doe"> - <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label> + <label class="sr-only" for="inlineFormInputGroupUsername">Username</label> <div class="input-group mb-2 mr-sm-2"> <div class="input-group-prepend"> <div class="input-group-text">@</div> </div> - <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username"> - </div> - - <div class="form-check mb-2 mr-sm-2"> - <input class="form-check-input" type="checkbox" id="inlineFormCheck"> - <label class="form-check-label" for="inlineFormCheck"> - Remember me - </label> + <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username"> </div> - <button type="submit" class="btn btn-primary mb-2">Submit</button> -</form> -{{< /example >}} - -Custom form controls and selects are also supported. - -{{< example >}} -<form class="form-inline"> - <label class="my-1 mr-2" for="inlineFormSelectPref">Preference</label> - <select class="form-select my-1 mr-sm-2" id="inlineFormSelectPref"> + <label class="sr-only" for="inlineFormSelectPref">Preference</label> + <select class="form-select mb-2 mr-sm-2" id="inlineFormSelectPref"> <option selected>Choose...</option> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> - <div class="form-check my-1 mr-sm-2"> - <input type="checkbox" class="form-check-input" id="formCheckInline"> - <label class="form-check-label" for="formCheckInline">Remember my preference</label> + <div class="form-check mb-2 mr-sm-2"> + <input class="form-check-input" type="checkbox" id="inlineFormCheck"> + <label class="form-check-label" for="inlineFormCheck"> + Remember me + </label> </div> - <button type="submit" class="btn btn-primary my-1">Submit</button> + <button type="submit" class="btn btn-primary mb-2">Submit</button> </form> {{< /example >}} diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md index 63fc4e8f0..bedaeba13 100644 --- a/site/content/docs/4.3/forms/validation.md +++ b/site/content/docs/4.3/forms/validation.md @@ -259,9 +259,8 @@ We recommend using client-side validation, but in case you require server-side v Validation styles are available for the following form controls and components: - `<input>`s and `<textarea>`s with `.form-control` (including up to one `.form-control` in input groups) -- `<select>`s with `.form-control` or `.form-select` +- `<select>`s with `.form-select` - `.form-check`s -- `.custom-checkbox`s and `.custom-radio`s - `.form-file` {{< example >}} @@ -274,19 +273,19 @@ Validation styles are available for the following form controls and components: </div> </div> - <div class="custom-control custom-checkbox mb-3"> - <input type="checkbox" class="custom-control-input" id="customControlValidation1" required> - <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label> + <div class="form-check mb-3"> + <input type="checkbox" class="form-check-input" id="validationFormCheck1" required> + <label class="form-check-label" for="validationFormCheck1">Check this checkbox</label> <div class="invalid-feedback">Example invalid feedback text</div> </div> - <div class="custom-control custom-radio"> - <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required> - <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label> + <div class="form-check"> + <input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required> + <label class="form-check-label" for="validationFormCheck2">Toggle this radio</label> </div> - <div class="custom-control custom-radio mb-3"> - <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required> - <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label> + <div class="form-check mb-3"> + <input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required> + <label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label> <div class="invalid-feedback">More example invalid feedback text</div> </div> @@ -297,13 +296,13 @@ Validation styles are available for the following form controls and components: <option value="2">Two</option> <option value="3">Three</option> </select> - <div class="invalid-feedback">Example invalid custom select feedback</div> + <div class="invalid-feedback">Example invalid select feedback</div> </div> <div class="form-file"> - <input type="file" class="form-file-input" id="validatedCustomFile" required> - <label class="form-file-label" for="validatedCustomFile">Choose file...</label> - <div class="invalid-feedback">Example invalid custom file feedback</div> + <input type="file" class="form-file-input" id="validationFormFile" required> + <label class="form-file-label" for="validationFormFile">Choose file...</label> + <div class="invalid-feedback">Example invalid form file feedback</div> </div> </form> {{< /example >}} |