Remove unnecessary <form> elements, add a submit button to validation example

diff --git a/site/content/docs/4.3/forms/form-control.md b/site/content/docs/4.3/forms/form-control.md
index 060af37ff4f6bff9a320051d8327a86d7704ea01..0a79231a7b83b99e2289377c5c6574d9db443aed 100644 (file)
--- a/site/content/docs/4.3/forms/form-control.md
+++ b/site/content/docs/4.3/forms/form-control.md
@@ -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 >}}

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index e9586c654dedaa2e9e950927ef997bf83625e8a6..3e092c1842097a94a09c027f653c55203b820016 100644 (file)
--- a/site/content/docs/4.3/forms/layout.md
+++ b/site/content/docs/4.3/forms/layout.md
@@ -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>
-  <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">
-    <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>
-</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>
+<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">
+  <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>
 {{< /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

diff --git a/site/content/docs/4.3/forms/overview.md b/site/content/docs/4.3/forms/overview.md
index b431b4888a4076c765b6e7e354b7aeabb26f144b..7d03d54b940d1f134f640785f81fcabe1b667fb6 100644 (file)
--- a/site/content/docs/4.3/forms/overview.md
+++ b/site/content/docs/4.3/forms/overview.md
@@ -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

diff --git a/site/content/docs/4.3/forms/validation.md b/site/content/docs/4.3/forms/validation.md
index c8d10745ac3e0a870d414ac0656ad5bc8f5710d8..d00abe4db4fe778e7f941648fe5fda0f1b7fb523 100644 (file)
--- a/site/content/docs/4.3/forms/validation.md
+++ b/site/content/docs/4.3/forms/validation.md
@@ -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 >}}