mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-20 17:54:23 +01:00
Remove unnecessary <form> elements, add a submit button to validation example
This commit is contained in:
Patrick H. Lauke
XhmikosR
parent
c96f6391e8
commit
a68f73e754
@ -9,16 +9,14 @@ toc: true
|
||||
## Example
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlInput1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
||||
</div>
|
||||
</form>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlInput1">Email address</label>
|
||||
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="exampleFormControlTextarea1">Example textarea</label>
|
||||
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Sizing
|
||||
@ -44,7 +42,6 @@ Add the `readonly` boolean attribute on an input to prevent modification of the
|
||||
If you want to have `<input readonly>` elements in your form styled as plain text, use the `.form-control-plaintext` class to remove the default form field styling and preserve the correct margin and padding.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="mb-3 row">
|
||||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
@ -57,7 +54,6 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
|
||||
<input type="password" class="form-control" id="inputPassword">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
{{< example >}}
|
||||
@ -79,10 +75,8 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
|
||||
## Color
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<label for="exampleColorInput">Color picker</label>
|
||||
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
|
||||
</form>
|
||||
<label for="exampleColorInput">Color picker</label>
|
||||
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">
|
||||
{{< /example >}}
|
||||
|
||||
## Datalists
|
||||
@ -92,15 +86,13 @@ Datalists allow you to create a group of `<option>`s that can be accessed (and a
|
||||
Learn more about [support for datalist elements](https://caniuse.com/#feat=datalist).
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<label for="exampleDataList">Datalist example</label>
|
||||
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
|
||||
<datalist id="datalistOptions">
|
||||
<option value="San Francisco">
|
||||
<option value="New York">
|
||||
<option value="Seattle">
|
||||
<option value="Los Angeles">
|
||||
<option value="Chicago">
|
||||
</datalist>
|
||||
</form>
|
||||
<label for="exampleDataList">Datalist example</label>
|
||||
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
|
||||
<datalist id="datalistOptions">
|
||||
<option value="San Francisco">
|
||||
<option value="New York">
|
||||
<option value="Seattle">
|
||||
<option value="Los Angeles">
|
||||
<option value="Chicago">
|
||||
</datalist>
|
||||
{{< /example >}}
|
||||
|
||||
@ -23,16 +23,14 @@ Since Bootstrap applies `display: block` and `width: 100%` to almost all our for
|
||||
Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or nearly any other element.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput">Example label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput2">Another label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
|
||||
</div>
|
||||
</form>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput">Example label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label for="formGroupExampleInput2">Another label</label>
|
||||
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Form grid
|
||||
@ -40,14 +38,14 @@ Feel free to build your forms however you like, with `<fieldset>`s, `<div>`s, or
|
||||
More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options. **Requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
|
||||
|
||||
{{< example >}}
|
||||
<form class="row">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="First name">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Last name">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Gutters
|
||||
@ -55,14 +53,14 @@ More complex forms can be built using our grid classes. Use these for form layou
|
||||
By adding [gutter modifier classes]({{< docsref "/layout/grid#gutters" >}}), you can have control over the gutter width in as well the inline as block direction. **Also requires the `$enable-grid-classes` Sass variable to be enabled** (on by default).
|
||||
|
||||
{{< example >}}
|
||||
<form class="row g-3">
|
||||
<div class="row g-3">
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="First name">
|
||||
</div>
|
||||
<div class="col">
|
||||
<input type="text" class="form-control" placeholder="Last name">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
More complex layouts can also be created with the grid system.
|
||||
@ -179,26 +177,24 @@ At times, you maybe need to use margin or padding utilities to create that perfe
|
||||
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s or `<legend>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
|
||||
|
||||
{{< example >}}
|
||||
<form>
|
||||
<div class="row mb-3">
|
||||
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mb-3">
|
||||
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Column sizing
|
||||
@ -206,7 +202,7 @@ Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s o
|
||||
As shown in the previous examples, our grid system allows you to place any number of `.col`s within a `.row`. They'll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining `.col`s equally split the rest, with specific column classes like `.col-sm-7`.
|
||||
|
||||
{{< example >}}
|
||||
<form class="row g-3">
|
||||
<div class="row g-3">
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" placeholder="City">
|
||||
</div>
|
||||
@ -216,7 +212,7 @@ As shown in the previous examples, our grid system allows you to place any numbe
|
||||
<div class="col-sm">
|
||||
<input type="text" class="form-control" placeholder="Zip">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Auto-sizing
|
||||
|
||||
@ -74,7 +74,7 @@ Help text below inputs can be styled with `.form-text`. This class includes `dis
|
||||
Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`, or something else) with nothing more than a utility class.
|
||||
|
||||
{{< example >}}
|
||||
<form class="row g-3 align-items-center">
|
||||
<div class="row g-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<label for="inputPassword6" class="col-form-label">Password</label>
|
||||
</div>
|
||||
@ -86,7 +86,7 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>`
|
||||
Must be 8-20 characters long.
|
||||
</small>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{< /example >}}
|
||||
|
||||
## Disabled forms
|
||||
|
||||
@ -297,6 +297,10 @@ Validation styles are available for the following form controls and components:
|
||||
</label>
|
||||
<div class="invalid-feedback">Example invalid form file feedback</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-primary" type="submit" disabled>Submit form</button>
|
||||
</div>
|
||||
</form>
|
||||
{{< /example >}}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user