Merge pull request #18784 from twbs/input-types

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

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']

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="bootstrap@example.com" 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.