CSS Form Sample 5

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

by ducka

HTML

<h2>Form 1</h2>
                    
        <form id="form1" 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>            
            </fieldset>
            <fieldset>                                                                            
                <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 1 */

    #form1{
        margin:1em 0;
        padding-top:10px;
        background:url(http://cssglobe.com/collections/forms/images/form1/form_top.gif) no-repeat 0 0;
        }
    #form1 fieldset{
        margin:0;
        padding:0;
        border:none;    
        float:left;
        display:inline;
        width:260px;
        margin-left:25px;
        }        
    #form1 legend{display:none;}    
    #form1 p{margin:.5em 0;}    
    #form1 label{display:block;}    
    #form1 input, #form1 textarea{        
        width:252px;
        border:1px solid #ddd;
        background:#fff url(http://cssglobe.com/collections/forms/images/form1/form_input.gif) repeat-x;
        padding:3px;
        }        
    #form1 textarea{
        height:125px;
        overflow:auto;
        }                    
    #form1 p.submit{
        clear:both;
        background:url(http://cssglobe.com/collections/forms/images/form1/form_bottom.gif) no-repeat 0 100%;
        padding:0 25px 20px 25px;
        margin:0;
        text-align:right;
        }    
    #form1 button{
        width:150px;
        height:37px;
        line-height:37px;        
        border:none;
        background:url(http://cssglobe.com/collections/forms/images/form1/form_button.gif) no-repeat 0 0;
        color:#fff;
        cursor:pointer;
        text-align:center;
        }