CSS Form Sample 6

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

by ducka

HTML

<h2>Form 2</h2>

        <form id="form2" 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>                                                                                    
                <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 2 */

    #form2{
        margin:1em 0;
        color:#fff;
        width:320px; /* customize width, this form have fluid layout */
        }
    #form2 h3{
        margin:0;
        background:#57a700 url(http://cssglobe.com/collections/forms/images/form2/form_heading.gif) repeat-x;        
        color:#fff;
        font-size:20px;
        border:1px solid #57a700;
        border-bottom:none;
        }        
    #form2 h3 span{
        display:block;
        padding:10px 20px;
        background:url(http://cssglobe.com/collections/forms/images/form2/form_ico.gif) no-repeat 93% 50%;            
        }                
    #form2 fieldset{
        margin:0;
        padding:0;
        border:none;    
        border-top:3px solid #000;
        background:#000 url(http://cssglobe.com/collections/forms/images/form2/form_top.gif) repeat-x;        
        padding-bottom:1em;
        }        
    #form2 legend{display:none;}    
    #form2 p{margin:.5em 20px;}    
    #form2 label{display:block;}    
    #form2 input, #form2 textarea{        
        width:272px;
        border:1px solid #111;
        background:#282828 url(../images/form2/form_input.gif) repeat-x;
        padding:5px 3px;
        color:#fff;
        }        
    #form2 textarea{
        height:125px;
        overflow:auto;
        }                    
    #form2 p.submit{
        text-align:right;
        }    
    #form2 button{
        padding:0 20px;
        height:32px;
        line-height:32px;        
        border:1px solid #70ad2e;
        background:#5aae00 url(http://cssglobe.com/collections/forms/images/form2/form_button.gif) repeat-x;
        color:#fff;
        cursor:pointer;        
        text-align:center;        
        }                

/* // form 2 */