HTML5 Fantastic Forms For Mobile Web                            @tammybutowWednesday, 23 May 12
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
http://www.flickr.com/photos/58847482@N03/5597332989/Wednesday, 23 May 12
@zcorpan                                                   Simon Pieters                                                  ...
Image of the people                                              Mark Pilgrim       Fantastic Forms                 @tammy...
@miketaylr                        miketaylr.comhttp://miketaylr.com/Wednesday, 23 May 12
@miketaylr                                                 miketaylr.comhttp://miketaylr.com/code/input-type-attr.htmlWedn...
Fantastic Forms   @tammybutowhttp://modernizr.com/Wednesday, 23 May 12
@ryanseddon                                        thecssninja.com    https://github.com/ryanseddon/H5FWednesday, 23 May 12
Why use HTML5 form features?          ‣ Future Proof                • Great for mobile and tablet devices                •...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Making Stuff Is Fun       A mobile web form to collect stuff       Fantastic Forms                     @tammybutowWednesday,...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Required Fields       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Required Fields       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Required Fields       ‣ index.html            <form>            <label>Launch date:</label>            <input type="date" ...
Required Fields       ‣ index.html            <form>            <label>Launch date:</label>            <input type="date" ...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Date Picker       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Date Picker       ‣ index.html            <form>            <label>Launch date:</label>            <input type="date" id="...
Date Picker       ‣ index.html            <form>            <label>Launch date:</label>            <input type="date" id="...
Date Picker       ‣ index.html       Fantastic Forms                                   @tammybutow                        ...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Placeholder Text       ‣ index.html       Fantastic Forms    @tammybutowWednesday, 23 May 12
Placeholder Text       ‣ index.html       Fantastic Forms    @tammybutowWednesday, 23 May 12
Placeholder Text       ‣ index.html            <form>            <label>Full name:</label>            <input type="text" i...
Placeholder Text       ‣ index.html            <form>            <label>Full name:</label>            <input type="text" i...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Number       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Number       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Number       ‣ index.html           <form>           <label>How many team members:</label>           <input type="number" ...
Number       ‣ index.html           <form>           <label>How many team members:</label>           <input type="number" ...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Number Slider       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Number Slider       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Number Slider       ‣ index.html           <form>           <label>How complete is your project:</label>           <input ...
Number Slider       ‣ index.html           <form>           <label>How complete is your project:</label>           <input ...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Standard        Number   Tel         URL       ‣ index.html       Fantastic Forms                  @tammybutowWednesday, 2...
Custom Keyboards       ‣ index.html       Fantastic Forms    @tammybutowWednesday, 23 May 12
Custom Keyboards       ‣ index.html           <form>           <label>URL:</label>           <input type="url" id=“url” na...
Custom Keyboards       ‣ index.html           <form>           <label>URL:</label>           <input type="url" id=“url” na...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Autofocus       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Autofocus       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Autofocus       ‣ index.html           <form>           <label>Full name:</label>           <input type=“text” id= “full_n...
Autofocus       ‣ index.html           <form>           <label>Full name:</label>           <input type=“text” id= “full_n...
Fantastic Forms for Mobile Web                                         Required Fields                                    ...
Validation       ‣ index.html    The browser automatically      offers RFC-compliant     email validation, even if       s...
Validation       ‣ index.html       Fantastic Forms   @tammybutowWednesday, 23 May 12
Validation       ‣ index.html           <form>           <label>Email address:</label>           <input type="email" id=“e...
Validation       ‣ index.html           <form>           <label>Email address:</label>           <input type="email" id=“e...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Fantastic Forms For Mobile Web        01 Why you should know about HTML5 Forms        02 Live Demo        03 Syntax Review...
Code Challenge          ‣ Create a mobile web page                • You could try out the initializr reponsive web templat...
HTML5 Fantastic Forms For Mobile Web                            @tammybutowWednesday, 23 May 12
Upcoming SlideShare
Loading in …5
×

HTML5 Fantastic Forms for Mobile Web

6,965 views

Published on

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! :)

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
6,965
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Fantastic Forms for Mobile Web

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

×