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

UI & Validation

Chrome, Opera and Firefox custom validation messages

user will receive different messages depending on the attributes and the current value

<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

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

Radio Button 1
Radio Button 2
Checkbox
Password

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>

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

pattern attribute

<label for="inputID">Label: </label>
<input id="inputID" name="inputName"
  placeholder="\w{6,9}"
  pattern="\w{6,9}"
  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 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"/>

Has Focus?

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

Appearance?

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

13 12 9 New input types in HTML5

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

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: Test out <datalist> & list

Web Address2:

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:

url

<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

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

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

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)

Numbers and Range with List

Range:

Number:

<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

date (2015-06-09)
~~datetime (2015-06-09 19:00)~~
datetime-local(2015-06-09 19:00)
month (2015-09)
time (19:00)
week (2015-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 Works in IE8

Credit Card Expiration Month
Zip Code
Canadian Zip Code
Telephone
Credit Card Number

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

@estellevw
estelle.github.io
wufoo.com/html5 - more details on everything covered here
quirksmode.org - mobile browsers
codepen.io/estelle/pen/LVQLRq - Codepen of input masking
github.io/estelle/input-masking - input-masking Github Respository