Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

372 lines (326 sloc) 14.754 kB
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8" />
<!-- Set the viewport width to device width for mobile -->
<meta name="viewport" content="width=device-width" />
<title>Foundation Forms Testing</title>
<!-- Included CSS Files -->
<link rel="stylesheet" href="stylesheets/styles.css">
<script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>
</head>
<body>
<div class="row">
<div class="twelve columns">
<p><a href="index.html">&laquo; Back</a></p>
<h2>Foundation Forms Testing</h2>
<hr />
<dl class="sub-nav">
<dt>Go to:</dt>
<dd><a href="#row-layout">Row Layout</a></dd>
<dd><a href="#fieldsets">Fieldsets</a></dd>
<dd><a href="#collapsed">Collapsed Columns</a></dd>
<dd><a href="#errors">Errors</a></dd>
<dd><a href="#custom">Custom Inputs</a></dd>
</dl>
</div>
</div>
<!-- Test Foundation Components Here -->
<div class="row">
<div class="twelve columns">
<a name="general"></a>
<h3>Forms</h3>
<h4 class="subheader">We set out in Foundation 3 to create an easy to handle, powerful, and versatile form layout system. A combination of form styles and the Foundation grid means you can do basically anything.</h4>
<br>
<div class="row">
<div class="four columns">
<a name="row-layout"></a>
<h4>Row Layouts</h4>
<p>Here's an example of a form layout controlled with rows and columns.</p>
</div>
<br>
<div class="eight columns">
<form>
<label for="standard_input">This is a label.</label>
<input type="text" placeholder="Standard Input" id="standard_input" />
<label for="address_1">Address</label>
<input type="text" class="twelve" placeholder="Street" id="address_1" />
<div class="row">
<div class="six columns">
<input type="text" placeholder="City" />
</div>
<div class="three columns">
<input type="text" placeholder="State" />
</div>
<div class="three columns">
<input type="text" placeholder="ZIP" />
</div>
</div>
<textarea placeholder="Message"></textarea>
</form>
<p>Sometimes you want a form with labels to the left of your inputs. Piece of cake. You can add a class of <code>.right</code> to a label to have it align to the right, and if your label is next to an input (in another column) adding a class of <code>.inline</code> will have it vertically center against an input.</p>
<br>
<form>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline" for="address_name">Address Name:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" placeholder="e.g. Home" class="eight" id="address_name" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline" for="city">City:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" class="eight" id="city" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline" for="zip">ZIP:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" class="three" id="zip" />
</div>
</div>
</form>
</div>
</div>
<br>
<div class="row">
<div class="four columns">
<a name="fieldsets"></a>
<h4>Fieldsets</h4>
<p>Simple elements that can contain all or part of a form to create better division.</p>
</div>
<div class="eight columns">
<form class="custom">
<fieldset>
<legend>Fieldset Name</legend>
<label for="standard_input_2">This is a label.</label>
<input type="text" placeholder="Standard Input" id="standard_input_2"/>
<label for="address_2">Address</label>
<input type="text" id="address_2" />
<input type="text" class="six" />
</fieldset>
</form>
</div>
</div>
<br>
<div class="row">
<div class="four columns">
<a name="collapsed"></a>
<h4>Labels and Actions with Collapsed Columns</h4>
<p>Foundation forms support actions tied to buttons, and prefix / postfix labels. Essentially you can use a 'collapsed' row to create label / action / input combinations. Here are a few examples.</p>
</div>
<br>
<div class="eight columns">
<label for="input_prefix">Input with a prefix character</label>
<div class="row">
<div class="eight columns">
<div class="row collapse">
<div class="two mobile-one columns">
<span class="prefix">#</span>
</div>
<div class="ten mobile-three columns">
<input type="text" id="input_prefix" />
</div>
</div>
</div>
</div>
<label for="input_postfix">Input with a postfix label</label>
<div class="row">
<div class="eight columns">
<div class="row collapse">
<div class="nine mobile-three columns">
<input type="text" id="input_postfix" />
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<label for="input_postfix_button">Input with a postfix action (button)</label>
<div class="row">
<div class="eight columns">
<div class="row collapse">
<div class="eight mobile-three columns">
<input type="text" id="input_postfix_button" />
</div>
<div class="four mobile-one columns">
<a class="button expand postfix">Search</a>
</div>
</div>
</div>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="errors"></a>
<h4>Error States</h4>
<p>Foundation includes error states for labels, inputs and messaging that you can have your app generate programatically.
</div>
<br>
<div class="eight columns">
<div class="row">
<div class="six columns">
<label class="error" for="error">Field with Error</label>
<input type="text" class="error" id="error" />
<small class="error">Invalid entry</small>
</div>
<div class="six columns end error">
<label for="error_2">Another Error</label>
<input type="text" id="error_2" />
<small>Invalid entry</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="four columns">
<h4>Large Form Example</h4>
<p>Here's an example of a really extensive form.</p>
</div>
<div class="eight columns">
<form>
<fieldset>
<legend>Large Form Example</legend>
<div class="row">
<div class="five columns">
<label for="name">Name</label>
<input type="text" id="name" />
<label for="occupation">Occupation</label>
<input type="text" id="occupation" />
<label for="twitter">Twitter</label>
<div class="row collapse">
<div class="two mobile-one columns">
<span class="prefix">@</span>
</div>
<div class="ten mobile-three columns">
<input type="text" placeholder="foundationzurb" id="twitter" />
</div>
</div>
<label for="url">URL</label>
<div class="row collapse">
<div class="nine mobile-three columns">
<input type="text" placeholder="foundation.zurb" id="url"/>
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
<div class="five columns">
<label class="error" for="error_3">Field with Error</label>
<input type="text" class="error" id="error_3" />
<small class="error">Invalid entry</small>
<div class="error">
<label for="error_4">Another Error</label>
<input type="text" id="error_4" />
<small>Invalid entry</small>
</div>
</div>
</div>
<label for="address_3">Address</label>
<input type="text" placeholder="Street (e.g. 123 Awesome St.)" id="address_3" />
<div class="row">
<div class="six columns">
<input type="text" placeholder="City" />
</div>
<div class="two columns">
<select>
<option>CA</option>
</select>
</div>
<div class="four columns">
<input type="text" placeholder="ZIP" />
</div>
</div>
<textarea placeholder="Type something here..."></textarea>
</fieldset>
</form>
</div>
</div>
<br><br>
<div class="row">
<div class="four columns">
<a name="custom"></a>
<h4>Custom Inputs</h4>
<p>Custom form input types that are included with Foundation.</p>
</div>
<div class="eight columns">
<form class="custom">
<h5>Radio Buttons and Checkboxes</h5>
<div class="row">
<div class="four columns">
<label for="radio1"><input name="radio1" type="radio" id="radio1" style="display:none;"><span class="custom radio"></span> Radio Button 1</label>
<label for="radio2"><input name="radio1" type="radio" id="radio2" style="display:none;"><span class="custom radio checked"></span> Radio Button 2</label>
<label for="radio3"><input name="radio1" type="radio" id="radio3" disabled style="display:none;"><span class="custom radio"></span> Radio Button 3</label>
</div>
<div class="four columns">
<label for="radio4"><input name="radio2" type="radio" id="radio4"> Radio Button 1</label>
<label for="radio5"><input name="radio2" CHECKED type="radio" id="radio5"> Radio Button 2</label>
<label for="radio6"><input name="radio2" type="radio" id="radio6"> Radio Button 3</label>
</div>
<div class="four columns">
<label for="checkbox1"><input type="checkbox" id="checkbox1" style="display: none;"><span class="custom checkbox"></span> Label for Checkbox</label>
<label for="checkbox2"><input type="checkbox" id="checkbox2" checked style="display: none;"><span class="custom checkbox checked"></span> Label for Checkbox</label>
<label for="checkbox3"><input type="checkbox" CHECKED id="checkbox3"> Label for Checkbox</label>
</div>
</div>
<br />
<h5>Dropdown / Select Elements</h5>
<label for="customDropdown">Dropdown Label</label>
<select style="display:none;" id="customDropdown">
<option SELECTED>This is a dropdown</option>
<option>This is another option</option>
<option>Look, a third option</option>
</select>
<div class="custom dropdown">
<a href="#" class="current">
This is a dropdown
</a>
<a href="#" class="selector"></a>
<ul>
<li>This is a dropdown</li>
<li>This is another option</li>
<li>Look, a third option</li>
</ul>
</div>
<label for="customDropdown2">Dropdown Label</label>
<select id="customDropdown2">
<option>This is a dropdown</option>
<option SELECTED>This is another option</option>
<option>Look, a third option</option>
</select>
</form>
</div>
</div>
</div>
</div>
<!-- Included JS Files -->
<script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
<script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
<script src="../vendor/assets/javascripts/foundation/app.js"></script>
<script type="text/javascript">
// Page-Specific JavaScript Goes Here
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.