Notes for Forms

By Scott Granneman & Jans Carton

Find the presentation at http://www.granneman.com/presentations/

## Slide 6

http://www.google.com

## Slide 7

http://www.amazon.com

## Slide 8

http://en.wikipedia.org

## Slide 9

http://www.facebook.com

## Slide 15

http://codepen.io/websanity/pen/pLzmH?editors=100

## Slide 16

http://codepen.io/websanity/pen/pLzmH?editors=100

## Slide 25

These are not very useful for validation—they’re for semantics

## Slide 28

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-form-element

## Slide 33

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-fieldset-element

## Slide 34

http://codepen.io/websanity/pen/pjbfG?editors=100

## Slide 35

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-legend-element

## Slide 36

http://codepen.io/websanity/pen/tgjmn?editors=100

## Slide 37

http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#the-label-element

## Slide 39

http://codepen.io/websanity/pen/xqkvg?editors=100

## Slide 41

http://codepen.io/websanity/pen/ogsyF

## Slide 43

http://codepen.io/websanity/pen/AczKq?editors=100

## Slide 45

If you’re going to have labels on the left, you need to gutter-align them

## Slide 46

Cramming everything on one line makes it difficult to read

## Slide 53

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-textarea-element

## Slide 54

http://codepen.io/websanity/pen/oeiCm?editors=110

## Slide 56

http://codepen.io/websanity/pen/oeiCm?editors=110

## Slide 57

http://www.w3.org/TR/css3-ui/#resize0

## Slide 58

http://codepen.io/websanity/pen/lGDcC?editors=110 to test the various values

## Slide 60

http://codepen.io/websanity/pen/EpdsH?editors=100

## Slide 62

http://codepen.io/websanity/pen/EpdsH?editors=100

## Slide 64

http://codepen.io/websanity/pen/EpdsH?editors=100

## Slide 65

http://www.facebook.com

## Slide 68

http://www.w3.org/html/wg/drafts/html/master/semantics.html#the-placeholder-attribute

## Slide 69

http://codepen.io/websanity/pen/myyNvg?editors=100

## Slide 71

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#text-(type=text)-state-and-search-state-(type=search)

## Slide 72

http://codepen.io/websanity/pen/GBhEc

## Slide 73

Don’t use <input type="text"> when you should use <textarea>

## Slide 74

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#password-state-(type=password)

## Slide 75

http://codepen.io/websanity/pen/JxKfr?editors=100

## Slide 78

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#radio-button-state-(type=radio)

## Slide 79

http://codepen.io/websanity/pen/Bvpoq?editors=100

## Slide 80

Don’t let radio button labels wrap

## Slide 81

Don’t cram radio buttons together

## Slide 82

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#checkbox-state-(type=checkbox)

## Slide 83

http://codepen.io/websanity/pen/wJfrs?editors=100

## Slide 84

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-select-element

## Slide 85

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-option-element

## Slide 86

http://codepen.io/websanity/pen/uxvGy

## Slide 89

http://codepen.io/websanity/pen/qeJCL

## Slide 91

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#file-upload-state-(type=file)

## Slide 93

http://codepen.io/websanity/pen/GqvFx?editors=110

## Slide 97

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element

## Slide 98

http://codepen.io/websanity/pen/BHnvg?editors=100

## Slide 104

Next then Previous?!

## Slide 105

http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-button-element

## Slide 106

http://codepen.io/websanity/pen/rdgai

## Slide 109

http://www.whatwg.org/specs/web-apps/current-work/multipage/states-of-the-type-attribute.html#hidden-state-(type=hidden)

## Slide 110

http://codepen.io/websanity/pen/kErlx

## Slide 112

For more info, see https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/UIControl.html

## Slide 114

http://www.lukew.com/ff/entry.asp?1950

## Slide 116

http://www.lukew.com/ff/entry.asp?1950

## Slide 119

http://www.lukew.com/ff/entry.asp?1950

## Slide 120

OpenTable app

http://www.lukew.com/ff/entry.asp?1950

## Slide 121

OpenTable app

http://www.lukew.com/ff/entry.asp?1950

## Slide 133

Column 1: Poland, Russia, Brazil, Italy, Germany

Column 2: Nigeria, Kenya, Pakistan, Japan, China

## Slide 136

https://www.habitatstl.org/index.php/supportus/howtodonate/donateonline/

## Slide 137

https://www.habitatstl.org/index.php/supportus/howtodonate/donateonline/