944,135 Members | Top Members by Rank

Ad:
Sep 30th, 2007
0

Forms and Web standards

Expand Post »
Hi. I was wondering if there was a 'best practice' for formatting an html form. I assume that you are not supposed to use tables for this.

Any ideas?

Thanks.
Similar Threads
Reputation Points: 27
Solved Threads: 14
Junior Poster
Cerberus is offline Offline
162 posts
since Sep 2006
Sep 30th, 2007
0

Re: Forms and Web standards

Hello,
I am sorry, but I really don't know what you mean...
Can you please be more specific?


Shaffer.
Reputation Points: 13
Solved Threads: 2
Newbie Poster
Shaffer is offline Offline
21 posts
since Mar 2007
Sep 30th, 2007
1

Re: Forms and Web standards

Well...

Use the <fieldset> tag to collect related parts of the form together (if a large form).

Apply <legend> to help indicate what the form pertains to.

Ensure all Inputs have a <label> tag.
Also ensure all Labels/Inputs have unique IDs.

The label should go first for most inputs, (text, text area etc.), and last for things like Checkbox lists, radio groups etc.

Use the font-size tag for the Label/Inputs, using % or EM units.

Apply styling for :focus for inputs so that users can see which form element that are currently in (such as changing the BG colour or altering the Border Colour etc.).
(NOTE: doesn't work on IE6.)

Consider applying a little JS to enhance usability (autofocus the first part of a form and enable IE6 to use the :focus).


-------


If it helps....


HTML and CSS Syntax (Toggle Plain Text)
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head>
  2. <title>Center Block Element 2</title>
  3. <style type="text/css">
  4.  
  5. html
  6. {
  7. margin: 0;
  8. padding: 0;
  9. font-size: 100%;
  10. font-family: trebuchet, arial, sans-serif;
  11. }
  12.  
  13. body
  14. {
  15. margin: 0;
  16. padding: 10px;
  17. font-size: 62.5%;
  18. }
  19.  
  20. form
  21. {
  22. margin: 0;
  23. padding: 0;
  24. width: 500px;
  25. }
  26.  
  27. fieldset
  28. {
  29. margin: 0;
  30. padding: 10px;
  31. border: 1px solid #d6d6d6;
  32. display: block;
  33. }
  34.  
  35. legend
  36. {
  37. margin: 0 0 15px 0;
  38. padding: 4px 8px;
  39. border: 0px solid #d6d6d6;
  40. font-weight: bold;
  41. font-size: 1.6em;
  42. background-color: #000000;
  43. color: #ffffff;
  44. }
  45.  
  46.  
  47. .formelementwrappersingle
  48. {
  49. margin: 2px;
  50. padding: 0;
  51. float: left;
  52. clear: both;
  53. width: 40em;
  54. border: 1px solid #c2c2c2;
  55. background-color: #f6f6f6;
  56. }
  57.  
  58. .formelementwrapperdoubleinline
  59. {
  60. margin: 2px;
  61. padding: 0;
  62. float:left;
  63. width: 19em;
  64. border: 1px solid #c2c2c2;
  65. background-color: #f6f6f6;
  66. }
  67. .formelementwrapperdoublebreak
  68. {
  69. margin: 2px;
  70. padding: 0;
  71. float:left;
  72. clear: both;
  73. width: 19em;
  74. border: 1px solid #c2c2c2;
  75. background-color: #f6f6f6;
  76. }
  77.  
  78. label
  79. {
  80. margin: 0;
  81. padding: 3px;
  82. font-weight: bold;
  83. display: block;
  84. width: 15em;
  85. float: left;
  86. font-size: 1.2em;
  87.  
  88. }
  89.  
  90. input.textinput, textarea.textarea
  91. {
  92. background-color: #ffff99;
  93. font-size: 1.4em;
  94. border: 1px solid #c2c2c2;
  95. }
  96.  
  97. input.textinput:focus, textarea.textarea:focus
  98. {
  99. background-color: #ffffff;
  100. font-size: 1.4em;
  101. border: 1px solid #d6d6d6;
  102. }
  103.  
  104.  
  105. </style>
  106.  
  107. </head>
  108.  
  109.  
  110. <body>
  111.  
  112.  
  113. <form>
  114.  
  115. <fieldset>
  116. <legend>Test Form 1</legend>
  117.  
  118. <div class="formelementwrappersingle">
  119. <label for="name">
  120. Name
  121. </label>
  122. <input id="name" name="name" type="text" class="textinput" />
  123. </div>
  124.  
  125.  
  126. <div class="formelementwrappersingle">
  127. <label for="description">
  128. Description
  129. </label>
  130. <textarea id="description" name="description" class="textarea"></textarea>
  131. </div>
  132.  
  133. </fieldset>
  134.  
  135.  
  136.  
  137.  
  138. <fieldset>
  139. <legend>Test Form 2</legend>
  140.  
  141. <div class="formelementwrapperdoubleinline">
  142. <label for="colourchoice_0">
  143. <input type="radio" name="colourchoice" id="colourchoice_0" title="Red" class="radioinput" checked="checked" />
  144. Red
  145. </label>
  146. </div>
  147. <div class="formelementwrapperdoubleinline">
  148. <label for="colourchoice_1">
  149. <input type="radio" name="colourchoice" id="colourchoice_1" title="Blue" class="radioinput" />
  150. Blue
  151. </label>
  152. </div>
  153.  
  154. </fieldset>
  155.  
  156.  
  157.  
  158.  
  159. <fieldset>
  160. <legend>Test Form 3</legend>
  161.  
  162. <div class="formelementwrapperdoublebreak">
  163. <label for="animalchoice_0">
  164. <input type="radio" name="animalchoice" id="animalchoice_0" title="Cat" class="radioinput" checked="checked" />
  165. Cat
  166. </label>
  167. </div>
  168. <div class="formelementwrapperdoublebreak">
  169. <label for="animalchoice_1">
  170. <input type="radio" name="animalchoice" id="animalchoice_1" title="Dog" class="radioinput" />
  171. Blue
  172. </label>
  173. </div>
  174.  
  175. </fieldset>
  176.  
  177. </form>
  178. </body>
  179. </html>
Last edited by autocrat; Sep 30th, 2007 at 12:33 pm. Reason: Code
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Sep 30th, 2007
0

Re: Forms and Web standards

That's a really good example. Thank you.
Reputation Points: 27
Solved Threads: 14
Junior Poster
Cerberus is offline Offline
162 posts
since Sep 2006
Sep 30th, 2007
0

Re: Forms and Web standards

Not a problem - let me know if you want any extra help with it (Forms can be a sod sometimes (esp. if you don't do them that often!)
Reputation Points: 63
Solved Threads: 12
Posting Pro in Training
autocrat is offline Offline
427 posts
since Feb 2005
Oct 7th, 2007
0

Re: Forms and Web standards

Tables are not deprecated. They are just discouraged for use to format pages for purposes other than tables.

If the form is like an invoice form (with several blanks on each line), there is no reason why you shouldn't use a table to contain it.

Also, the alternate methods the W3C prefers don't always work, don't work inside some other tags, and fall apart if the browser window is reduced in size. So, if you can't get it to work, don't waste hours on it; just use a table instead.
Reputation Points: 730
Solved Threads: 181
Nearly a Senior Poster
MidiMagic is offline Offline
3,314 posts
since Jan 2007

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Help with template
Next Thread in HTML and CSS Forum Timeline: Wordpress plugin problem





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC