Html5 Forms in Squiz Matrix - Dave Letorey


Published on

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:

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Html5 Forms in Squiz Matrix - Dave Letorey

  1. 1. HTML 5 Forms in Matrix!Dave Letorey – Squiz UK!@dletorey!
  2. 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. 3. HTML5 Input Types!•  All of these new input types, if not supported by the users browser, will fallback to Text input fields!
  4. 4. Creating an HTML 5 form inMatrix!•  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. 5. Changing the Default Output!•  This is Achieved using Page Contents & Thank You bodycopies!
  6. 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. 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. 8. Required attribute!•  HTML5 form inputs have a required attribute!•  The browser will then add a message if it is not filled in!
  9. 9. Required syntax!<input type="text" required />! or! <input type="text" required="required" />!!HTML5 does not require the quotes!
  10. 10. Autofocus attribute!This attribute will give focus to an inputfield when the page is loaded!Syntax:! <input type="text" autofocus />!!
  11. 11. Placeholder attribute!The placeholder attribute is used topopulate text that gives the user a hintas to what to do. !The text is removed when the field hasfocus!
  12. 12. Placeholder syntax! <input type="text" placeholder="http://" />!!
  13. 13. Pattern attribute!The input types: email, number, url, etcare really baked-in regular expression!Using the pattern attribute you can addregular expressions to any input type!Syntax:! <input type="text" pattern="[reg-exp]" />!
  14. 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. 15. Step attribute!For input types that involve numbers,e.g. you can make them step inincrements!Syntax:! <input type="range" min="0" max="100" step="5" />!!
  16. 16. Styling Input fields with CSS!CSS3 introduced 2 new pseudo classes forform inputs!input:valid {! !background-color: green;!}!input:invalid {! !background-color: red;!}!!
  17. 17. Why should I care about this?!•  It makes it easier for users to fill in your forms!•  It makes forms much more accessible!
  18. 18. Input Support! supported !partial!not supported!
  19. 19. Attribute Support! supported !partial!not supported! !
  20. 20. type="date"!
  21. 21. type="time"!
  22. 22. type="range"!
  23. 23. type="email"!
  24. 24. Modernizr + Polyfills!•  Modernizr is a JavaScript file that detects if a browser supports the new features! •!•  Polyfills can be used to add these new input fields and attributes into browser that do not support them!
  25. 25. Modernizr + Polyfills!•  Polyfills:! •  webforms2 westonruter/webforms2! •  html5forms dulac/html5Forms.js!
  26. 26. Resources!HTML5 forms!•  Form Input types:!•  HTML 5 rocks:!•  Dive into HTML 5:!•  Introducing HTML5:!
  27. 27. Resources!Support!•  Can I Use:!•  Current Support:!
  28. 28. Resources!Polyfills!•  Progressively enhancing HTML5 forms:!•  Making HTML5 & CSS3 work with Polyfills & Shims:!•  Using modernizr & html5forms:!•  Modernizr:!•  html5forms.js:!•  webforms2:!
  29. 29. Resources!Example!•  Example you can play with:!