Falling in Love with Forms [Øredev 2015] - PowerPoint PPT Presentation

falling in love with forms n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Falling in Love with Forms [Øredev 2015] PowerPoint Presentation
Download Presentation
Falling in Love with Forms [Øredev 2015]

play fullscreen
1 / 130
Falling in Love with Forms [Øredev 2015]
68 Views
Download Presentation
AaronGustafson
Download Presentation

Falling in Love with Forms [Øredev 2015]

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. FALLING IN LOVE WITH FORMS Aaron Gustafson @AaronGustafson slideshare.net/AaronGustafson

  2. Forms suck.

  3. They are incredibly tedious to create.

  4. They are undeniably
 annoying to fill in.

  5. They can be frustrating to test.

  6. They require logic.

  7. Forms suck.

  8. can Forms suck.

  9. don’t have to Forms suck.

  10. can Forms suck. a lot less

  11. Forms can be… easy to build predictable effortless to use and accessible

  12. It’s all in how you look at them.

  13. HELPFUL HINT Break large,
 complex forms into smaller, simpler, reusable patterns

  14. Code Examples http://is.gd/ag_forms

  15. How about a
 common example? Let’s look
 at a contact form.

  16. webstandardssherpa.com/contact

  17. webstandardssherpa.com/contact

  18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input type=“text” name=“full_name”>

  19. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>

  20. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”/>

  21. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input name=“full_name”>

  22. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label>Your Name</label> <input name=“full_name”>

  23. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name”>

  24. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field <label for=“full_name”>Your Name</label> <input id=“full_name” name=“full_name” required>

  25. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.

  26. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.

  27. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input id=“email” name=“email” required> We will only use your email address to respond to your message.

  28. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.

  29. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.

  30. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message.

  31. Browsers ignore what they don’t understand

  32. Progressive Enhancement

  33. SHAMELESS PLUG! WEB DESIGN ADAPTIVE Crafting Rich Experiences with Progressive Enhancement by Aaron Gustafson Foreword by Jeremy Keith Available
 Dec 6th Read Free at http://is.gd/awd1st SECOND EDITION

  34. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em> We will only use your email address to respond to your message. </em>

  35. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required> <em class=“note”> We will only use your email address to respond to your message. </em>

  36. FALLING IN LOVE WITH FORMS Pattern 2: Label, Field & Note <label for=“email”>Your Email</label> <input type=“email” id=“email” name=“email” required aria-describedby=“email-note”> <em class=“note” id=“email-note”> We will only use your email address to respond to your message. </em>

  37. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“subject”>Purpose of Your Message</label> <select id="subject" name="subject"> <option>Question/Comment</option> <option>Article Error</option> <option>Website Bug Report</option> <option>Ask the Sherpas a question</option> </select>

  38. FALLING IN LOVE WITH FORMS Rinse & Repeat <label for=“message”>Your Message</label> <textarea id="message" name="message"></textarea>

  39. FALLING IN LOVE WITH FORMS Buttons <input type=“submit” value=“Send My Message”>

  40. FALLING IN LOVE WITH FORMS Buttons <button type=“submit”>Send My Message</button>

  41. HELPFUL HINT A button element can contain pretty much anything (within reason)

  42. That new email field looks cool, can we see more of that fancy HTML5 stuff?

  43. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  44. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  45. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  46. FALLING IN LOVE WITH FORMS Requesting URLs <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  47. FALLING IN LOVE WITH FORMS Providing hints <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  48. HELPFUL HINT Placeholders are just that: placeholders for actual content. They are not labels!

  49. FALLING IN LOVE WITH FORMS Providing hints <label for=“url”>URL</label> <input type=“url” id=“url” name=“url” required aria-describedby=“url-note” placeholder=“http://www.yoursite.com/specific-page#anchored-section” > <em class=“note” id=“url-note”> Please provide the URL for the specific page that includes the area you want reviewed. </em>

  50. FALLING IN LOVE WITH FORMS Requesting phone numbers <label for="preferred_phone">Preferred Phone</label> <input type="tel" id="preferred_phone" name=“preferred_phone” placeholder="ex. 123-456-7890” >