Although forms make the Web go around, they are often ugly due to the generic way in which browsers display them, not to mention irritating to our site's users when they don't work as expected. Christopher Schmitt walks through the problem CSS properties, Web form elements and points fingers at the browsers getting it wrong. Then he shows you how to make a decent form out of Band-Aids and broken browsers.

1. CSS & WEB FORM ELEMENTS
Christopher Schmitt | http://twitter.com/teleject

4. http://brightbytes.com/phineasgage/index.html

9. ( )=
/ ( )

12. FORM ELEMENTS
• Checkboxes • Select:
• Input: • Multiple Items
• File • Single Item
• Radio • Submit Button
• Text • Textarea

13. CSS PROPERTIES
• background-color • height
• background-image • letter-spacing
• border • line-height
• border-color • margin
• border-style • padding
• border-width • text-align
• color • text-decoration
• font-family • text-indent
• font-size • width
• font-weight • word-spacing

14. 7.2 5 8.5 1.5 3 1
5.5 9 2.0 4b
6 3.0
7
8b2
7.2 9 1.5 2
2.0 3
3.0 4b

15. 3,520
screengrabs

20. RADIO BUTTONS

21. CSS HEIGHT
FF 2
FF 2
FF 3
Chrome 1

22. CSS WIDTH
FF 3
FF 3
Safari 3
Safari 3
Safari 4b
Safari 4b

23. CSS TEXT INDENT
Chrome 1
Safari 4b
Safari 4b
Opera 9
Opera 9

24. CSS BACKGROUND COLOR
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

25. CSS BACKGROUND IMG
Firefox 2
Firefox 2
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

27. CSS & TEXTAREA
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

28. CSS & INPUT TEXT FIELDS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

29. CSS & SUBMIT BUTTON
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

30. CSS & SELECT BOXES (ONE)
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

31. CSS & SELECT BOXES (MULTI)
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

32. CSS & FILE UPLOADS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

33. CSS & CHECKBOXES
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

34. CSS & RADIO BUTTONS
20
15
10
5
0
IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b
Yes No Somewhat N/A

35. Radio Check File Select Select Input Text
Buttons Boxes Uploads (Multi) (One) Text Area

37. CSS PROPERTIES
100
75
50
25
0
height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing
Y N S N/A

38. CSS PROPERTIES
100
75
50
25
0
bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight
Y N S N/A

39. Text Indent Font Family Height Font Size Margin
Text Border Color Color Border Style Background
Decoration Color
Font Weight Background Letter Spacing
Image Width
Word Spacing Padding
Border

40. Radio Check File Select Select Input Text
Buttons Boxes Uploads (Multi) (One) Text Area
Text Indent Font Family Height Font Size Margin
Text Border Color Color Border Style Background
Decoration Color
Font Weight Background Letter Spacing
Image Width
Word Spacing Padding
Border

41. MacFF3
MacS4b WinOp9
WinS3 IE7 IE6 Chrome WinS4b
WinFF3 IE8b2
MacS3
Radio Check File Select Select Input Text
Buttons Boxes Uploads (Multi) (One) Text Area
Text Indent Font Family Height Font Size Margin
Text Border Color Color Border Style Background
Decoration Color
Font Weight Background Letter Spacing
Image Width
Word Spacing Padding
Border

49. LET BROWSER VENDORS
KNOW WHAT YOU WANT
• Internet Explorer
• http://blogs.msdn.com/ie/contact.aspx
• Opera
• http://my.opera.com/community/forums/forum.dml?id=24
• http://groups.google.com/group/opera.wishlist/topics
• Safari
• http://lists.webkit.org/mailman/listinfo/webkit-dev
• Google Chrome
• http://groups.google.com/group/chromium-dev

50. LET BROWSER VENDORS
KNOW WHAT YOU WANT
• Web Form Elements Design Quiz
• Part 1: http://tr.im/lp2k
• Part 2: http://tr.im/lp2g
• http://www.WebFormElements.com/
• 3,500 form element screen captures
• HTML form element look-up tables (free):
• http://oreilly.com/catalog/9780596527419/appendixd/appd.pdf

52. HOW TO DESIGN FOR
SERIOUSLY MESSY FORMS

53. SURRENDER

55. ZERO OUT CSS PROPERTIES
• Zero out Borders
• Zero out Padding
• Zero Margins
• Clear out Background Images, Color, etc.
• Then
• wrap INPUT element with DIVs and bring in the control

57. SLOW WAY TO ZERO
<input type="submit" value="submit" class="submit" />

58. FASTER WAY TO ZERO
input { /* type selector */
border: 1px solid black;
}
.submit { /* class selector */
border: 1px solid black;
}

