HTML5 Form Elements

after http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features

by Reusablecode

HTML

<p class="help">Examples taken from <a href="http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features" target="_new">Cats Who Code</a></p>
<form>
    <p>
        <label for="required" class="required">required</label>
        <input type="text"  name="required" required>
    </p>
    <p class="help"><em>optional</em> and <em>invalid</em> are the others</p>
    <p>
        <label for="placeholder">placeholder</label>
        <input type="text" name="placeholder" placeholder="Placeholder text">
    </p>
    <p>
        <label for="autofocus">autofocus</label>
        <input type="text" name="autofocus" autofocus>
    </p>
    <p>
        <label for="email">email</label>
        <input name="email" type="email" class="email">
    </p>
    <p>
        <label for="phone">pattern</label>
        <input type="phone" name="phone" pattern="^0[1-689][0-9]{8}$" placeholder="Phone" required>
    </p>
    <p>
        <label for="url">url</label>
        <input name="url" type="url">
    </p>
    <p>
        <label for="date">date</label>
        <input name="date" type="date"><br>
        <input type="date"><br>
        <input type="datetime"><br>
        <input type="month"><br>
        <input type="week"><br>
        <input type="time"><br>
    </p>
    <p>
        <label for="search">search</label>
        <input name="search" results="5" autosave="jsfiddle_zWTSy" type="search">
    </p>
    <p class="help"><a href="http://css-tricks.com/webkit-html5-search-inputs/" target="_new">CSS Tricks - Search</a></p>
    <p>
        <label for="slider">slider</label>
        <input name="number" type="range" min="0" max="10" step="2">
    </p>
</form>

CSS

body { font-family: Helvetica, Sans, Arial; font-size: 16px; }  
p, label { line-height: 24px; }
p.help { font-size: 0.6em; color: #777; padding-left: 120px; }
em { font-style: italic; }
label { display: block; width: 110px; padding-right: 10px; float: left; text-align: right; }
input { border: 1px #999 solid; margin-left: 120px; padding: 2px; }
p input:first-of-type { margin-left: 0px;}
input[required] { border: 2px #999 solid; }