How to take advantage of the new Form Input types in HTML5 with Squiz Matrix.
Presented by Dave Letorey at the Squiz and Funnelback European User Summit held in London on the 4th July, 2012.
For more information: http://www.squiz.co.uk
WordPress Websites for Engineers: Elevate Your Brand
HTML5 Form Inputs in Matrix
1. HTML 5 Forms in Matrix!
Dave Letorey – Squiz UK!
@dletorey!
2. HTML5 Form Input Types!
• There are a number of new input
types in the HTML 5 spec!
• Date! • Number!
• Time! • Range!
• Month! • Tel!
• Week! • URL!
• Datetime-local! • Color!
• Email! • Search!
3. HTML5 Input Types!
• All of these new input types, if not
supported by the users browser, will
fallback to Text input fields!
4. 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!
5. Changing the Default Output!
• This is Achieved using Page Contents
& Thank You bodycopies!
6. 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.!
7. 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.!
8. Required attribute!
• HTML5 form inputs have a required
attribute!
• The browser will then add a message
if it is not filled in!
11. 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!
13. 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]" />!
14. 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" />!
!
15. 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" />!
!
16. Styling Input fields with CSS!
CSS3 introduced 2 new pseudo classes for
form inputs!
input:valid {!
!background-color: green;!
}!
input:invalid {!
!background-color: red;!
}!
!
17. Why should I care about this?!
• It makes it easier for users to fill in
your forms!
• It makes forms much more accessible!
24. 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!