Advanced Search

Return to Snippet

Revision: 17674
at September 11, 2009 12:37 by chrisdpratt
Initial Code 
<!--# HTML #-->

<fieldset class="bottom-labels">
  <legend>Address</legend>
  <div class="field">
    <label for="street">Street</label>
    <input type="text" id="street" name="street" size="48" />
  </div>
  
  <div class="field left">
    <label for="city">City</label>
    <input type="text" id="city" name="city" size="30" />
  </div>
  
  <div class="field left">
    <label for="state">State</label>
    <input type="text" id="state" name="state" size="2" maxlength="2" />
  </div>
  
  <div class="field left last">
    <label for="zipcode">Zip Code</label>
    <input type="text" id="zipcode" name="zipcode" size="5" maxlength="5" />
  </div>
</fieldset>

<!--# CSS #-->

<style type="text/css">
fieldset, .field {
    margin:0 0 16px;
    }
legend, label {
    display:block;
    margin-bottom:3px;
    font-family:arial,helvetica,sans-serif;
    font-weight:bold;
    color:#333;
    }
input[type=text] {
    padding:3px;
    border:1px solid #999;
    }
input[type=text]:focus {
    position:relative;
    left:-1px; top:-1px;
    margin:0 -2px -2px 0;
    border:2px solid #09f;
    }
.bottom-labels .field {
    position:relative;
    padding-bottom:1.25em;
    margin-bottom:0.5em;
    }
.bottom-labels label {
    position:absolute;
    bottom:0;
    font-size:77%;
    }
.bottom-labels .left {
    float:left;
    margin-right:0.96em;
    }
.bottom-labels .last {
    margin-right:0!important;
    }
</style>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Good-looking and Accessible Address Form Fields

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
form, css

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
XHTML