Estelle Weyl · Standardista.com · @estellevw ·Press and to change slides.

Hit 4 to toggle on and off note taking (stored in your browser with local storage

If you can't see the slides, hit cmd+_ or cmd++ . The <meter> breaks the layout


Web Forms 2.0

New form elements &
Attributes in HTML5

estelle.github.com/forms

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
* disabled on iPad, iPhone, iPod Touch

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">
Support: Android 3.0 browser, Chrome for Android (0.16), FF Mobile 10.0

<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**
  • * pseudoclasses can target with :disabled and :checked
  • ** align is deprecated. Use CSS.

New <input> attributes in HTML5

  • form
  • readonly
  • autocomplete
  • autofocus
  • list
  • pattern
  • required*
  • placeholder
  • multiple
  • list
  • min
  • max
  • step
  • dirname
  • formaction
  • formenctype
  • formmethod
  • formtarget
  • formnovalidate
  • * pseudoclass :required can target.
  • Others: Use attribute selector to target

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:

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"/>
  • Firefox
  • Safari
  • Chrome
  • Opera
  • 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}"
  required
  autofocus
  type="text"/>


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

  • Safari
  • Chrome
  • Opera
  • Firefox
  • 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
  • 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"/>

only one element can have the autofocus attribute

$('[autofocus]').last().focus();
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10
  • Not in mobile webkit

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

  • 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 iPhone/iOS
  • 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 New input types in HTML5

  • color
  • url
  • tel
  • email
  • number
  • range
  • search
  • date
  • datetime
  • datetime-local
  • month
  • time
  • week
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10

Mixed browser support for all of these.

color

<input name="color"
type="color" />
<input id="color" name="color"
type="color" 
placeholder="#FFFFFF"
pattern="#[0-9A-Fa-f]{6}"
required />
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10
  • Supported in BB

Note: defaults to #000000

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

URL input type in iphone and android

different dynamic keyboards displayed based on input type.

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
  • IE10
multiple' emails separated with commas

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" />
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE10
  • 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:
  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

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

  • Safari
  • Chrome
  • Opera
  • Firefox
  • IE

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

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