html-input.md

   1 ---
   2 title: Input tag
   3 category: HTML
   4 layout: 2017/sheet
   5 updated: 2017-10-30
   6 weight: -3
   7 ---
   8
   9 ### Input
  10
  11 ```html
  12  <input ...
  13    disabled
  14    required
  15    checked
  16 ```
  17
  18 ```html
  19    autofocus
  20 ```
  21
  22 ```html
  23    autocomplete='off'        <!-- autocomplete -->
  24    autocompletetype='cc-exp'
  25    autocapitalize='off'      <!-- for mobiles -->
  26    pattern='\d*'             <!-- force numeric input in iOS -->
  27 ```
  28
  29 ### Input types
  30
  31 #### Text
  32
  33 * email
  34 * hidden
  35 * **password**
  36 * tel
  37 * **text**
  38 * search
  39 {: .-four-column}
  40
  41 #### Time
  42
  43 * date
  44 * time
  45 {: .-four-column}
  46
  47 #### Time (not widely supported)
  48
  49 * month
  50 * week
  51 * datetime
  52 * datetime-local
  53 {: .-four-column}
  54
  55 #### Etc
  56
  57 * **file**
  58 * **radio**
  59 * **checkbox**
  60 {: .-four-column}
  61
  62 #### Buttons
  63
  64 * button
  65 * reset
  66 * submit
  67 * image
  68 {: .-four-column}
  69
  70 #### Numeric
  71
  72 * number
  73 * range
  74 {: .-four-column}
  75
  76 ## Examples
  77
  78 ### Dates
  79
  80 | Type | Example |
  81 | --- | --- |
  82 | `type='date'` | <input type='date'> |
  83 | `type='time'` | <input type='time'> |
  84
  85 ### Datetime
  86
  87 | Type | Example |
  88 | --- | --- |
  89 | `type='datetime'` | <input type='datetime'> |
  90 | `type='datetime-local'` | <input type='datetime-local'> |
  91
  92 `datetime` and `datetime-local` fields are not widely supported.
  93
  94 ### Numbers
  95
  96 | Type | Example |
  97 | --- | --- |
  98 | `type='number'` | <input type='number'> |
  99 | `type='range'` | <input type='range'> |
 100
 101 ### Text
 102
 103 | Type | Example |
 104 | --- | --- |
 105 | `type='text'` | <input type='text'> |
 106 | `type='password'` | <input type='password'> |
 107 | `type='search'` | <input type='search'> |
 108 | `type='tel'` | <input type='tel'> |
 109
 110 ## Also see
 111
 112  * <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input>