HTML5 Fantastic Forms for Mobile Web

1. HTML5 Fantastic Forms For Mobile Web @tammybutow Wednesday, 23 May 12

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

4. http://www.ﬂickr.com/photos/58847482@N03/5597332989/ Wednesday, 23 May 12

5. @zcorpan Simon Pieters @annevk Anne Van Kesteren Fantastic Forms @tammybutow http://dev.w3.org/html5/html4-diﬀerences/ 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

15. Making Stuﬀ Is Fun A mobile web form to collect stuﬀ 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

23. Required Fields ‣ 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

24. Required Fields ‣ 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

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

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

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

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

48. Custom Keyboards ‣ index.html <form> <label>URL:</label> <input type="url" id=“url” name=“url” placeholder = “http:// yourproject.com” required> </form> Fantastic Forms @tammybutow Wednesday, 23 May 12

49. Custom Keyboards ‣ index.html <form> <label>URL:</label> <input type="url" id=“url” name=“url” placeholder = “http:// yourproject.com” required> </form> 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

53. Autofocus ‣ index.html <form> <label>Full name:</label> <input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus> </form> Fantastic Forms @tammybutow Wednesday, 23 May 12

54. Autofocus ‣ index.html <form> <label>Full name:</label> <input type=“text” id= “full_name” name= “full_name” placeholder= “Jane Doe” required autofocus> </form> 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

58. Validation ‣ index.html <form> <label>Email address:</label> <input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required> </form> Fantastic Forms @tammybutow Wednesday, 23 May 12

59. Validation ‣ index.html <form> <label>Email address:</label> <input type="email" id=“email_addr” name=“email_addr” placeholder = “janedoe@mail.com” required> </form> 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 diﬀerent input types and attributes ‣ Share it • Tweet the link/screenshot and add the #WDC12 hashtag ‣ Have fun ☺ Fantastic Forms @tammybutow Wednesday, 23 May 12

66. HTML5 Fantastic Forms For Mobile Web @tammybutow Wednesday, 23 May 12

HTML5 Fantastic Forms for Mobile Web

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Empfohlen

Empfohlen (20)

HTML5 Fantastic Forms for Mobile Web