CSS & WEB FORM ELEMENTS
 Christopher Schmitt | http://twitter.com/teleject
http://brightbytes.com/phineasgage/index.html
(   )=
     /   (   )
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
CSS HEIGHT
  FF 2


  FF 2


  FF 3


Chrome 1
CSS WIDTH
  FF 3

  FF 3

Safari 3

Safari 3

Safari 4b

Safari 4b
CSS TEXT INDENT
Chrome 1


Safari 4b


Safari 4b


Opera 9


Opera 9
CSS BACKGROUND COLOR
 IE 6


 IE 7


IE 8b2


Opera 9


Opera 9
CSS BACKGROUND IMG
Firefox 2

Firefox 2

  IE 6

  IE 7

 IE 8b2

Opera 9

Opera 9
CSS & TEXTAREA
20




15




10




 5




 0
     IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3   Win...
CSS & INPUT TEXT FIELDS
20




15




10




 5




 0
     IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac...
CSS & SUBMIT BUTTON
20




15




10




 5




 0
     IE6    IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3...
CSS & SELECT BOXES (ONE)
20




15




10




 5




 0
      IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 M...
CSS & SELECT BOXES (MULTI)
20




15




10




 5




 0
     IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 ...
CSS & FILE UPLOADS
20




15




10




 5




 0
     IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3  ...
CSS & CHECKBOXES
20




15




10




 5




 0
     IE6   IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3   W...
CSS & RADIO BUTTONS
20




15




10




 5




 0
     IE6    IE7     IE8b2   Ch   Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3...
Radio    Check     File     Select   Select   Input   Text
Buttons   Boxes   Uploads   (Multi)   (One)     Text   Area
CSS PROPERTIES
100




 75




 50




 25




  0
      height   letter-spacing   line-height   margin       padding   te...
CSS PROPERTIES
100




 75




 50




 25




  0
      bkgd-color   bkgd-image   border   border-color border-style bord...
Text Indent    Font Family     Height       Font Size       Margin

  Text        Border Color     Color       Border Styl...
