CSS3 Form Sample 1

Sample borrowed from http://gazpo.com/2011/02/form/

by ducka

HTML

<p>
    This is a pretty good form design.  Separating each of the fields into divs works well.  The form can be resized without affecting the layout of the form.  The inputs are fixed width, however you could perhaps 100% the inputs, stick the labels on top of the inputs, and stick a margin around the field divs to put some space between the fields and the outside of the form.     
</p>
<p>
    The submit button is currently not separated from the other fields, and relies off a fixed right hand side margin to bring it correctly inline with the form fields.  This is an issue.
</p>
<br />

<form id="contactform" class="rounded" method="post" action="">
<h3>Contact Form</h3>
 
<div class="field">
    <label for="name">Name:</label>
    <input type="text" class="input" name="name" id="name" />
    <p class="hint">Enter your name.</p>
</div>
 
<div class="field">
    <label for="email">Email:</label>
    <input type="text" class="input" name="email" id="email" />
    <p class="hint">Enter your email.</p>
</div>
 
<div class="field">
    <label for="message">Message:</label>
    <textarea class="input textarea" name="message" id="message">
    </textarea>
    <p class="hint">Write your message.</p>
</div>
 
<input type="submit" name="Submit"  class="button" value="Submit" />
</form>

CSS

#contactform {
 
    width: 500px;
    padding: 20px;
    background: #f0f0f0;
    overflow:auto;
 
    /* Border style */
    border: 1px solid #cccccc;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px; 
 
    /* Border Shadow */
    -moz-box-shadow: 2px 2px 2px #cccccc;
    -webkit-box-shadow: 2px 2px 2px #cccccc;
    box-shadow: 2px 2px 2px #cccccc;
 
    }

label {
    font-family: Arial, Verdana;
    text-shadow: 2px 2px 2px #ccc;
    display: block;
    float: left;
    font-weight: bold;
    margin-right:10px;
    text-align: right;
    width: 120px;
    line-height: 25px;
    font-size: 15px;
    }

.input{
    font-family: Arial, Verdana;
    font-size: 15px;
    padding: 5px;
    border: 1px solid #b9bdc1;
    width: 300px;
    color: #797979;
    }

.hint{
    display:none;
    }

.field:hover .hint {
    position: absolute;
    display: block;
    margin: -30px 0 0 455px;
    color: #FFFFFF;
    padding: 7px 10px;
    background: rgba(0, 0, 0, 0.6);
 
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px;
    border-radius: 7px;
    }

.button{
    float: right;
    margin:10px 55px 10px 0;
    font-weight: bold;
    line-height: 1;
    padding: 6px 10px;
    cursor:pointer;
    color: #fff;
 
    text-align: center;
    text-shadow: 0 -1px 1px #64799e;
 
    /* Background gradient */
    background: #a5b8da;
    background: -moz-linear-gradient
       (top, #a5b8da 0%, #7089b3 100%);
    background: -webkit-gradient
       (linear, 0% 0%, 0% 100%,
       from(#a5b8da), to(#7089b3));
 
    /* Border style */
    border: 1px solid #5c6f91;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    /* Box shadow */
    -moz-box-shadow: inset 0 1px 0 0 #aec3e5;
    -webkit-box-shadow: inset 0 1px 0 0 #aec3e5;
    box-shadow: inset 0 1px 0 0 #aec3e5;
 
    }