HTML5 Web Forms

HTML form elements
and attributes

estelle.github.io/forms

@estellevw

HTML Form

HTML5 Form

Fantastic Features

  • Backwards Compatible
  • Correct Dynamic Keypad
  • Native Validation
  • Error Messaging
  • User Experience Improvements
  • Accessibility

Keypads

tel input type on iphone url input type on iphone and android email input type on iphone

UI & Validation

Chrome, Opera and Firefox custom validation messages user will receive different messages depending on the attributes and the current value date picker in iOS

<input> types

HTML

  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text

HTML5

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

File input type

  • Regular file upload
    <input type="file"></input>
  • capture=camera
    <input type="file" accept="image/*;capture=camera">
  • capture=camcorder
    <input type="file" accept="video/*;capture=camcorder">
  • capture=microphone
    <input type="file" accept="audio/*;capture=microphone">
Mobile: Android 3+, Chrome 16+, Safari 6+, Firefox 10+, Blackberry 10+

<input> attributes in HTML 4

  • name
  • :disabled
  • type
  • maxlength
  • readonly
  • size
  • value
  • alt
  • src
  • height
  • width
  • :checked
  • align**

    FORMS
  • action
  • method
  • accept-charset
  • enctype
  • target

New <input> attributes in HTML5

  • autocomplete
  • spellcheck
  • autofocus
  • pattern
  • :required
  • placeholder
  • dirname
  • multiple
  • list
  • min
  • max
  • step
  • low
  • high
  • optimum
  • form
  • minlength
  • novalidate
  • formnovalidate
  • formaction
  • formenctype
  • formmethod
  • formtarget

Other form elements

Old Elements

  • <form>
  • <fieldset>
  • <legend>
  • <textarea>
  • <label>
  • <select>
  • <button>
  • <option>
  • <optgroup>

New Elements

  • <datalist>
  • <output>
  • <meter>
  • <progress>
  • <keygen>

Labels

<label for="inputID">Label: </label>
<input id="inputID" name="inputName" type="text" />

or

<label>Label: <input name="nm" type="text" /></label>

The value of the for attribute should match the value of the input's id attribute


Click on the label to activate the form element:

ARIA Accessibilty

  • aria-labeledby="otherElement idValues"
  • aria-label="Read by Screen Reader
  • <label for="idOfFormControl> (or implicit label)
  • placeholder
  • title
  • not accessible
<label for="telephone">Telephone Number</label>
  <input type="tel" id="telephone" placeholder="(XXX) XXX-XXXX"
  aria-describedby="10-digit phone number">
  <span class="hint" id="hint">10-digit phone number>/span>
10-digit phone number

Layout

<form action="#" class="example">
<ul>
  <li>
    <label for="name">Name</label>
    <input type="text" class="classed" required placeholder=" Name" id="name"/>
  </li>
  <li>
    <label for="email">Email</label>
    <input type="email"  class="classed"  multiple placeholder="email addresses" required id="email"/>
  </li>
  <li>
    <label for="dob">Birthday</label>
    <input type="date"  class="classed"  required placeholder="YYYY-MM-DD" id="dob"/>
  </li>
  <li>
    <label for="age">Age</label>
    <input type="number"  class="classed"  required min="21" max="105" id="age"/>
  </li>
  <li>
    <label for="phone">Phone</label>
    <input type="tel" class="classed"  pattern="\d{3}-\d{3}-\d{4}" placeholder="XXX-XXX-XXXX" id="phone"/>
  </li>
  <li>
    <label for="range">Satisfaction</label>
    <input type="range" id="range" min="0" max="10" step="1" list="rangelist"  />
  </li>
  <li>
    <label for="tweet">Twitter Handle</label>
    <input type="text"  class="classed"  pattern="@\w{1,18}" placeholder="@twitter_handle" required id="tweet"/>
  </li>
  <li>
    <input type="submit" value="submit">
  </li>
</ul>
    <datalist id="rangelist">
      <option value=7>7</option>
      <option value=8>8</option>
      <option value=9>9</option>
      <option value=10>10</option>
    </datalist>
</form>

HTML5 Form

placeholder attribute

<label for="inputID">Label: </label>
<input id="inputID" name="inputName"
  placeholder="placeholder text"
  type="text"/>
  • Firefox 4
  • Safari 4
  • Chrome 10
  • Opera 11
  • IE10
  • Android 2.3, iOS5

pattern attribute

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


