CSS Form Sample 9

http://cssglobe.com/collections/forms/

by ducka

HTML

<h2>Form 5</h2>


                    
        <form id="form5" action="/" method="post">    
        
            <fieldset><legend>Contact form</legend>
                <p class="first">                    
                    <label for="name">Name</label>                
                    <input type="text" name="name" id="name" size="30" />                    
                </p>
                <p>                    
                    <label for="email">Email</label>                
                    <input type="text" name="email" id="email" size="30" />                
                </p>
                <p>
                    <label for="web">Website</label>                
                    <input type="text" name="web" id="web" size="30" />                                        
                </p>            
                <p>
                    <label for="message">Message</label>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </p>                    
                
                <p class="submit"><button type="submit">Send</button></p>    
                            
            </fieldset>                                
        </form>

CSS

/* form 5 */

    #form5{
        margin:1em 0;
        padding-top:10px;
        }
    #form5 fieldset{
        margin:0;
        padding-top:.5em;
        border:none;    
        border-top:1px solid #f1f1f1;
        }        
    #form5 legend{
        background:#fff;
        padding:0 5px;
        font-style:italic;
        }    
    #form5 p{
        clear:both;
        margin:.5em 0;
        overflow:hidden;
        }    
    #form5 label{
        float:left;
        width:60px;
        display:block;
        text-align:right;
        margin-right:10px;
        }    
    #form5 input, #form5 textarea{    
        margin:0;    
        width:250px;
        border:1px solid #ddd;        
        padding:3px 5px 3px 25px;
        }        
    
    
    #form5 input#name{background:#fff url(http://cssglobe.com/collections/forms/images/form5/form_name.gif) no-repeat 5px 50%;}
    #form5 input#email{background:#fff url(http://cssglobe.com/collections/forms/images/form5/form_email.gif) no-repeat 5px 50%;}
    #form5 input#web{background:#fff url(http://cssglobe.com/collections/forms/images/form5/form_url.gif) no-repeat 5px 50%;}
    #form5 textarea#message{background:#fff url(http://cssglobe.com/collections/forms/images/form5/form_note.gif) no-repeat 5px 6px;}
    
    
    #form5 textarea{
        height:125px;
        overflow:auto;
        }                    
    #form5 p.submit{
        clear:both;
        margin:1em 0;
        padding:.5em 70px;
        border-top:1px solid #f1f1f1;        
        
        }    
    #form5 button{
        height:28px;
        line-height:28px;        
        border-top:1px solid #999;
        border-left:1px solid #999;
        border-right:1px solid #333;
        border-bottom:1px solid #333;
        background:url(http://cssglobe.com/collections/forms/images/form5/form_button.gif) no-repeat;
        padding:0 10px 0 25px;
        color:#333;
        cursor:pointer;
        text-align:left;
        font-size:11px;
   ...