59. FASTER WAY TO ZERO
input[type="text"] {
border: 1px solid #177F75;
font-family:Verdana, Arial, Helvetica, sans-serif;
}
input[type="submit"] {
margin-left: 201px;
background-color: #00CC00;
}
input[type="text"], select {
display: block;
float: left;
margin-bottom: 7px;
}

60. FASTER WAY TO ZERO
label[for="byear"], label[for="bdate"] {
position: absolute;
left: -999px;
width: 990px;
}

61. DROP SHADOWS,
ROUNDED CORNERS,
OH MY!

62. BASIC FORM
<form id="webmailForm" action="/-/">
<fieldset>
<label for="email">Email</label>
<input id="email" type="text" value="a.graham@example.com" />
</fieldset>
<fieldset>
<label for="message">Message</label>
<textarea id="comment">Mr. Watson -- come here.</textarea>
</fieldset>
</form>

64. BASIC FORM
<form id="webmailForm" action="/-/">
<fieldset>
<label for="email">Email</label>
<input id="email" type="text" value="a.graham@example.com" />
</fieldset>
<fieldset>
<label for="message">Message</label>
<textarea id="comment">Mr. Watson -- come here.</textarea>
</fieldset>
</form>

66. BASIC FORM
#webmailForm fieldset {
margin: 0 0 15px 0;
border: 0;
}
#webmailForm fieldset label {
display: block;
margin: 0 0 5px 0;
font-weight: bold;
}

68. COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {
width: 550px;
padding: 10px;
font-size: 1.2em;
border: none; /* zero out */
background: #fcf;
}

70. COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {
width: 550px;
padding: 10px;
font-size: 1.2em;
border: none; /* zero out */
background: #fcf;
background-image: url(form-bkgd2.png);
background-repeat: repeat-x;
}

72. COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {
width: 550px;
padding: 10px;
font-size: 1.2em;
border: none; /* zero out */
background: #fcf;
background-image: url(form-bkgd2.png);
background-repeat: repeat-x;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
}

74. COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {
width: 550px;
padding: 10px;
font-size: 1.2em;
border: none; /* zero out */
background: #fcf;
background-image: url(form-bkgd2.png);
background-repeat: repeat-x;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
border-radius: 7px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
}

76. OTHER CSS3 PROPERTIES

77. ENABLED & DISABLED
FORM ELEMENTS
<div>Enabled:<br />
<input name="enabled" type="text" value="Hello,
world!" />
</div>
<div>Disabled:<br />
<input name="disabled" type="text" value="Hello,
world!" disabled="disabled" />
</div>

78. ENABLED & DISABLED
FORM ELEMENTS

79. ENABLED & DISABLED
FORM ELEMENTS
input[type="text"]:disabled{
opacity: .7;
filter: alpha(opacity=70); /* cough */
}

80. ENABLED & DISABLED
FORM ELEMENTS
input[type="text"]:disabled:after {
content: "(disabled - do not use)";
font-size: .9em;
color: #CCCCCC;
display: block;
}

81. ENABLED & DISABLED
FORM ELEMENTS

82. ENABLED & DISABLED
FORM ELEMENTS
option:enabled{
color: #9F393F;
}
input:enabled{
background: #21B6A8;
color:#9F393F;
}

83. ENABLED & DISABLED
FORM ELEMENTS

84. CHECKED RADIO
FORM ELEMENTS
input[type="radio"]:checked{
background: #9F393F;
}

85. CHECKED RADIO
FORM ELEMENTS

86. THAT’S IT...

87. TAKE AWAYS
• Designing for forms is hard for HTML+CSS
• Even the same browser, different platform render Web forms
differently
• To
help you discern the safety of CSS on a Web form, use
WebFormElements.com
• Reviewed which browsers are most hazardous

88. TAKE AWAYS
• Reviewed which CSS properties are supported the most.
• Reviewed what high-profile sites are doing to design for forms:
Nothing.
• Call to action!
• Letbrowser vendors hear you or they won’t care to fix the
problem.
• With HTML5 form elements, problem is going to get worse.

89. ...AND STOP ADAPTING.

90. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
@teleject on twitter

91. CREATIVE COMMONS CITATIONS
http://www.flickr.com/photos/lanuiop/2234239588/
http://www.flickr.com/photos/gaetanlee/1947424580/
http://www.flickr.com/photos/evapro/312900784/
http://www.flickr.com/photos/kekka/799060449/
http://www.flickr.com/photos/hiddedevries/2594048276/
http://www.flickr.com/photos/tomsaint/2992217972/