SlideServe
Télécharger Obtenir Pro
Menu
Accueil Pro
Préférences
ApparenceLight Aide et commentaires
© SlideServe · v2026

Falling in Love with Forms [BDConf 2014]

AaronGustafson avatar
AaronGustafson
155 diapositives · 1.6K Views · Apr 28, 2017

Forms. Without them, the web would not be what it is today, but they are challenging from a markup and styling standpoint.

In this session, we will explore forms from top to bottom, examining how they work and how their components can be incorporated with other elements to maximize accessibility, improve semantics, and allow for more flexible styling. You’ll get to see the complete picture with forms, including

* new HTML5 field types;
* validation, error messages & formatting hints;
* how to mark up and style forms for the greatest flexibility in responsive designs; and
* best practices for enhancing forms with JavaScript.

#Falling in Love with Forms #[BDConf 2014]
Falling in Love with Forms [BDConf 2014] - slide 1
01 / 155Falling in Love with Forms [BDConf 2014]
1 / 17

Télécharger la présentation

Falling in Love with Forms [BDConf 2014]
Une image / un lien ci-dessous est fourni (tel quel) pour télécharger la présentation

Politique de téléchargement : le contenu du site vous est fourni TEL QUEL pour votre information et votre usage personnel ; il ne peut être vendu, concédé sous licence ni partagé sur d’autres sites sans l’accord de son auteur.Le contenu vous est fourni TEL QUEL, pour votre information et votre usage personnel uniquement. Téléchargez la présentation en cliquant sur ce lien. Lors du téléchargement, si vous ne parvenez pas à télécharger une présentation, l’éditeur a peut-être supprimé le fichier de son serveur.Pendant le téléchargement, si vous ne parvenez pas à obtenir une présentation, le fichier a peut-être été supprimé par l’éditeur.

F I N

Plus de contenu associé

Transcription de la présentation

  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. can Forms suck.

  8. don’t have to Forms suck.

  9. can Forms suck. a lot less

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

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

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

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

  14. webstandardssherpa.com/contact

  15. webstandardssherpa.com/contact

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

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

  18. FALLING IN LOVE WITH FORMS Pattern 1: Label & Field Your Name <input 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 <label>Your Name</label> <input name=“full_name”>

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

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

  23. 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.

  24. 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. !

  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 type=“email” 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 type=“email” id=“email” name=“email” required> We will only use your email address to respond to your message. !

  28. Browsers ignore what they don’t understand

  29. Progressive Enhancement

  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> <em> We will only use your email address to respond to your message. </em>

  31. 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>

  32. 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>

  33. 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> Screen Reader: Chrome Vox

  34. 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>

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

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

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

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

  39. FALLING IN LOVE WITH FORMS Buttons <button type="submit" value=“basic"> <h3>Basic Plan</h3> <p>You get 20 <abbr title="gigabytes">GB</abbr> of storage and a single domain name for <strong>$2.99 <abbr title=“per month”>/mo</abbr></strong></p> </button>

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

  41. 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>

  42. 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>

  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 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>

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

  46. 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>

  47. 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” >

  48. 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” >

  49. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">

  50. FALLING IN LOVE WITH FORMS Requesting numbers <label for="test">What is 1 + 1?</label> <input id="test" type=“number" name="test">