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

1 files changed, 32 insertions, 36 deletions

diff --git a/site/content/docs/4.3/forms/layout.md b/site/content/docs/4.3/forms/layout.md
index e9586c654..3e092c184 100644
--- 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