Good-looking and Accessible Address Form Fields


/ Published in: XHTML
Save to your folder(s)



Copy this code and paste it in your HTML
  1. <!--# HTML #-->
  2.  
  3. <fieldset class="bottom-labels">
  4. <legend>Address</legend>
  5. <div class="field">
  6. <label for="street">Street</label>
  7. <input type="text" id="street" name="street" size="48" />
  8. </div>
  9.  
  10. <div class="field left">
  11. <label for="city">City</label>
  12. <input type="text" id="city" name="city" size="30" />
  13. </div>
  14.  
  15. <div class="field left">
  16. <label for="state">State</label>
  17. <input type="text" id="state" name="state" size="2" maxlength="2" />
  18. </div>
  19.  
  20. <div class="field left last">
  21. <label for="zipcode">Zip Code</label>
  22. <input type="text" id="zipcode" name="zipcode" size="5" maxlength="5" />
  23. </div>
  24.  
  25. <!--# CSS #-->
  26.  
  27. <style type="text/css">
  28. fieldset, .field {
  29. margin:0 0 16px;
  30. }
  31. legend, label {
  32. display:block;
  33. margin-bottom:3px;
  34. font-family:arial,helvetica,sans-serif;
  35. font-weight:bold;
  36. color:#333;
  37. }
  38. input[type=text] {
  39. padding:3px;
  40. border:1px solid #999;
  41. }
  42. input[type=text]:focus {
  43. position:relative;
  44. left:-1px; top:-1px;
  45. margin:0 -2px -2px 0;
  46. border:2px solid #09f;
  47. }
  48. .bottom-labels .field {
  49. position:relative;
  50. padding-bottom:1.25em;
  51. margin-bottom:0.5em;
  52. }
  53. .bottom-labels label {
  54. position:absolute;
  55. bottom:0;
  56. font-size:77%;
  57. }
  58. .bottom-labels .left {
  59. float:left;
  60. margin-right:0.96em;
  61. }
  62. .bottom-labels .last {
  63. margin-right:0!important;
  64. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.