Html Input Cheat Sheet

From WikiOD

Here is the cheatsheat of Html Input and basic guide on how to use Html Input

Input[edit | edit source]

 <input ...
   disabled
   required
   checked
   autofocus
   autocomplete='off'        <!-- autocomplete -->
   autocompletetype='cc-exp'
   autocapitalize='off'      <!-- for mobiles -->
   pattern='\d*'             <!-- force numeric input in iOS -->

Input types[edit | edit source]

Text[edit | edit source]

  • email
  • hidden
  • password
  • tel
  • text
  • search {: .-four-column}

Time[edit | edit source]

  • date
  • time {: .-four-column}

Time (not widely supported)[edit | edit source]

  • month
  • week
  • datetime
  • datetime-local {: .-four-column}

Etc[edit | edit source]

  • file
  • radio
  • checkbox {: .-four-column}

Buttons[edit | edit source]

  • button
  • reset
  • submit
  • image {: .-four-column}

Numeric[edit | edit source]

  • number
  • range {: .-four-column}

Examples[edit | edit source]

Dates[edit | edit source]

Type Example
type='date' <input type='date'>
type='time' <input type='time'>

Datetime[edit | edit source]

Type Example
type='datetime' <input type='datetime'>
type='datetime-local' <input type='datetime-local'>

datetime and datetime-local fields are not widely supported.

Numbers[edit | edit source]

Type Example
type='number' <input type='number'>
type='range' <input type='range'>

Text[edit | edit source]

Type Example
type='text' <input type='text'>
type='password' <input type='password'>
type='search' <input type='search'>
type='tel' <input type='tel'>

Also see[edit | edit source]

Credit:rstacruz