WEB FORM ELEMENTS
      SXSW 2009
(   )=
     /   (   )
FORM ELEMENTS

• Checkboxes          • Select:

• Input:                • Multiple   Items

  • File                • Sing...
CSS PROPERTIES

• background-color      • height
• background-image      • letter-spacing
• border                • line-h...
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  ...
3,520
 screengrabs
RADIO BUTTONS
  FF 2


  FF 2


  FF 3


Chrome 1
RADIO BUTTONS
  FF 3

  FF 3

Safari 3

Safari 3

Safari 4b

Safari 4b
RADIO BUTTONS
Chrome 1


Safari 4b


Safari 4b


Opera 9


Opera 9
RADIO BUTTONS
 IE 6


 IE 7


IE 8b2


Opera 9


Opera 9
RADIO BUTTONS
Firefox 2

Firefox 2

  IE 6

  IE 7

 IE 8b2

Opera 9

Opera 9
WebFormElements.com
THANK YOU!
  Christopher Schmitt
schmitt@heatvision.com
   twitter: @teleject
CREATIVE COMMONS CITATIONS
 http://www.flickr.com/photos/lanuiop/2234239588/
http://www.flickr.com/photos/gaetanlee/19474245...
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Web Form Elements
Upcoming SlideShare
Loading in …5
×

Web Form Elements

7,124 views

Published on

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

Published in: Technology, Art & Photos, Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,124
On SlideShare
0
From Embeds
0
Number of Embeds
436
Actions
Shares
0
Downloads
89
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Web Form Elements

  1. WEB FORM ELEMENTS SXSW 2009
  2. ( )= / ( )
  3. FORM ELEMENTS • Checkboxes • Select: • Input: • Multiple Items • File • Single Item • Radio • Submit Button • Text • Textarea
  4. 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
  5. 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
  6. 3,520 screengrabs
  7. RADIO BUTTONS FF 2 FF 2 FF 3 Chrome 1
  8. RADIO BUTTONS FF 3 FF 3 Safari 3 Safari 3 Safari 4b Safari 4b
  9. RADIO BUTTONS Chrome 1 Safari 4b Safari 4b Opera 9 Opera 9
  10. RADIO BUTTONS IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  11. RADIO BUTTONS Firefox 2 Firefox 2 IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  12. WebFormElements.com
  13. THANK YOU! Christopher Schmitt schmitt@heatvision.com twitter: @teleject
  14. 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/

×