Web Forms 2.0

New form elements &
Attributes in HTML5

estelle.github.com/forms

About Me

Estelle Weyl

www.standardista.com

@estellevw

@standardista

HTML Form

HTML5 Form

HTML5 Form on Steroids

Why?

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

Why?

custom error message date picker in iOS

HTML 4 <Input> Types

button
checkbox
file*
hidden
image
password
radio
reset
submit
text

File input type

<input> types new in HTML5

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

<input> attributes in HTML 4

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

New <input> attributes in HTML5

form
readonly
autocomplete
autofocus
list
pattern
required*
placeholder
multiple
list
min
max
step
dirname
formaction
formenctype
formmethod
formtarget
formnovalidate

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="inputName" 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:

Radio Button 1
Radio Button 2
Checkbox
Password

CSS UI Pseudo Classes

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

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

placeholder attribute

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

pattern attribute

<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:
Color: (#[a-fA-F0-9]{6})

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
Safari
Chrome
Opera
IE10
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])

autofocus attribute

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

form attribute

<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

type attribute

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

Appearance?

HTML4 values of the type attribute

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

13 New input types in HTML5

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

color

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

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

url

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

Safari
Chrome
Opera
Firefox
IE10
Yes iOS, no Android

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\-\.\/]*"/>

url

different dynamic keyboards displayed based on input type.

tel

<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}"/>

email

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

Keyboard changes & validation!

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

Email:

number

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

'number' specific attributes:

min
max
step

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

Number divisible by 5:

Supporting browsers have enhanced UI
Safari associates :valid, but doesn't validate.

range

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

Current Value:

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

input[type=range]{-webkit-appearance: slider-vertical;}

Current Value:

search

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

Safari
Chrome
Opera
Firefox
IE10

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

date & time

date (2012-06-09)
datetime (2012-06-09 19:00)
datetime-local(2012-06-09 19:00)
month (2010-09)
time (19:00)
week (2012-W23)

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

Date of Birth:

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

Appointment time:

HTML5 Form Element Attributes

required
min
max
step
placeholder
pattern
autofocus
autocomplete
form
list

type
readonly
disabled
maxlength
size

Validation

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

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

Styling

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

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>

Web Address:

Web Address2:

Safari
Chrome
Opera
Firefox
IE10

<meter>, <progress> & <output>

<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

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

Speech Input

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