Search
HTML
<form action="#" method="post" class="inline-form search-form">
<fieldset>
<legend class="is-vishidden">Search</legend>
<label for="search-field" class="is-vishidden">Search</label>
<input type="search" placeholder="Search" id="search-field" class="search-field" />
<button class="search-submit">
<span class="icon-search" aria-hidden="true"></span>
<span class="is-vishidden">Search</span>
</button>
</fieldset>
</form>
Address Group
HTML
<form action="#">
<fieldset class="addressgroup">
<legend>Address:</legend>
<div class="field-container">
<label for="streetAddress">Street Address <abbr title="Required" class="req">*</abbr></label>
<input id="streetAddress" type="text" placeholder="Street Address">
</div>
<div class="field-container">
<label for="streetAddress2">Street Address Line 2</label>
<input id="streetAddress2" type="text" placeholder="Street Address Line 2">
</div>
<div class="fieldsTwo">
<div class="field-container">
<label for="city">City <abbr title="Required" class="req">*</abbr></label>
<input id="city" type="text" placeholder="City">
</div>
<div class="field-container">
<label for="state">State / Province <abbr title="Required" class="req">*</abbr></label>
<input id="state" type="text" placeholder="State / Province">
</div>
</div>
<div class="fieldsTwo">
<div class="field-container">
<label for="zip">Zip / Postal Code <abbr title="Required" class="req">*</abbr></label>
<input id="zip" type="text" placeholder="Zip / Postal Code">
</div>
<div class="field-container">
<label for="country">Country <abbr title="Required" class="req">*</abbr></label>
<input id="country" type="text" placeholder="Country">
</div>
</div>
</fieldset>
</form>
Date Group
HTML
<form action="#">
<fieldset class="dategroup">
<legend>Date:</legend>
<div class="fieldsDate">
<div class="field-container field-date-month">
<label for="mm">Month <abbr title="Required" class="req">*</abbr></label>
<input id="mm" class="mm" type="text" placeholder="">
</div>
/
<div class="field-container field-date-day">
<label for="dd">Day <abbr title="Required" class="req">*</abbr></label>
<input id="dd" class="dd" type="text" placeholder="">
</div>
/
<div class="field-container field-date-year">
<label for="yyyy">Year <abbr title="Required" class="req">*</abbr></label>
<input id="yyyy" class="yyyy" type="text" placeholder="">
</div>
</div>
</fieldset>
</form>
Name Group
HTML
<form action="#">
<fieldset class="namegroup">
<legend>Name:</legend>
<div class="fieldsTwo">
<div class="field-container">
<label for="firstName">First Name<abbr title="Required" class="req">*</abbr></label>
<input id="firstName" type="text" placeholder="First Name">
</div>
<div class="field-container">
<label for="lastName">Last Name<abbr title="Required" class="req">*</abbr></label>
<input id="lastName" type="text" placeholder="Last Name">
</div>
</div>
</fieldset>
</form>
Phone Group
Error Example
HTML
<form action="#">
<fieldset class="phonegroup">
<legend>Phone:</legend>
<div class="fieldsPhone">
<label for="phone-ac" class="loneLabel">Area Code & Phone<abbr title="Required" class="req">*</abbr></label>
<div class="field-container field-phone-ac">
<input id="phone-ac" type="text" placeholder="">
</div>
-
<div class="field-container field-phone-pre">
<input id="phone-pre" type="text" placeholder="">
</div>
-
<div class="field-container field-phone-suf">
<input id="phone-suf" type="text" placeholder="">
</div>
</div>
</fieldset>
</form>
<p>Error Example</p>
<form action="#">
<fieldset class="phonegroup">
<legend>Phone:</legend>
<div class="fieldsPhone">
<label for="phone-ac" class="loneLabel error">Area Code & Phone<abbr title="Required" class="req">*</abbr></label>
<div class="field-container field-phone-ac error">
<input id="phone-ac" type="text" placeholder="">
</div>
-
<div class="field-container field-phone-pre error">
<input id="phone-pre" type="text" placeholder="">
</div>
-
<div class="field-container field-phone-suf error">
<input id="phone-suf" type="text" placeholder="">
</div>
</div>
</fieldset>
</form>