Html5 Forms in Squiz Matrix - Dave Letorey

HTML 5 Forms in Matrix!Dave Letorey – Squiz UK!@dletorey!

HTML5 Form Input Types!

•  There are a number of new input types in the HTML 5 spec!•  Date!•  Time!•  Month!•  Week!•  Datetime-local!•  Email!

•  Number!•  Range!•  Tel!•  URL!•  Color!•  Search!

HTML5 Input Types!

•  All of these new input types, if not supported by the users browser, will fallback to Text input fields!

Creating an HTML 5 form in Matrix!•  As these new input types are not in

Matrix, these all need to be added as Text field type!•  This is good as the fallback type is a

text type!

Changing the Default Output!

•  This is Achieved using Page Contents & Thank You bodycopies!

Page Contents code!<input name="qxxx:qy" id="xxx:qy"type="zzz" />!

Where: !•  xxx is the assetid for the form/section!•  y is the question number!•  zzz is the input type e.g. email, text, tel,

date, time, etc.!

Thank you code!

zzz: %response_xxx_qy%!Where: !•  xxx is the assetid for the form/

section!•  y is the question number!•  zzz is the name of your question.!

Required attribute!

•  HTML5 form inputs have a required attribute!•  The browser will then add a message

if it is not filled in!

Required syntax!

<input type="text" required />!or!

<input type="text" required="required" />!

!HTML5 does not require the quotes!

Autofocus attribute!

This attribute will give focus to an input field when the page is loaded!Syntax:!

<input type="text" autofocus />!

!

Placeholder attribute!

The placeholder attribute is used to populate text that gives the user a hint as to what to do. !The text is removed when the field has focus!

Placeholder syntax!

<input type="text" placeholder="http://www.example.com" />!

!

Pattern attribute!

The input types: email, number, url, etc are really baked-in regular expression!Using the pattern attribute you can add regular expressions to any input type!Syntax:!

<input type="text" pattern="[reg-exp]" />!

Min Max attribute!!

A Min & Max can be set on Date, Time, Number, Range, etc input types!Syntax:!

<input type="date" min="1969-08-26"

max="2012-07-4" />!!

Step attribute!

For input types that involve numbers, e.g. you can make them step in increments!Syntax:!<input type="range" min="0"

max="100" step="5" />!!

Styling Input fields with CSS!

CSS3 introduced 2 new pseudo classes for form inputs!input:valid {!!background-color: green;!}!input:invalid {!!background-color: red;!}!!

Why should I care about this?!

•  It makes it easier for users to fill in your forms!•  It makes forms much more accessible!

Input Support!

supported !partial!not supported!

Attribute Support!

supported !partial!not supported!http://wufoo.com/html5 !

type="date"!

type="time"!

type="range"!

type="email"!

Modernizr + Polyfills!

•  Modernizr is a JavaScript file that detects if a browser supports the new features!•  http://modernizr.com/!

•  Polyfills can be used to add these new input fields and attributes into browser that do not support them!

Modernizr + Polyfills!

•  Polyfills:!•  webforms2 https://github.com/westonruter/webforms2!

•  html5formshttps://github.com/zoltan-dulac/html5Forms.js!

Resources!HTML5 forms!•  Form Input types:http://bit.ly/sfusers01!

•  HTML 5 rocks:http://bit.ly/sfusers02!

•  Dive into HTML 5:http://bit.ly/sfusers03!

•  Introducing HTML5:http://bit.ly/sfusers04!

Resources!

Support!•  Can I Use:http://bit.ly/sfusers05!

•  Current Support:http://bit.ly/sfusers06!

Resources!Polyfills!•  Progressively enhancing HTML5 forms:http://bit.ly/sfusers07!

•  Making HTML5 & CSS3 work with Polyfills & Shims:http://bit.ly/sfusers08!

•  Using modernizr & html5forms:http://bit.ly/sfusers09!

•  Modernizr:http://bit.ly/sfusers10!

•  html5forms.js:http://bit.ly/sfusers11!

•  webforms2:http://bit.ly/sfusers12!

Resources!

Example!•  Example you can play with:http://bit.ly/sfusers13!