Download - Web Form Design (Web Visions 2009)
![Page 1: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/1.jpg)
WEB FORM ELEMENTSChristopher Schmitt | @teleject on twitter
![Page 2: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/2.jpg)
![Page 3: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/3.jpg)
![Page 4: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/4.jpg)
![Page 5: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/5.jpg)
![Page 6: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/6.jpg)
![Page 7: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/7.jpg)
( )= ( )/
![Page 8: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/8.jpg)
![Page 9: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/9.jpg)
![Page 10: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/10.jpg)
• Checkboxes
• Input:
• File
• Radio
• Text
• Select:
• Multiple Items
• Single Item
• Submit Button
• Textarea
FORM ELEMENTS
![Page 11: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/11.jpg)
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
![Page 12: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/12.jpg)
7.2 55.567
8b2
8.59
1.52.03.0
34b
1
7.2 9 1.52.03.0
234b
![Page 13: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/13.jpg)
3,520screengrabs
![Page 14: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/14.jpg)
![Page 15: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/15.jpg)
![Page 16: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/16.jpg)
![Page 17: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/17.jpg)
![Page 18: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/18.jpg)
RADIO BUTTONS
![Page 19: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/19.jpg)
CSS HEIGHT
FF 2
FF 2
FF 3
Chrome 1
![Page 20: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/20.jpg)
CSS WIDTHFF 3
FF 3
Safari 3
Safari 3
Safari 4b
Safari 4b
![Page 21: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/21.jpg)
CSS TEXT INDENTChrome 1
Safari 4b
Safari 4b
Opera 9
Opera 9
![Page 22: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/22.jpg)
CSS BACKGROUND COLORIE 6
IE 7
IE 8b2
Opera 9
Opera 9
![Page 23: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/23.jpg)
CSS BACKGROUND IMGFirefox 2
Firefox 2
IE 6
IE 7
IE 8b2
Opera 9
Opera 9
![Page 24: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/24.jpg)
![Page 25: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/25.jpg)
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
![Page 26: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/26.jpg)
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
![Page 27: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/27.jpg)
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
![Page 28: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/28.jpg)
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)
![Page 29: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/29.jpg)
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)
![Page 30: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/30.jpg)
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
![Page 31: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/31.jpg)
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
![Page 32: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/32.jpg)
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
![Page 33: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/33.jpg)
Radio Buttons
Check Boxes
File Uploads
Select(Multi)
Select(One)
Input Text
Text Area
![Page 34: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/34.jpg)
![Page 35: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/35.jpg)
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
![Page 36: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/36.jpg)
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
![Page 37: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/37.jpg)
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
![Page 38: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/38.jpg)
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
![Page 39: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/39.jpg)
![Page 40: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/40.jpg)
![Page 41: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/41.jpg)
![Page 42: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/42.jpg)
![Page 43: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/43.jpg)
![Page 44: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/44.jpg)
![Page 45: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/45.jpg)
![Page 46: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/46.jpg)
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
![Page 47: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/47.jpg)
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
![Page 48: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/48.jpg)
![Page 49: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/49.jpg)
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
![Page 50: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/50.jpg)
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.
![Page 52: Web Form Design (Web Visions 2009)](https://reader033.vdocuments.mx/reader033/viewer/2022042715/559ef3611a28ab4b208b46af/html5/thumbnails/52.jpg)
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/