Tammy Butow

HTML5 Fantastic Forms For Mobile Web

Transcript

1. HTML5 Fantastic Forms For Mobile Web @tammybutow Wednesday, 23 May 12
2. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo Wednesday, 23 May 12
3. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms Wednesday, 23 May 12
4. http://www.flickr.com/photos/58847482@N03/5597332989/ Wednesday, 23 May 12
5. Fantastic Forms @tammybutow @tammybutow @zcorpan @zcorpan Simon Pieters Simon Pieters http://dev.w3.org/html5/html4-differences/ Anne Van Kesteren Anne Van Kesteren @annevk @annevk Wednesday, 23 May 12
6. Fantastic Forms @tammybutow @tammybutow Image of the people Mark Pilgrim Mark Pilgrim http://diveintohtml5.info/forms.html Wednesday, 23 May 12
7. @miketaylr miketaylr.com @miketaylr miketaylr.com http://miketaylr.com/ Wednesday, 23 May 12
8. http://miketaylr.com/code/input-type-attr.html @miketaylr miketaylr.com @miketaylr miketaylr.com Wednesday, 23 May 12
9. Fantastic Forms @tammybutow @tammybutow http://modernizr.com/ Wednesday, 23 May 12
10. https://github.com/ryanseddon/H5F @ryanseddon thecssninja.com @ryanseddon thecssninja.com Wednesday, 23 May 12
11. Fantastic Forms @tammybutow @tammybutow ‣ 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 Why use HTML5 form features? Wednesday, 23 May 12
12. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo Wednesday, 23 May 12
13. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms Wednesday, 23 May 12
14. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
15. Fantastic Forms @tammybutow @tammybutow Making Stuff Is Fun A mobile web form to collect stuff Wednesday, 23 May 12
16. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo Wednesday, 23 May 12
17. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms Wednesday, 23 May 12
18. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
19. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 03 Syntax Review 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
20. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
21. Fantastic Forms @tammybutow @tammybutow ‣ index.html Required Fields Wednesday, 23 May 12
22. Fantastic Forms @tammybutow @tammybutow ‣ index.html Required Fields Wednesday, 23 May 12
23. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Required Fields Wednesday, 23 May 12
24. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Required Fields Wednesday, 23 May 12
25. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
26. Fantastic Forms @tammybutow @tammybutow ‣ index.html Date Picker Wednesday, 23 May 12
27. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Date Picker Wednesday, 23 May 12
28. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Launch date:</label> <input type="date" id="launch_date" name="launch_date" required> </form> Date Picker Wednesday, 23 May 12
29. Fantastic Forms @tammybutow @tammybutow ‣ index.html Date Picker FC-compliant email validation Wednesday, 23 May 12
30. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
31. Fantastic Forms @tammybutow @tammybutow ‣ index.html Placeholder Text Wednesday, 23 May 12
32. Fantastic Forms @tammybutow @tammybutow ‣ index.html Placeholder Text Wednesday, 23 May 12
33. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Full name:</label> <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required> </form> Placeholder Text Wednesday, 23 May 12
34. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Full name:</label> <input type="text" id="full_name" name="full_name" placeholder="Jane Doe" required> </form> Placeholder Text Wednesday, 23 May 12
35. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Custom Keyboards Validation Wednesday, 23 May 12
36. Fantastic Forms @tammybutow @tammybutow Number ‣ index.html Wednesday, 23 May 12
37. Fantastic Forms @tammybutow @tammybutow ‣ index.html Number Wednesday, 23 May 12
38. Fantastic Forms @tammybutow @tammybutow ‣ 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> Number Wednesday, 23 May 12
39. Fantastic Forms @tammybutow @tammybutow ‣ 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> Number Wednesday, 23 May 12
40. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
41. Fantastic Forms @tammybutow @tammybutow Number Slider ‣ index.html Wednesday, 23 May 12
42. Fantastic Forms @tammybutow @tammybutow ‣ index.html Number Slider Wednesday, 23 May 12
43. Fantastic Forms @tammybutow @tammybutow ‣ 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> Number Slider Wednesday, 23 May 12
44. Fantastic Forms @tammybutow @tammybutow ‣ 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> Number Slider Wednesday, 23 May 12
45. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
46. Fantastic Forms @tammybutow @tammybutow Standard Number Tel URL ‣ index.html Wednesday, 23 May 12
47. Fantastic Forms @tammybutow @tammybutow ‣ index.html Custom Keyboards Wednesday, 23 May 12
48. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>URL:</label> <input type="url" id=“url” name=“url” placeholder = “http:// yourproject.com” required> </form> Custom Keyboards Wednesday, 23 May 12
49. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>URL:</label> <input type="url" id=“url” name=“url” placeholder = “http:// yourproject.com” required> </form> Custom Keyboards Wednesday, 23 May 12
50. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
51. Fantastic Forms @tammybutow @tammybutow Autofocus ‣ index.html Wednesday, 23 May 12
52. Fantastic Forms @tammybutow @tammybutow ‣ index.html Autofocus Wednesday, 23 May 12
53. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Full name:</label> <input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus> </form> Autofocus Wednesday, 23 May 12
54. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Full name:</label> <input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus> </form> Autofocus Wednesday, 23 May 12
55. Fantastic Forms @tammybutow @tammybutow Fantastic Forms for Mobile Web HTML5 Forms Number Slider Placeholder Text Date Picker Autofocus Required Fields Number Spinbox Custom Keyboards Validation Wednesday, 23 May 12
56. Fantastic Forms @tammybutow @tammybutow Validation ‣ index.html The browser automatically offers RFC-compliant email validation, even if scripting is disabled. Wednesday, 23 May 12
57. Fantastic Forms @tammybutow @tammybutow ‣ index.html Validation Wednesday, 23 May 12
58. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Email address:</label> <input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required> </form> Validation Wednesday, 23 May 12
59. Fantastic Forms @tammybutow @tammybutow ‣ index.html <form> <label>Email address:</label> <input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required> </form> Validation Wednesday, 23 May 12
60. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo Wednesday, 23 May 12
61. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms Wednesday, 23 May 12
62. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
63. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 03 Syntax Review 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
64. Fantastic Forms @tammybutow @tammybutow 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms Fantastic Forms For Mobile Web 02 Live Demo 04 Code Challenge 03 Syntax Review 01 Why you should know about HTML5 Forms 02 Live Demo Wednesday, 23 May 12
65. Fantastic Forms @tammybutow @tammybutow 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 ☺ Wednesday, 23 May 12
66. @tammybutow HTML5 Fantastic Forms For Mobile Web Wednesday, 23 May 12