Skip Navigation

Friday August 2nd, 2013

OIT > WCG > Code Library > Sample Form

Sample Form

The elements <fieldset> and <legend> allow you to layout and organise a large form with many different areas of interest in a logical way without using tables. The <fieldset> tag can be used to create boxes around selected elements and the <legend> tag will give a caption to those elements. In this way form elements can be grouped together into identified categories.

The tags <label for> and <id> can be used to associate a text or graphic label with a specific form input (or control). The tags can be used with any of the input elements, for example text boxes, text area, checkboxes and radio buttons; however, the id attribute for each element (checkbox, text field etc) in a document must be unique.

While it is usual for the form label or prompt and the control to be adjacent to each other, or at least in close proximity, it is possible to associate a label with a form control that is placed anywhere on the same Web page.

A <tabindex> can be included, allowing the user to easily move from one form element to the next per the predetermined <tabindex> order established in the code. Tab order ascends from lowest to highest number.

Sample Form

User Details
Gender

HTML Code

View CodeCopy to ClipboardePrintAbout
  1. <form class="validate" id="sample_form" name="sample_form">  
  2. <fieldset class="login">  
  3. <legend>Login Details</legend>  
  4. <div>  
  5. <label for="username">User Name</label> <input id="username" name="username" type="text" />  
  6. </div>  
  7. <div>  
  8. <label for="password">Password</label> <input id="password" name="password" type="password" />  
  9. </div>  
  10. <div>  
  11. <label for="password2">Retype Password</label> <input id="password2" name="password2" type="password" />  
  12. </div>  
  13. </fieldset>  
  14. <fieldset class="contact">  
  15. <legend>User Details</legend>  
  16. <div>  
  17. <label for="firstname">First Name</label> <input id="firstname" name="firstname" type="text" />  
  18. </div>  
  19. <div>  
  20. <label for="lastname">Last Name</label> <input id="lastname" name="lastname" type="text" />  
  21. </div>  
  22. <div class="radio">  
  23. <fieldset>  
  24. <legend><span>Gender</span></legend>  
  25. <div>  
  26. <input id="male" name="gender" value="male" type="radio" /> <label for="male">Male</label>  
  27. </div>  
  28. <div>  
  29. <input id="female" name="gender" value="female" type="radio" /> <label for="female">Female</label>  
  30. </div>  
  31. </fieldset>  
  32. </div>  
  33. <div>  
  34. <label for="email">Email</label> <input class="email" id="email" name="email" type="text" />  
  35. </div>  
  36. </fieldset>  
  37. <button class="submitBtn" value="submit"><span>Submit</span></button>    
  38. </form>  

CSS Code
View CodeCopy to ClipboardePrintAbout
  1. #sample_form form {  
  2.     background:#fff;  
  3.     padding:1em;  
  4.     border:1px solid #eee;  
  5. }  
  6. #sample_form fieldset div {  
  7.     margin:0.3em 0;  
  8.     clear:both;  
  9. }  
  10. #sample_form form {  
  11.     margin:1em;  
  12.     width:27em;  
  13. }  
  14. #sample_form label {  
  15.     float:left;  
  16.     width:10em;  
  17.     text-align:right;  
  18.     margin-right:1em;  
  19. }  
  20. #sample_form legend {  
  21.     color:#0b77b7;  
  22.     font-size:1.2em;  
  23. }  
  24. #sample_form legend span {  
  25.     width:10em;  
  26.     text-align:right;  
  27. }  
  28. #sample_form input {  
  29.     padding:0.15em;  
  30.     width:10em;  
  31.     border:1px solid #ddd;  
  32.     background:#fafafa;  
  33.     font:bold 0.95em arial, sans-serif;  
  34.     -moz-border-radius:0.4em;  
  35.     -khtml-border-radius:0.4em;  
  36. }  
  37. #sample_form input:hover, input:focus {  
  38.     border-color:#c5c5c5;  
  39.     background:#f6f6f6;  
  40. }   
  41. #sample_form fieldset {  
  42.     border:1px solid #ddd;  
  43.     padding:0 0.5em 0.5em;  
  44. }  
  45. #sample_form .date input {  
  46.     background-image:url(../images/calendar-small.gif);  
  47.     background-repeat:no-repeat;  
  48.     background-position:100% 50%;  
  49. }  
  50.   
  51. #sample_form .date fieldset label {  
  52.     float:none;  
  53.     display:block;  
  54.     text-align:left;  
  55.     width:auto;  
  56. }  
  57. #sample_form .date fieldset div {  
  58.     float:left;  
  59.     clear:none;  
  60.     margin-right:0.2em;  
  61. }  
  62. #sample_form .radio, #sample_form .date {  
  63.     position:relative;  
  64. }  
  65. #sample_form .radio fieldset, #sample_form .date fieldset {  
  66.     border:none;  
  67.     width:auto;  
  68.     padding:1px 0 0 11em;  
  69. }  
  70. #sample_form .radio legend, #sample_form .date legend {  
  71.     font-size:1em;  
  72.     color:#000;  
  73. }  
  74. #sample_form .radio legend span, #sample_form .date legend span {  
  75.     position:absolute;  
  76.     left:0;  
  77.     top:0.3em;  
  78.     width:10em;  
  79.     display:block;  
  80. }  
  81. #sample_form .radio label, #sample_form .radio input {  
  82.     vertical-align:middle;  
  83.     display:inline;  
  84.     float:none;  
  85.     width:auto;  
  86.     background:none;  
  87.     border:none;  
  88. }  
  89. #sample_form .radio div {  
  90.     float:left;  
  91.     white-space:nowrap;  
  92.     clear:none;  
  93. }  
  94.   
  95. #sample_form .email {  
  96.     width:14em;  
  97. }  
  98.   
  99. #sample_form input.default {  
  100.     color:#bbb;  
  101. }  
  102.   
  103. #sample_form button {  
  104.   color: #036;  
  105.   font-weight: bold;  
  106. }