Add comprehensive `.form-control` example(/testcase) to docs

Put all the textual input types right next to each other for easy visual comparison.
Refs #17308, #18763

[skip sauce]

1 files changed, 85 insertions, 0 deletions

diff --git a/docs/components/forms.md b/docs/components/forms.md
index d3419beb8..ce0124f1a 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -163,6 +163,91 @@ Below is a complete list of the specific from controls supported by Bootstrap an
   </tbody>
 </table>
 
+### Textual inputs
+
+Here are examples of `.form-control` applied to each textual HTML5 `<input>` `type`.
+
+{% example html %}
+<div class="form-group row">
+  <label for="example-text-input" class="col-xs-2 form-control-label">Text</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-search-input" class="col-xs-2 form-control-label">Search</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-email-input" class="col-xs-2 form-control-label">Email</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="email" value="[email protected]" id="example-email-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-url-input" class="col-xs-2 form-control-label">URL</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="url" value="http://getbootstrap.com" id="example-url-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-tel-input" class="col-xs-2 form-control-label">Telephone</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-password-input" class="col-xs-2 form-control-label">Password</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="password" value="hunter2" id="example-password-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-number-input" class="col-xs-2 form-control-label">Number</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="number" value="42" id="example-number-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-datetime-local-input" class="col-xs-2 form-control-label">Date and time</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-date-input" class="col-xs-2 form-control-label">Date</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="date" value="2011-08-19" id="example-date-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-month-input" class="col-xs-2 form-control-label">Month</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="month" value="2011-08" id="example-month-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-week-input" class="col-xs-2 form-control-label">Week</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="week" value="2011-W33" id="example-week-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-time-input" class="col-xs-2 form-control-label">Time</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="time" value="13:45:00" id="example-time-input">
+  </div>
+</div>
+<div class="form-group row">
+  <label for="example-color-input" class="col-xs-2 form-control-label">Color</label>
+  <div class="col-xs-10">
+    <input class="form-control" type="color" value="#563d7c" id="example-color-input">
+  </div>
+</div>
+{% endexample %}
+
 ## Form layouts
 
 Since Bootstrap applies `display: block` and `width: 100%` to almost all our form controls, forms will by default stack vertically. Additional classes can be used to vary this layout on a per-form basis.