test/forms.html in zurb-foundation-3.0.9 vs test/forms.html in zurb-foundation-3.1.0.rc1
- old
+ new
@@ -12,20 +12,20 @@
<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">« Back</a></p>
<h2>Foundation Forms Testing</h2>
<hr />
@@ -37,40 +37,14 @@
<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>
@@ -97,10 +71,11 @@
</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>
@@ -158,11 +133,11 @@
</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>
@@ -225,79 +200,79 @@
<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" />
@@ -307,27 +282,28 @@
</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>
@@ -377,11 +353,11 @@
</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>
@@ -394,8 +370,8 @@
<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>
+ </script>
</body>
</html>