Hello. This is my slidedeck from Web Directions Code 2012 in Melbourne Australia. You can see more about the conference here:
I'm on Twitter: @tammybutow
Here's the links from the slides :)
http://dev.w3.org/html5/html4-differences/
http://diveintohtml5.info/forms.html
http://miketaylr.com/
http://miketaylr.com/code/input-type-attr.html
http://modernizr.com
https://github.com/ryanseddon/H5F
Thanks! :)
2. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
3. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
5. @zcorpan
Simon Pieters
@annevk
Anne Van Kesteren
Fantastic Forms @tammybutow
http://dev.w3.org/html5/html4-differences/
Wednesday, 23 May 12
6. Image of the people
Mark Pilgrim
Fantastic Forms @tammybutow
http://diveintohtml5.info/forms.html
Wednesday, 23 May 12
7. @miketaylr
miketaylr.com
http://miketaylr.com/
Wednesday, 23 May 12
8. @miketaylr
miketaylr.com
http://miketaylr.com/code/input-type-attr.html
Wednesday, 23 May 12
9. Fantastic Forms @tammybutow
http://modernizr.com/
Wednesday, 23 May 12
10. @ryanseddon
thecssninja.com
https://github.com/ryanseddon/H5F
Wednesday, 23 May 12
11. Why use HTML5 form features?
‣ Future Proof
• Great for mobile and tablet devices
• Form features degrade gracefully in every browser
• You can use Modernizr to create JavaScript fallbacks
‣ Customer Friendly
• Great for people on-the-go
• Makes it easier for people to know what data you need
• Good for slow connections on mobile
Fantastic Forms @tammybutow
Wednesday, 23 May 12
12. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
13. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
14. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
15. Making Stuff Is Fun
A mobile web form to collect stuff
Fantastic Forms @tammybutow
Wednesday, 23 May 12
16. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
17. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
18. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
19. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
20. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
21. Required Fields
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
22. Required Fields
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
25. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
26. Date Picker
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
27. Date Picker
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
28. Date Picker
‣ index.html
<form>
<label>Launch date:</label>
<input type="date" id="launch_date" name="launch_date" required>
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
29. Date Picker
‣ index.html
Fantastic Forms @tammybutow
FC-compliant email validation
Wednesday, 23 May 12
30. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
31. Placeholder Text
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
32. Placeholder Text
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
33. Placeholder Text
‣ index.html
<form>
<label>Full name:</label>
<input type="text" id="full_name" name="full_name"
placeholder="Jane Doe" required>
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
34. Placeholder Text
‣ index.html
<form>
<label>Full name:</label>
<input type="text" id="full_name" name="full_name"
placeholder="Jane Doe" required>
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
35. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
36. Number
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
37. Number
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
38. Number
‣ index.html
<form>
<label>How many team members:</label>
<input type="number" id=“project_range” name=“project_range”
min="1" max="10" step="1" value="1">
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
39. Number
‣ index.html
<form>
<label>How many team members:</label>
<input type="number" id=“project_range” name=“project_range”
min="1" max="10" step="1" value="1">
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
40. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
41. Number Slider
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
42. Number Slider
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
43. Number Slider
‣ index.html
<form>
<label>How complete is your project:</label>
<input type="range" id=“project_range” name=“project_range”
min=“1” max=“100” step=“10” value=“10” >
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
44. Number Slider
‣ index.html
<form>
<label>How complete is your project:</label>
<input type="range" id=“project_range” name=“project_range”
min=“1” max=“100” step=“10” value=“10” >
</form>
Fantastic Forms @tammybutow
Wednesday, 23 May 12
45. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
46. Standard Number Tel URL
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
47. Custom Keyboards
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
50. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
51. Autofocus
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
52. Autofocus
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
55. Fantastic Forms for Mobile Web
Required Fields
Date Picker
Placeholder Text
HTML5 Number Spinbox
Forms Number Slider
Custom Keyboards
Autofocus
Validation
Fantastic Forms @tammybutow
Wednesday, 23 May 12
56. Validation
‣ index.html
The browser automatically
offers RFC-compliant
email validation, even if
scripting is disabled.
Fantastic Forms @tammybutow
Wednesday, 23 May 12
57. Validation
‣ index.html
Fantastic Forms @tammybutow
Wednesday, 23 May 12
60. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
61. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
62. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
63. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
64. Fantastic Forms For Mobile Web
01 Why you should know about HTML5 Forms
02 Live Demo
03 Syntax Review
04 Code Challenge
Fantastic Forms @tammybutow
Wednesday, 23 May 12
65. Code Challenge
‣ Create a mobile web page
• You could try out the initializr reponsive web template (On GITHUB)
‣ Add a HTML5 Form
• Try out different input types and attributes
‣ Share it
• Tweet the link/screenshot and add the #WDC12 hashtag
‣ Have fun ☺
Fantastic Forms @tammybutow
Wednesday, 23 May 12