Advanced Search

Good-looking and Accessible Address Form Fields

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

Expand | Embed | Plain Text

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. </fieldset>
  25.  
  26. <!--# CSS #-->
  27.  
  28. <style type="text/css">
  29. fieldset, .field {
  30.     margin:0 0 16px;
  31.     }
  32. legend, label {
  33.     display:block;
  34.     margin-bottom:3px;
  35.     font-family:arial,helvetica,sans-serif;
  36.     font-weight:bold;
  37.     color:#333;
  38.     }
  39. input[type=text] {
  40.     padding:3px;
  41.     border:1px solid #999;
  42.     }
  43. input[type=text]:focus {
  44.     position:relative;
  45.     left:-1px; top:-1px;
  46.     margin:0 -2px -2px 0;
  47.     border:2px solid #09f;
  48.     }
  49. .bottom-labels .field {
  50.     position:relative;
  51.     padding-bottom:1.25em;
  52.     margin-bottom:0.5em;
  53.     }
  54. .bottom-labels label {
  55.     position:absolute;
  56.     bottom:0;
  57.     font-size:77%;
  58.     }
  59. .bottom-labels .left {
  60.     float:left;
  61.     margin-right:0.96em;
  62.     }
  63. .bottom-labels .last {
  64.     margin-right:0!important;
  65.     }
  66. </style>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.