Regular Text Input

This is default if no type is specified

<input type="text" name="Rob" id="Rob" >

Number

This only allows numbers to be typed. It also adds up and down arrow arrow . Lastly it forces the numeric keyboard on iPhone.

<input type="number" name="number" min="-100" max="100" step="10">

Range Slider

<input type="range" name="range" min="1" max="100" value="0">

Date/Week/Time

These only work on chrome.

<input type="date" name="date" min="2012-01-01" max="2022-01-01">
<input type="week" name="week">
<input type="time" name="time">

Color Picker

This doesnt work on any IE version.

<input type="color" name="Rob" id="Rob" >

Input Validation

Required

Adds validation required field. Parent form will not submit and error message is shown.

<input type="text" name="Rob" id="Rob" required >

Email

Adds validation for email. Parent form will not submit and error message is shown.

<input type="email" name="Rob" id="Rob" >

URL

Adds validation for email. Parent form will not submit and error message is shown.

<input type="url" name="Rob" id="Rob" >

Input Attributes

Placeholder

<input type="text" placeholder="placeholder">

autofocus

This automatically places the cursor in the iput when page loads. And scrolls down to the input.

<input type="text" autofocus>

autocomplete

<input type="text" autocomplete="off">

pattern (regex)

<input type="text" pattern="[0-9]{3}">

Datalist

This is like autosuggest

 <input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

textarea

<textarea rows="4" cols="50">
Heres the text.
</textarea>