Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Photo – Space Lab, Vancouver, Canada (Clint Moroz)
From Native form elements (http://nativeformelements.com/) - Joshua Jenkins
More Information: https://en.wikipedia.org/wiki/Kaieteur_Falls
<span>3</span>
<button type="button">3</button>
<span class="clearButton"><img src="files/images/icons/icon-
clear-key-touch.png" width="17" height="18" alt="Clear"></spa...
<input type="reset" class="clearButton" value="Clear Number">
<span class="deleteNumber"><img src="files/images/icons/icon-
del-key-touch.png" width="17" height="18" alt="<"></span>
<button type="button" class="deleteNumber">Delete
Numbers</button>
<a href="#" class="callButton ui-link"></a>
<input type="submit" name="call" value="Call Number"
class="callButton">
JS - Add aria-live=“polite” when the full number (10 characters)
has been reached – indicating number is ready to be called
.ui-countryselector input[type="radio"]
+ label ~ div.columns {
overflow: hidden;
float: none;
position: absolute;
clip: r...
If a region is not selected,
hide related countries
If a region is selected,
show related countries
.ui-countryselector input[type="radio"]:checked
+ label ~ div.columns {
position: static;
height: auto;
}
.ui-countryselector input[type="radio"] + label ~ div.columns { overflow: auto; }
.ui-countryselector input[type="radio"]:checked + label ~ div.columns { float: left; height: 384px; }
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
The Secret Life of Forms
Upcoming SlideShare
Loading in …5
×

of

The Secret Life of Forms Slide 1 The Secret Life of Forms Slide 2 The Secret Life of Forms Slide 3 The Secret Life of Forms Slide 4 The Secret Life of Forms Slide 5 The Secret Life of Forms Slide 6 The Secret Life of Forms Slide 7 The Secret Life of Forms Slide 8 The Secret Life of Forms Slide 9 The Secret Life of Forms Slide 10 The Secret Life of Forms Slide 11 The Secret Life of Forms Slide 12 The Secret Life of Forms Slide 13 The Secret Life of Forms Slide 14 The Secret Life of Forms Slide 15 The Secret Life of Forms Slide 16 The Secret Life of Forms Slide 17 The Secret Life of Forms Slide 18 The Secret Life of Forms Slide 19 The Secret Life of Forms Slide 20 The Secret Life of Forms Slide 21 The Secret Life of Forms Slide 22 The Secret Life of Forms Slide 23 The Secret Life of Forms Slide 24 The Secret Life of Forms Slide 25 The Secret Life of Forms Slide 26 The Secret Life of Forms Slide 27 The Secret Life of Forms Slide 28 The Secret Life of Forms Slide 29 The Secret Life of Forms Slide 30 The Secret Life of Forms Slide 31 The Secret Life of Forms Slide 32 The Secret Life of Forms Slide 33 The Secret Life of Forms Slide 34 The Secret Life of Forms Slide 35 The Secret Life of Forms Slide 36 The Secret Life of Forms Slide 37 The Secret Life of Forms Slide 38 The Secret Life of Forms Slide 39 The Secret Life of Forms Slide 40 The Secret Life of Forms Slide 41 The Secret Life of Forms Slide 42 The Secret Life of Forms Slide 43 The Secret Life of Forms Slide 44 The Secret Life of Forms Slide 45 The Secret Life of Forms Slide 46 The Secret Life of Forms Slide 47 The Secret Life of Forms Slide 48 The Secret Life of Forms Slide 49 The Secret Life of Forms Slide 50 The Secret Life of Forms Slide 51 The Secret Life of Forms Slide 52 The Secret Life of Forms Slide 53 The Secret Life of Forms Slide 54 The Secret Life of Forms Slide 55 The Secret Life of Forms Slide 56 The Secret Life of Forms Slide 57 The Secret Life of Forms Slide 58 The Secret Life of Forms Slide 59 The Secret Life of Forms Slide 60 The Secret Life of Forms Slide 61 The Secret Life of Forms Slide 62 The Secret Life of Forms Slide 63 The Secret Life of Forms Slide 64 The Secret Life of Forms Slide 65 The Secret Life of Forms Slide 66 The Secret Life of Forms Slide 67 The Secret Life of Forms Slide 68 The Secret Life of Forms Slide 69 The Secret Life of Forms Slide 70 The Secret Life of Forms Slide 71 The Secret Life of Forms Slide 72 The Secret Life of Forms Slide 73 The Secret Life of Forms Slide 74 The Secret Life of Forms Slide 75 The Secret Life of Forms Slide 76 The Secret Life of Forms Slide 77 The Secret Life of Forms Slide 78 The Secret Life of Forms Slide 79 The Secret Life of Forms Slide 80 The Secret Life of Forms Slide 81 The Secret Life of Forms Slide 82 The Secret Life of Forms Slide 83 The Secret Life of Forms Slide 84 The Secret Life of Forms Slide 85 The Secret Life of Forms Slide 86 The Secret Life of Forms Slide 87 The Secret Life of Forms Slide 88 The Secret Life of Forms Slide 89 The Secret Life of Forms Slide 90 The Secret Life of Forms Slide 91 The Secret Life of Forms Slide 92 The Secret Life of Forms Slide 93 The Secret Life of Forms Slide 94 The Secret Life of Forms Slide 95 The Secret Life of Forms Slide 96 The Secret Life of Forms Slide 97 The Secret Life of Forms Slide 98 The Secret Life of Forms Slide 99 The Secret Life of Forms Slide 100 The Secret Life of Forms Slide 101
Upcoming SlideShare
Communicating animation slides
Next
Download to read offline and view in fullscreen.

1 Like

Share

Download to read offline

The Secret Life of Forms

Download to read offline

Using CSS [and HTML5/ARIA] to enhance the user experience of forms (w/case studies)

Presentation for 2016 CSS Dev Conference in San Antonio, TX (October 17, 2016)

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

The Secret Life of Forms

  1. 1. Photo – Space Lab, Vancouver, Canada (Clint Moroz)
  2. 2. From Native form elements (http://nativeformelements.com/) - Joshua Jenkins
  3. 3. More Information: https://en.wikipedia.org/wiki/Kaieteur_Falls
  4. 4. <span>3</span>
  5. 5. <button type="button">3</button>
  6. 6. <span class="clearButton"><img src="files/images/icons/icon- clear-key-touch.png" width="17" height="18" alt="Clear"></span>
  7. 7. <input type="reset" class="clearButton" value="Clear Number">
  8. 8. <span class="deleteNumber"><img src="files/images/icons/icon- del-key-touch.png" width="17" height="18" alt="<"></span>
  9. 9. <button type="button" class="deleteNumber">Delete Numbers</button>
  10. 10. <a href="#" class="callButton ui-link"></a>
  11. 11. <input type="submit" name="call" value="Call Number" class="callButton">
  12. 12. JS - Add aria-live=“polite” when the full number (10 characters) has been reached – indicating number is ready to be called
  13. 13. .ui-countryselector input[type="radio"] + label ~ div.columns { overflow: hidden; float: none; position: absolute; clip: rect(0,0,0,0); width: 100%; height: 0; margin: 0; padding: 0; }
  14. 14. If a region is not selected, hide related countries
  15. 15. If a region is selected, show related countries
  16. 16. .ui-countryselector input[type="radio"]:checked + label ~ div.columns { position: static; height: auto; }
  17. 17. .ui-countryselector input[type="radio"] + label ~ div.columns { overflow: auto; }
  18. 18. .ui-countryselector input[type="radio"]:checked + label ~ div.columns { float: left; height: 384px; }
  • temberature

    Aug. 31, 2017

Using CSS [and HTML5/ARIA] to enhance the user experience of forms (w/case studies) Presentation for 2016 CSS Dev Conference in San Antonio, TX (October 17, 2016)

Views

Total views

23,713

On Slideshare

0

From embeds

0

Number of embeds

22,490

Actions

Downloads

3

Shares

0

Comments

0

Likes

1

×