<label for="name">Name: </label> 
<input id="name" name="inputName" 
  placeholder="placeholder text" 
  pattern="\w{6,9}" 
  required
  autofocus
  type="text"/>

Note that the following CSS is used in our live examples:

input:focus:invalid { background-color: lightPink;}
input:valid { background-color:lightGreen }
input:required {border: 2px solid red;}
input:optional {border: 2px solid green;}

<label for="inputID">Label: </label> 
<input id="inputID" name="inputName" 
  placeholder="placeholder text" 
  pattern="\w{6,9}" 
  required
  autofocus
  type="text"/>

<label for="inputID">Label: </label> 
<input id="inputID" name="inputName" 
  placeholder="\w{6,9}" 
  pattern="\w{6,9}" 
  required
  autofocus
  type="text"/>

6 to 9 characters:

<label for="inputID">Label: </label> 
<input id="inputID" name="inputName" 
  placeholder="placeholder text" 
  pattern="\w{6,9}"
  required
  autofocus 
  type="text"/>

Has Focus?

only one element can have the autofocus attribute

$('[autofocus]').last().focus();

<label for="inputID">Label: </label> 
<input id="inputID" name="inputName" 
  placeholder="placeholder text" 
  pattern="\w{6,9}"
  required
  autofocus
  type="text" />

Appearance?

<label for="inputID">Label: </label> 
<input id="inputID" name="inputName" 
  placeholder="placeholder text" 
  pattern="\w{6,9}"
  required
  autofocus
  form="notMyParentForm"
  type="text" />

Note: form="" disassociates a form element from its parent form.

• Safari
• Chrome
• Opera
• Firefox
• IE

• button does nothing. use button or js
• checkbox unchecked not submitted with form
• file disabled in iPhone/iOS
• hidden
• image works like <button>
• password use post, not get
• radio
• reset can lead to bad user experience
• submit
• text default

• color
• url
• tel
• email
• number
• range
• search
• date
• datetime
• datetime-local
• month
• time
• week

<input name="color" 
type="color" />

<input id="color" name="color" 
type="color"       
placeholder="#FFFFFF" 
pattern="#[0-9A-Fa-f]{6}"
required />

<input  name="website" type="url" />

• Safari
• Chrome
• Opera
• Firefox
• IE10 b2

<input 
id="website" 
name="url" 
type="url"
placeholder="http://www.domain.com" 
pattern="(http|https|ftp)\:\/\/[a-zA-Z0-9\-\.\/]*"/>

different dynamic keyboards displayed based on input type.

<input name="telephone" type="tel" />

Custom Keyboard. No validation.

<input 
id="phone" name="phone" type="tel"
placeholder="415-555-1212" 
pattern="\d{3}\-\d{3}\-\d{4}"/>

<input  name="address" type="email" />

Keyboard changes & validation!

<input id="email" name="email" 
type="email"
placeholder="you@domain.com" 
multiple />

<input name="n" type="number"/>
            

<input id="nickels" 
type="number"
placeholder="0, 5, 10 …"  
pattern="[0-9]*[05]" 
min="0" 
max="1000" 
step="5" />

<input id="range" name="range" 
type="range" 
placeholder="0 to 10" 
pattern="[0-9]|10" 
min="0" max="10" 
step="1"/>

<input id="range" name="range" 
type="range"  
min="0" max="100" 
step="5"/>

<input 
id="search" 
name="search" 
type="search" 
placeholder="search terms"/>
  

• Safari
• Chrome
• Opera
• Firefox
• IE10 b2

<input id="DOB" name="DOB" 
 type="date" 
 placeholder="YYYY-MM-DD" 
 pattern="\d{4}\-\d{2}\-\d{2}"
 min="1900-01-01" /> 

Date of Birth:

<input  name="time" id="time"
 type="time" 
 min="09:00" 
 max="17:00"
 step="900" 
 placeholder="12:00" 
 required /> 

Apointment time:

• Safari
• Chrome
• Opera
• Firefox
• IE

var validityObject = document.getElementById['form_control'].validity;

• validityObject.valueMissing
• validityObject.typeMismatch
• validityObject.patternMismatch
• validityObject.tooLong
• validityObject.rangeUnderflow
• validityObject.rangeOverflow
• validityObject.stepMismatch
• validityObject.valid
• validityObject.customError

function validate() {
  var input = document.getElementById('b');
  var validityState_object = input.validity;
  if(validityState_object.valueMissing) {
     input.setCustomValidity('Please set an age (required)');	
  } else if (input.rangeUnderflow) {
    input.setCustomValidity('Your value is too low');
  } else if (input.rangeOverflow) {
    input.setCustomValidity('Your value is too high');
  } else {
    input.setCustomValidity('');
  }
}          
          

::-webkit-validation-bubble  {}
::-webkit-validation-bubble-arrow-clipper  {}
::-webkit-validation-bubble-arrow {}
::-webkit-validation-bubble-message {}

<label for="url">Web Address: </label>
<input id="url" type="url" name="url1" placeholder="www.domain.com" required  list="datalist1" />
  
<datalist id="datalist1">
  <option value="http://www.standardista.com" />
  <option value="http://www.oreilly.com" />
  <option value="http://www.evotech.net" />
</datalist>

Web Address:

Web Address2:

• Safari
• Chrome
• Opera
• Firefox
• IE10 b2

<meter value=75 min=0 max=100 >75% full</meter>

Gas tank: 75% full

<progress>loading...</progress>

Please wait: loading...

<progress value="75" max="100">75% complete</progress>

Download is: 75% complete

<output>

• Safari
• Chrome
• Opera
• Firefox
• IE
• in Webkit nightly. FF/IE10 does progress but not meter

<meter value=90 min=0 max=100 low=20 high=98>75%</meter>

Gas tank: 90% full

<meter value=75 min=0 max=100 low=20 high=98>75%</meter>

Grades: 75%

<meter min=50 max=200 low=90 high=119 optimum=100></meter>

Blood Pressure: 125

<input type="text" x-webkit-speech />