html-input: update

html-input.md

@@ -1,58 +1,112 @@
 ---
 title: Input tag
 category: HTML
+layout: 2017/sheet
+updated: 2017-10-29
+weight: -3
 ---
 
-     <input ...
+### Input
-       disabled
-       required
-       checked
 
-       autofocus
+```html
+ <input ...
+   disabled
+   required
+   checked
+```
 
-       autocomplete='off'        <!-- autocomplete -->
+```html
-       autocompletetype='cc-exp'
+   autofocus
-       autocapitalize='off'      <!-- for mobiles -->
+```
-       pattern='\d*'             <!-- force numeric input in iOS -->
+
+```html
+   autocomplete='off'        <!-- autocomplete -->
+   autocompletetype='cc-exp'
+   autocapitalize='off'      <!-- for mobiles -->
+   pattern='\d*'             <!-- force numeric input in iOS -->
+```
 
 ### Input types
 
-Text:
+#### Text
 
- * email
+* email
- * hidden
+* hidden
- * month
+* **password**
- * password
+* tel
- * tel
+* **text**
- * text
+* search
- * search
+{: .-four-column}
- * week
 
-Time:
+#### Time
 
- * date
+* date
- * datetime
+* time
- * datetime-local
+{: .-four-column}
- * time
 
-Etc:
+#### Time (not widely supported)
 
- * file
+* month
- * radio
+* week
- * checkbox
+* datetime
+* datetime-local
+{: .-four-column}
 
-Buttons:
+#### Etc
 
- * button
+* **file**
- * reset
+* **radio**
- * submit
+* **checkbox**
- * image
+{: .-four-column}
 
-Numeric:
+#### Buttons
 
- * number
+* button
- * range
+* reset
+* submit
+* image
+{: .-four-column}
 
-### Ref
+#### Numeric
 
- * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
+* number
+* range
+{: .-four-column}
+
+## Examples
+
+### Dates
+
+| Type | Example |
+| --- | --- |
+| `type='date'` | <input type='date'> |
+| `type='time'` | <input type='time'> |
+
+# Datetime
+
+| Type | Example |
+| --- | --- |
+| `type='datetime'` | <input type='datetime'> |
+| `type='datetime-local'` | <input type='datetime-local'> |
+
+`datetime` and `datetime-local` fields are not widely supported.
+
+### Numbers
+
+| Type | Example |
+| --- | --- |
+| `type='number'` | <input type='number'> |
+| `type='range'` | <input type='range'> |
+
+### Text
+
+| Type | Example |
+| --- | --- |
+| `type='text'` | <input type='text'> |
+| `type='password'` | <input type='password'> |
+| `type='search'` | <input type='search'> |
+| `type='tel'` | <input type='tel'> |
+
+## Also see
+
+ * <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input>