An up close examination of designing with CSS, HTML for Web forms

1. WEB FORM ELEMENTS
SXSW 2009

6. ( )=
/ ( )

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

10. 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

11. 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

12. 3,520
screengrabs

14. RADIO BUTTONS
FF 2
FF 2
FF 3
Chrome 1

15. RADIO BUTTONS
FF 3
FF 3
Safari 3
Safari 3
Safari 4b
Safari 4b

16. RADIO BUTTONS
Chrome 1
Safari 4b
Safari 4b
Opera 9
Opera 9

17. RADIO BUTTONS
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

18. RADIO BUTTONS
Firefox 2
Firefox 2
IE 6
IE 7
IE 8b2
Opera 9
Opera 9

21. WebFormElements.com

24. THANK YOU!
Christopher Schmitt
schmitt@heatvision.com
twitter: @teleject

25. 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/