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]

2 files changed, 91 insertions, 1 deletions

diff --git a/Gruntfile.js b/Gruntfile.js
index 146698599..c4407332d 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -343,7 +343,12 @@ module.exports = function (grunt) {
           'Attribute “autocomplete” not allowed on element “button” at this point.',
           'Element “div” not allowed as child of element “progress” in this context. (Suppressing further errors from this subtree.)',
           'Consider using the “h1” element as a top-level heading only (all “h1” elements are treated as top-level headings by many screen readers and other tools).',
-          'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
+          'The “color” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
+          'The “date” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
+          'The “datetime-local” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
+          'The “month” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
+          'The “time” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.',
+          'The “week” input type is not supported in all browsers. Please be sure to test, and consider using a polyfill.'
         ]
       },
       src: ['_gh_pages/**/*.html', 'js/tests/visual/*.html']
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.