HTML5 Forms & Validation

by toddanglin

HTML

<h1>HTML5 Forms &amp; Validation</h1>
<form>
    <fieldset>
        <legend>Your Personal Info</legend>
        <ol>
            <li>
                <label for="txtName">Name:</label>
                <input type="text" id="txtName" required placeholder="Jon Smith" title="Enter your full name" />
            </li>
            <li>
                <label for="txtEmail">Email:</label>
                <input type="email" id="txtEmail" required placeholder="[email protected]" title="Enter a valid email address" />
            </li>
            <li>
                <label for="txtTwitter">Twitter:</label>
                <input type="text" pattern="/(^|\s)@(\w+)/g" id="txtTwitter" title="Enter your Twitter handle (i.e. @yourname)" placeholder="@jonsmith" />
            </li>
        </ol>
    </fieldset>
    <input type="submit" value="Submit Form" />
</form>

CSS

body{
    background:#333;
    font: 1.1em/1.3em Helvetica,Arial,sans-serif normal;   
    color:#FFF;
}

h1{
    font-size:1.5em;  
    margin: .5em 0; 
}

li{
    margin:.75em 0;   
    clear:both;
}

fieldset{
    padding:1em;
    border:solid 1px #BBB;  
    border-radius:5px;
}

label{
    display:inline-block;
    width:100px;  
}

input{
    font-size:1.1em;   
}

input:focus:invalid{
    border:solid 1px red;  
    outline: auto 5px #777; 
    outline-offset: 1px;
}

input[required]:after {
    content:' *' 
}

input[type="text"]{
    border-radus:5px;   
}

input[type="submit"]{
    background-image: -webkit-linear-gradient(#EEE, #AAA);
    border: solid 1px #777;
    padding:.25em;
    cursor: pointer;
    margin: .5em 0;
}

input[type="submit"]:hover{
    background-image: -webkit-linear-gradient(#EEE, #DDD);
}