CSS Form Sample 7

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

by ducka

HTML

<h2>Form 3</h2>
        
        <form id="form3" action="/" method="post">    
        
            <h3><span>Contact Us</span></h3>
        
            <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>
            </fieldset>
            <fieldset class="last">                                                                                    
                <p>
                    <label for="message">Message</label>
                    <textarea name="message" id="message" cols="30" rows="10"></textarea>
                </p>                    
                            
            </fieldset>                    
            
            <p class="submit"><button type="submit">Send</button></p>            
                        
        </form>

CSS

/* form 3 */

    #form3{
        margin:1em 0;
        background:url(http://cssglobe.com/collections/forms/images/form3/form_bg.jpg) no-repeat 0 0;
        width:542px;
        height:364px; /* fixed size (envelope graphic) */
        overflow:hidden;
        }
    #form3 h3{display:none;}    
    #form3 fieldset{
        margin:0;
        padding:0;
        border:none;    
        float:left;
        display:inline;
        width:200px;
        margin-left:34px;
        padding-top:80px;
        }    
    #form3 fieldset.last{
        width:254px;
        margin-left:17px;
        }                
    #form3 legend{display:none;}    
    #form3 p{margin:.5em 0;}    
    #form3 label{display:block;}    
    #form3 input, #form3 textarea{        
        width:192px;
        border:1px solid #ddd;
        background:#fff url(http://cssglobe.com/collections/forms/images/form3/form_input.gif) repeat-x;
        padding:3px;
        }        
    #form3 textarea{
        width:246px;
        height:200px;
        overflow:auto;
        }                    
    #form3 p.submit{
        margin:0 34px;
        clear:both;
        position:relative;
        }    
    #form3 button{
        padding:0;
        position:absolute;
        left:0;
        top:-3.5em;
        width:95px;
        height:36px;
        text-indent:-8000px;
        overflow:hidden;
        border:none;
        background:url(http://cssglobe.com/collections/forms/images/form3/form_button.gif) no-repeat 0 0;
        color:#fff;
        cursor:pointer;
        }                

/* // form 3 */