Text Fields
HTML
<fieldset>
<div class="field-container">
<label for="text">Text Input <abbr title="Required">*</abbr></label>
<input id="text" type="text" placeholder="Text Input">
</div>
<div class="field-container">
<label for="password">Password</label>
<input id="password" type="password" placeholder="Type your Password">
</div>
<div class="field-container">
<label for="webaddress">Web Address</label>
<input id="webaddress" type="url" placeholder="http://yoursite.com">
</div>
<div class="field-container">
<label for="emailaddress">Email Address</label>
<input id="emailaddress" type="email" placeholder="name@email.com">
</div>
<div class="field-container">
<label for="search">Search</label>
<input id="search" type="search" placeholder="Enter Search Term">
</div>
<div class="field-container">
<label for="text">Number Input <abbr title="Required">*</abbr></label>
<input id="text" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</div>
<div class="field-container">
<label for="textarea">Textarea</label>
<textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</div>
</fieldset>
Html5 Inputs
HTML
<fieldset>
<div class="field-container"><label for="ic">Color input</label> <input type="color" id="ic" value="#000000"></div>
<div class="field-container"><label for="in">Number input</label> <input type="number" id="in" min="0" max="10" value="5"></div>
<div class="field-container"><label for="ir">Range input</label> <input type="range" id="ir" value="10"></div>
<div class="field-container"><label for="idd">Date input</label> <input type="date" id="idd" value="1970-01-01"></div>
<div class="field-container"><label for="idm">Month input</label> <input type="month" id="idm" value="1970-01"></div>
<div class="field-container"><label for="idw">Week input</label> <input type="week" id="idw" value="1970-W01"></div>
<div class="field-container"><label for="idt">Datetime input</label> <input type="datetime" id="idt" value="1970-01-01T00:00:00Z"></div>
<div class="field-container"><label for="idtl">Datetime-local input</label> <input type="datetime-local" id="idtl" value="1970-01-01T00:00"></div>
</fieldset>
Datepicker
HTML