Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

402 lines (356 sloc) 15.09 kb
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[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>
<!-- IE Fix for HTML5 Tags -->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</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">
<form class="custom">
<div class="row collapse">
<div class="eight mobile-three columns">
<input type="text" />
</div>
<div class="four mobile-one columns">
<a href="#" class="postfix button">Buscar</a>
</div>
</div>
<div class="row">
<div class="six columns">
<label for="radio1">
<input name="radio1" type="radio" id="radio1"
checked="checked" style="display:none;">
<span class="custom radio"></span> RB1
</label>
</div>
<div class="six columns">
<label for="radio2">
<input name="radio1" type="radio" id="radio2"
style="display:none;">
<span class="custom radio"></span> RB2
</label>
</div>
</div>
</form>
<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>This is a label.</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" class="twelve" placeholder="Street" />
<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>
</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">Address Name:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" placeholder="e.g. Home" class="eight" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">City:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" class="eight" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
<label class="right inline">ZIP:</label>
</div>
<div class="ten mobile-three columns">
<input type="text" class="three" />
</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>This is a label.</label>
<input type="text" placeholder="Standard Input" />
<label>Address</label>
<input type="text" />
<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>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" />
</div>
</div>
</div>
</div>
<label>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" />
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
</div>
<label>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" />
</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">Field with Error</label>
<input type="text" class="error" />
<small class="error">Invalid entry</small>
</div>
<div class="six columns end error">
<label>Another Error</label>
<input type="text" />
<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>Name</label>
<input type="text" />
<label>Occupation</label>
<input type="text" />
<label>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" />
</div>
</div>
<label>URL</label>
<div class="row collapse">
<div class="nine mobile-three columns">
<input type="text" placeholder="foundation.zurb" />
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
</div>
</div>
</div>
<div class="five columns">
<label class="error">Field with Error</label>
<input type="text" class="error" />
<small class="error">Invalid entry</small>
<div class="error">
<label>Another Error</label>
<input type="text" />
<small>Invalid entry</small>
</div>
</div>
</div>
<label>Address</label>
<input type="text" placeholder="Street (e.g. 123 Awesome St.)" />
<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>
</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.