HTML5 Form Inputs in Matrix
•
0 likes•982 views
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
Recommended
More Related Content
Similar to HTML5 Form Inputs in Matrix
Similar to HTML5 Form Inputs in Matrix (20)
More from Squiz
More from Squiz (20)
Recently uploaded
Recently uploaded (20)
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!
- 9. Required syntax! <input type="text" required />! or! <input type="text" required="required" />! ! HTML5 does not require the quotes!
- 10. Autofocus attribute! This attribute will give focus to an input field when the page is loaded! Syntax:! <input type="text" autofocus />! !
- 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!
- 12. Placeholder syntax! <input type="text" placeholder="http:// www.example.com" />! !
- 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!
- 18. Input Support! supported !partial!not supported!
- 19. Attribute Support! supported !partial!not supported! http://wufoo.com/html5 !
- 20. type="date"!
- 21. type="time"!
- 22. type="range"!
- 23. type="email"!
- 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!
- 25. Modernizr + Polyfills! • Polyfills:! • webforms2 https://github.com/ westonruter/webforms2! • html5forms https://github.com/zoltan- dulac/html5Forms.js!
- 26. 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!
- 27. Resources! Support! • Can I Use: http://bit.ly/sfusers05! • Current Support: http://bit.ly/sfusers06!
- 28. 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!
- 29. Resources! Example! • Example you can play with: http://bit.ly/sfusers13!