Posted By

zensir on 08/31/06


Tagged

css html forms webstandards accessibility


Versions (?)

Who likes this?

27 people have marked this snippet as a favorite

designerd
postNuKe
panatlantica
mdavie
christessmer
elithrar
mountchuck
Phoenix
zingo
Quizosde
fael
vali29
SpinZ
cidibee
isaac
gAmUssA
titox
asturi
monapdx
thermosilla
enajenkins
roccostorm
KF
m4tik
cromozooom
seanpowell
tspitzr


Accessible CSS Forms: Using CSS to Create a Two-Column Layout


 / Published in: CSS
 

URL: http://www.websiteoptimization.com/speed/tweak/forms/

In a recent study of web design patterns, Dr. Melody Ivory found that accessibility is the most underutilized aspect of good web page design (Ivory 2005). In fact websites have become more complex and less accessible over time (Hackett 2003). Less than 20% of the Fortune 100 have websites that are fully accessible (Loiacono 2004). Accessible forms are one way to combat this disturbing trend. With CSS layout, you can create two-column forms without the use of tables to save space and time. This article shows how to create a simple two-column contact form using CSS to style structural elements that is both fast and accessible.

A survey of CSS-based forms revealed many variations on a theme (see Vandersluis 2004). Most use block-level floats and margins to position form elements on the page. However, in my testing I found IE5.x Mac to have rendering problems with many of these forms. After numerous iterations, I arrived at a solution that worked for IE5.x Mac as well as Safari 1.07 Mac, Firefox 1.07 Win/Mac, IE 6 Win, Camino, and Opera. Our goal here is to create a simple accessible contact form without the use of tables (see Figure 1).

  1. <style type="text/css">
  2. <!--
  3.  
  4. form { /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  5. font:100% verdana,arial,sans-serif;
  6. margin: 0;
  7. padding: 0;
  8. min-width: 500px;
  9. max-width: 600px;
  10. width: 560px;
  11. }
  12.  
  13. form fieldset {
  14. / * clear: both; note that this clear causes inputs to break to left in ie5.x mac, commented out */
  15. border-color: #000;
  16. border-width: 1px;
  17. border-style: solid;
  18. padding: 10px; /* padding in fieldset support spotty in IE */
  19. margin: 0;
  20. }
  21.  
  22. form fieldset legend {
  23. font-size:1.1em; /* bump up legend font size, not too large or it'll overwrite border on left */
  24. /* be careful with padding, it'll shift the nice offset on top of border */
  25. }
  26.  
  27. form label {
  28. display: block; /* block float the labels to left column, set a width */
  29. float: left;
  30. width: 150px;
  31. padding: 0;
  32. margin: 5px 0 0; /* set top margin same as form input - textarea etc. elements */
  33. text-align: right;
  34. }
  35.  
  36. form fieldset label:first-letter { /* use first-letter pseudo-class to underline accesskey, note that */
  37. text-decoration:underline; /* Firefox 1.07 WIN and Explorer 5.2 Mac don't support first-letter */
  38. /* pseudo-class on legend elements, but do support it on label elements */
  39. /* we instead underline first letter on each label element and accesskey */
  40. /* each input. doing only legends would lessens cognitive load */
  41. /* opera breaks after first letter underlined legends but not labels */
  42. }
  43.  
  44. form input, form textarea {
  45. /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
  46. width:auto; /* set width of form elements to auto-size, otherwise watch for wrap on resize */
  47. margin:5px 0 0 10px; /* set margin on left of form elements rather than right of
  48.   label aligns textarea better in IE */
  49. }
  50.  
  51. form input#reset {
  52. margin-left:0px; /* set margin-left back to zero on reset button (set above) */
  53. }
  54.  
  55. textarea { overflow: auto; }
  56.  
  57. form small {
  58. display: block;
  59. margin: 0 0 5px 160px; /* instructions/comments left margin set to align w/ right column inputs */
  60. padding: 1px 3px;
  61. font-size: 88%;
  62. }
  63.  
  64. form .required{font-weight:bold;} /* uses class instead of div, more efficient */
  65.  
  66. form br {
  67. clear:left; /* setting clear on inputs didn't work consistently, so brs added for degrade */
  68. }
  69. -->
  70. </style>
  71. <script>
  72. <!--
  73. function sf(){document.f.firstname.focus();}
  74. -->
  75. </script>
  76. </head>
  77. <body onLoad=sf()>
  78.  
  79. <form action="#" method="post" name="f">
  80. <p><b>Bold</b> fields are required. <u>U</u>nderlined letters are accesskeys.</p>
  81. <fieldset>
  82. <legend>Personal Information</legend>
  83. <label for="firstname" accesskey="f">First name: </label>
  84. <input type="text" id="firstname" name="firstname" tabindex="1" value="" title="first name"><br>
  85. <label for="lastname" accesskey="l">Last name: </label>
  86. <input type="text" id="lastname" name="lastname" tabindex="2" title="last name"><br>
  87. <label for="email" class="required" accesskey="e">Email: </label>
  88. <input type="text" id="email" name="email" tabindex="3" title="email"><br>
  89. <small>Your email address is safe with us, until we're acquired.</small>
  90. </fieldset>
  91. <fieldset>
  92. <legend>Comments</legend>
  93. <label for="comments" accesskey="c">Comments: </label>
  94. <textarea name="comments" rows="3" cols="23" id="comments" tabindex="4" title="comments"></textarea><br>
  95. <label for="kludge"></label>
  96. <input type="submit" value="Send" id="submit" tabindex="5"> <INPUT type="reset" id="reset" tabindex="6">
  97. </fieldset>
  98. </form>

Report this snippet  

You need to login to post a comment.