Upload
christopher-schmitt
View
2.257
Download
4
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
CSS & WEB FORM ELEMENTSChristopher Schmitt | http://twitter.com/teleject
http://brightbytes.com/phineasgage/index.html
( )= ( )/
• Checkboxes
• Input:
• File
• Radio
• Text
• Select:
• Multiple Items
• Single Item
• Submit Button
• Textarea
FORM ELEMENTS
CSS PROPERTIES
• background-color• background-image• border• border-color• border-style• border-width• color• font-family• font-size• font-weight
• height• letter-spacing• line-height• margin• padding• text-align• text-decoration• text-indent• width• word-spacing
7.2 55.567
8b2
8.59
1.52.03.0
34b
1
7.2 9 1.52.03.0
234b
3,520screengrabs
RADIO BUTTONS
CSS HEIGHT
FF 2
FF 2
FF 3
Chrome 1
CSS WIDTHFF 3
FF 3
Safari 3
Safari 3
Safari 4b
Safari 4b
CSS TEXT INDENTChrome 1
Safari 4b
Safari 4b
Opera 9
Opera 9
CSS BACKGROUND COLORIE 6
IE 7
IE 8b2
Opera 9
Opera 9
CSS BACKGROUND IMGFirefox 2
Firefox 2
IE 6
IE 7
IE 8b2
Opera 9
Opera 9
0
5
10
15
20
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
CSS & TEXTAREA
0
5
10
15
20
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
CSS & INPUT TEXT FIELDS
0
5
10
15
20
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
CSS & SUBMIT BUTTON
0
5
10
15
20
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
CSS & SELECT BOXES (ONE)
0
5
10
15
20
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
CSS & SELECT BOXES (MULTI)
0
5
10
15
20
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
CSS & FILE UPLOADS
0
5
10
15
20
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
CSS & CHECKBOXES
0
5
10
15
20
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
CSS & RADIO BUTTONS
Radio Buttons
Check Boxes
File Uploads
Select(Multi)
Select(One)
Input Text
Text Area
0
25
50
75
100
height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing
Y N S N/A
CSS PROPERTIES
0
25
50
75
100
bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight
Y N S N/A
CSS PROPERTIES
Text Indent
Text Decoration
Font Family
Border Color
Font Weight
Word Spacing
Height
Color
Background Image
Border
Font Size
Border Style
Letter Spacing
Padding
Margin
Background Color
Width
Text Indent
Text Decoration
Font Family
Border Color
Font Weight
Word Spacing
Height
Color
Background Image
Border
Font Size
Border Style
Letter Spacing
Padding
Margin
Background Color
Width
Radio Buttons
Check Boxes
File Uploads
Select(Multi)
Select(One)
Input Text
Text Area
Text Indent
Text Decoration
Font Family
Border Color
Font Weight
Word Spacing
Height
Color
Background Image
Border
Font Size
Border Style
Letter Spacing
Padding
Margin
Background Color
Width
Radio Buttons
Check Boxes
File Uploads
Select(Multi)
Select(One)
Input Text
Text Area
MacFF3MacS4b
IE7 IE6 ChromeWinOp9
WinS4bWinS3
MacS3WinFF3 IE8b2
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
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
HOW TO DESIGN FOR SERIOUSLY MESSY FORMS
SURRENDER
• 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
ZERO OUT CSS PROPERTIES
SLOW WAY TO ZERO
<input type="submit" value="submit" class="submit" />
FASTER WAY TO ZERO
input { /* type selector */ border: 1px solid black;}.submit { /* class selector */ border: 1px solid black;}
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;}
FASTER WAY TO ZERO
label[for="byear"], label[for="bdate"] { position: absolute; left: -999px; width: 990px;}
DROP SHADOWS, ROUNDED CORNERS,
OH MY!
BASIC FORM<form id="webmailForm" action="/-/"> <fieldset> <label for="email">Email</label> <input id="email" type="text" value="[email protected]" /> </fieldset> <fieldset> <label for="message">Message</label> <textarea id="comment">Mr. Watson -- come here.</textarea> </fieldset></form>
BASIC FORM<form id="webmailForm" action="/-/"> <fieldset> <label for="email">Email</label> <input id="email" type="text" value="[email protected]" /> </fieldset> <fieldset> <label for="message">Message</label> <textarea id="comment">Mr. Watson -- come here.</textarea> </fieldset></form>
BASIC FORM
#webmailForm fieldset { margin: 0 0 15px 0; border: 0;}#webmailForm fieldset label { display: block; margin: 0 0 5px 0; font-weight: bold;}
COOL FORM
#webmailForm fieldset input,#webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; }
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; }
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; }
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; }
OTHER CSS3 PROPERTIES
ENABLED & DISABLEDFORM 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>
ENABLED & DISABLEDFORM ELEMENTS
ENABLED & DISABLEDFORM ELEMENTS
input[type="text"]:disabled{ opacity: .7; filter : alpha(opacity=70); /* cough */}
ENABLED & DISABLEDFORM ELEMENTS
input[type="text"]:disabled:after { content: "(disabled - do not use)"; font-size: .9em; color : #CCCCCC; display: block;}
ENABLED & DISABLEDFORM ELEMENTS
ENABLED & DISABLEDFORM ELEMENTS
option:enabled{ color : #9F393F;}
input:enabled{ background: #21B6A8; color :#9F393F; }
ENABLED & DISABLEDFORM ELEMENTS
CHECKED RADIOFORM ELEMENTS
input[type="radio"]:checked{ background: #9F393F;}
CHECKED RADIOFORM ELEMENTS
THAT’S IT...
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
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!
• Let browser vendors hear you or they won’t care to fix the problem.
• With HTML5 form elements, problem is going to get worse.
...AND STOP ADAPTING.
THANK YOU!Christopher Schmitt
[email protected]@teleject on twitter
CREATIVE COMMONS CITATIONShttp://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/