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!