Radio        Check        File        Select   Select          Input        Text
Buttons       Boxes      Uploads      (Mu...
MacFF3
              MacS4b                                      WinOp9
WinS3                      IE7         IE6      Ch...
LET BROWSER VENDORS
             KNOW WHAT YOU WANT
•   Internet Explorer

    •   http://blogs.msdn.com/ie/contact.aspx

...
LET BROWSER VENDORS
        KNOW WHAT YOU WANT
•   Web Form Elements Design Quiz

    •   Part 1: http://tr.im/lp2k

    •...
HOW TO DESIGN FOR
SERIOUSLY MESSY FORMS
SURRENDER
ZERO OUT CSS PROPERTIES

• Zero    out Borders

• Zero    out Padding

• Zero    Margins

• Clear   out Background Images,...
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 */
   ...
FASTER WAY TO ZERO
 input[type="text"] {
   border: 1px solid #177F75;
   font-family:Verdana, Arial, Helvetica, sans-seri...
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"...
BASIC FORM
<form id="webmailForm" action="/-/">
<fieldset>
 <label for="email">Email</label>
 <input id="email" type="text"...
BASIC FORM
#webmailForm fieldset {

 margin: 0 0 15px 0;

 border: 0;
}
#webmailForm fieldset label {

 display: block;

 ma...
COOL FORM

#webmailForm fieldset input,
#webmailForm fieldset textarea {

 width: 550px;

 padding: 10px;

 font-size: 1.2em...
COOL FORM

#webmailForm fieldset input,
#webmailForm fieldset textarea {

 width: 550px;

 padding: 10px;

 font-size: 1.2em...
COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {

 width: 550px;

 padding: 10px;

 font-size: 1.2em;...
COOL FORM
#webmailForm fieldset input,
#webmailForm fieldset textarea {

 width: 550px;

 padding: 10px;

 font-size: 1.2em;...
OTHER CSS3 PROPERTIES
ENABLED & DISABLED
  FORM ELEMENTS

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


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


input[type="text"]:disabled:after {
  content: "(disabled - do not use)";
  font-size...
ENABLED & DISABLED
  FORM ELEMENTS
ENABLED & DISABLED
  FORM ELEMENTS

   option:enabled{
     color: #9F393F;
   }

   input:enabled{
     background: #21B6...
ENABLED & DISABLED
  FORM ELEMENTS
CHECKED RADIO
FORM ELEMENTS


input[type="radio"]:checked{
  background: #9F393F;
}
CHECKED RADIO
FORM ELEMENTS
THAT’S IT...
TAKE AWAYS

• Designing   for forms is hard for HTML+CSS

• Even the same browser, different platform render Web forms
 di...
TAKE AWAYS

• Reviewed     which CSS properties are supported the most.

• Reviewed     what high-profile sites are doing t...
...AND STOP ADAPTING.
THANK YOU!
  Christopher Schmitt
schmitt@heatvision.com
  @teleject on twitter
CREATIVE COMMONS CITATIONS
   http://www.flickr.com/photos/lanuiop/2234239588/
 http://www.flickr.com/photos/gaetanlee/19474...
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
The CSS Summit: CSS & Form Elements
Upcoming SlideShare
Loading in …5
×

The CSS Summit: CSS & Form Elements

2,482 views

Published on

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.

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,482
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
76
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

The CSS Summit: CSS & Form Elements

  1. 1. CSS & WEB FORM ELEMENTS Christopher Schmitt | http://twitter.com/teleject
  2. 2. http://brightbytes.com/phineasgage/index.html
  3. 3. ( )= / ( )
  4. 4. FORM ELEMENTS • Checkboxes • Select: • Input: • Multiple Items • File • Single Item • Radio • Submit Button • Text • Textarea
  5. 5. 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
  6. 6. 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
  7. 7. 3,520 screengrabs
  8. 8. RADIO BUTTONS
  9. 9. CSS HEIGHT FF 2 FF 2 FF 3 Chrome 1
  10. 10. CSS WIDTH FF 3 FF 3 Safari 3 Safari 3 Safari 4b Safari 4b
  11. 11. CSS TEXT INDENT Chrome 1 Safari 4b Safari 4b Opera 9 Opera 9
  12. 12. CSS BACKGROUND COLOR IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  13. 13. CSS BACKGROUND IMG Firefox 2 Firefox 2 IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  14. 14. 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
  15. 15. 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
  16. 16. 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
  17. 17. 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
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area
  23. 23. 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
  24. 24. 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
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. HOW TO DESIGN FOR SERIOUSLY MESSY FORMS
  31. 31. SURRENDER
  32. 32. 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
  33. 33. SLOW WAY TO ZERO <input type="submit" value="submit" class="submit" />
  34. 34. FASTER WAY TO ZERO input { /* type selector */ border: 1px solid black; } .submit { /* class selector */ border: 1px solid black; }
  35. 35. 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; }
  36. 36. FASTER WAY TO ZERO label[for="byear"], label[for="bdate"] { position: absolute; left: -999px; width: 990px; }
  37. 37. DROP SHADOWS, ROUNDED CORNERS, OH MY!
  38. 38. 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>
  39. 39. 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>
  40. 40. BASIC FORM #webmailForm fieldset { margin: 0 0 15px 0; border: 0; } #webmailForm fieldset label { display: block; margin: 0 0 5px 0; font-weight: bold; }
  41. 41. COOL FORM #webmailForm fieldset input, #webmailForm fieldset textarea { width: 550px; padding: 10px; font-size: 1.2em; border: none; /* zero out */ background: #fcf; }
  42. 42. 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; }
  43. 43. 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; }
  44. 44. 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; }
  45. 45. OTHER CSS3 PROPERTIES
  46. 46. 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>
  47. 47. ENABLED & DISABLED FORM ELEMENTS
  48. 48. ENABLED & DISABLED FORM ELEMENTS input[type="text"]:disabled{ opacity: .7; filter: alpha(opacity=70); /* cough */ }
  49. 49. ENABLED & DISABLED FORM ELEMENTS input[type="text"]:disabled:after { content: "(disabled - do not use)"; font-size: .9em; color: #CCCCCC; display: block; }
  50. 50. ENABLED & DISABLED FORM ELEMENTS
  51. 51. ENABLED & DISABLED FORM ELEMENTS option:enabled{ color: #9F393F; } input:enabled{ background: #21B6A8; color:#9F393F; }
  52. 52. ENABLED & DISABLED FORM ELEMENTS
  53. 53. CHECKED RADIO FORM ELEMENTS input[type="radio"]:checked{ background: #9F393F; }
  54. 54. CHECKED RADIO FORM ELEMENTS
  55. 55. THAT’S IT...
  56. 56. 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
  57. 57. 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.
  58. 58. ...AND STOP ADAPTING.
  59. 59. THANK YOU! Christopher Schmitt schmitt@heatvision.com @teleject on twitter
  60. 60. 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/

×