(#[a-fA-F0-9]{6})

  • Safari 5
  • Chrome 10
  • Opera 11
  • Firefox 4
  • IE10
  • UI only in mobile/safari

required attribute

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

input[required] {border: 1px dashed #f00;}  or 
input:required {border: 1px dashed #f00;}
  • Firefox 6
  • Safari 5
  • Chrome 6
  • Opera 10
  • IE 10
  • UI only in mobile/safari

FF: "Please fill out this field"

Targeting in CSS without Touching HTML!

UI Pseudo Classes

  • :default
  • :valid
  • :invalid
  • :in-range
  • :out-of-range
  • :required
  • :optional
  • :read-only
  • :read-write

Attributes instead

  • input[type=checkbox]
  • input[required]
  • input:not([required])






CSS UI Selectors

input {
  background: transparent no-repeat top right;
  border: 0 dotted currentColor;
  padding: 5px 30px;
}
input:required {
  background-image: url('../img/required.png');
}
input:focus:invalid {
  background-image: url('../img/invalid.png');
}
input:focus:valid {
  background-image: url('../img/valid.png');
}

CSS UI Pseudo Classes

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

input:focus:invalid { background-color: pink;}
input:valid { background-color: lightGreen }
input:required {border: 2px dotted red;}
input:optional {border: 2px solid green;}
input:-webkit-autofill {
  background-color: #FAFFBD;
  background-image: none;
  color: #000;     
}

autofocus attribute

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

only one element can have the autofocus attribute

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

form attribute

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

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

  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

Test the form attribute

type attribute

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

  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE
  • All browsers understand the type attribute, but not all values

HTML4 values of the type attribute

  • button does nothing. use button or js
  • checkbox unchecked not submitted with form
  • file disabled in iOS5 and earlier
  • hidden
  • image works like <button>
  • password use post, not get
  • radio
  • reset can lead to bad user experience
  • submit
  • text default
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

All browsers understand these values.

13 12 9 New input types in HTML5

  • color
  • url
  • tel
  • email
  • number
  • range
  • search
  • date
  • time
  • datetime
  • datetime-local
  • month
  • week
  • Safari 8
  • Chrome 20
  • Opera 11
  • Firefox 29
  • IE 10
  • Android 4.4. Mixed support in IE10+/Safari 8.

list attribute and <datalist>

<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>

Test out <datalist> & list

  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE 10

color

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

Reds: with list / datalist:

  • Safari 8
  • Chrome
  • Opera
  • Firefox 29
  • IE11
  • Supported in BB10 & A4.4. Not in iOS8

Note: defaults to #000000, lowercase.

url

URL input type in iphone and android
    <input  name="website" type="url" />    
    Any prefix (http:// or even g:// accepted)
    <input
    id="website"
    name="url"
    type="url"      
    placeholder="http://www.domain.com"
    pattern="(http|https|ftp)\:\/\/[a-zA-Z0-9\-\.\/]*"/>
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE 10
  • kinda in iOS and Android

tel

tel input type on iphone
<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}"/>

() -
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10
  • supported on mobile (keyboard)

email

email input type on iphone
<input name="address" type="email"> 

Keyboard changes & validation!

<input id="email" name="email"
type="email"  
placeholder="you@domain.com"
multiple />
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE 10
multiple' emails separated with commas. A4, Saf 5, iOS3.1 don't validate

number

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

'number/range/date' specific attributes: min, max, step

<input id="nickels" type="number" 
min="0" max="1000" step="5"
placeholder="0, 5, 10 …" />
<input type="number" 
max="0" step="any" />
  • Safari 5+
  • Chrome
  • Opera
  • Firefox 29
  • IE10

range

<input type="range" min="0" max="10" step="1"/>
Current Value:
<input type="range"  min="0" max="100" step="5"/>
Current Value:
  • min
  • max
  • step
  • value
  • list
  • orient (FF only)
  • Safari
  • Chrome
  • Opera
  • Firefox 23
  • IE

Numbers and Range with List



<input type=range list=lst min=0 max=10>
<input type=number list=lst min=0 max=10>

<datalist id="lst">
  <option>7</option>
  <option>8</option>
  <option value=9></option>
  <option value=10></option>
</datalist>

multiple / vertical ranges

<input type=range value="3,6" multiple />
<input type=range orient="vertical"> // FF
input[type=range]{
  width: 20px; height: 200px;
  -webkit-appearance: slider-vertical;
  writing-mode: bt-lr; /* IE */
}

search

<input
id="search"  
name="search"
type="search">
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10

Note: Dynamic keyboards will show "search" instead of "go"

Warning: if you stylize the input, the 'delete' may not show

date & time

  • Safari7
  • Chrome
  • Opera
  • Firefox32
  • IE11

Works in iOS5+, Android 4.4

when are dates useful?

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

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

HTML5 Works in IE8

input masking

HTML5 form control Attributes

  • name
  • disabled*
  • type
  • maxlength
  • readonly
  • size
  • value
  • alt
  • src
  • height
  • width
  • checked*
  • autocomplete
  • spellcheck
  • autofocus
  • pattern
  • required*
  • placeholder
  • dirname
  • multiple
  • list
  • min
  • max
  • step
  • low
  • high
  • optimum
  • form
  • minlength
  • novalidate
  • formnovalidate
  • formaction
  • formenctype
  • formmethod
  • formtarget

Validation

var validityObject =
  document.getElementById['control'].validity;
  • validityObject.valueMissing
  • validityObject.typeMismatch
  • validityObject.patternMismatch
  • validityObject.tooLong
  • validityObject.rangeUnderflow
  • validityObject.rangeOverflow
  • validityObject.stepMismatch
  • validityObject.valid
  • validityObject.customError

Custom Error message

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('');
  }
}

Custome Error message

<input type="tel" name="tel"
placeholder="xxx-xxx-xxxx"
title="please enter a phone number with the
pattern of XXX-XXX-XXXX"
pattern="\d{3}\-\d{3}\-\d{4}"
required />
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

validityObject.patternMismatch

<meter>

<meter value=1 min=0 max=4 low=1 high=3>1 of 4</meter>
  • 0.5 of 4
  • 1.5 of 4
  • 2.5 of 4
  • 3 of 4
  • 4 of 4
<meter value=61 min=0 max=100 low=73 high=87 optimum=100>D-</meter>
  • D-
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

<meter> explained

Mo' <meter> (& <output>)

<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

<output></output>

<progress>

<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

  • Safari 5/7
  • Chrome 6
  • Opera 10
  • Firefox 6
  • IE 10


HTML5 Web Forms

HTML form elements
and attributes

estelle.github.io/forms

Resources