Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Connected labels to fields with for/id in example forms #1160

Merged
merged 1 commit into from

2 participants

@peterk

Connected labels to fields with for/id attributes to provide good examples in the form code.

@peterk

Fixed stray closing of tag here.

@mhayes mhayes merged commit 65e2765 into zurb:master
@mhayes

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Nov 10, 2012
  1. @peterk
This page is out of date. Refresh to see the latest.
Showing with 39 additions and 39 deletions.
  1. +39 −39 test/forms.html
View
78 test/forms.html
@@ -51,11 +51,11 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<br>
<div class="eight columns">
<form>
- <label>This is a label.</label>
- <input type="text" placeholder="Standard Input" />
+ <label for="standard_input">This is a label.</label>
+ <input type="text" placeholder="Standard Input" id="standard_input" />
- <label>Address</label>
- <input type="text" class="twelve" placeholder="Street" />
+ <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" />
@@ -76,26 +76,26 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<form>
<div class="row">
<div class="two mobile-one columns">
- <label class="right inline">Address Name:</label>
+ <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" />
+ <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">City:</label>
+ <label class="right inline" for="city">City:</label>
</div>
<div class="ten mobile-three columns">
- <input type="text" class="eight" />
+ <input type="text" class="eight" id="city" />
</div>
</div>
<div class="row">
<div class="two mobile-one columns">
- <label class="right inline">ZIP:</label>
+ <label class="right inline" for="zip">ZIP:</label>
</div>
<div class="ten mobile-three columns">
- <input type="text" class="three" />
+ <input type="text" class="three" id="zip" />
</div>
</div>
</form>
@@ -116,11 +116,11 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<legend>Fieldset Name</legend>
- <label>This is a label.</label>
- <input type="text" placeholder="Standard Input" />
+ <label for="standard_input_2">This is a label.</label>
+ <input type="text" placeholder="Standard Input" id="standard_input_2"/>
- <label>Address</label>
- <input type="text" />
+ <label for="address_2">Address</label>
+ <input type="text" id="address_2" />
<input type="text" class="six" />
</fieldset>
@@ -138,7 +138,7 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
</div>
<br>
<div class="eight columns">
- <label>Input with a prefix character</label>
+ <label for="input_prefix">Input with a prefix character</label>
<div class="row">
<div class="eight columns">
<div class="row collapse">
@@ -146,17 +146,17 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<span class="prefix">#</span>
</div>
<div class="ten mobile-three columns">
- <input type="text" />
+ <input type="text" id="input_prefix" />
</div>
</div>
</div>
</div>
- <label>Input with a postfix label</label>
+ <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" />
+ <input type="text" id="input_postfix" />
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
@@ -164,12 +164,12 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
</div>
</div>
</div>
- <label>Input with a postfix action (button)</label>
+ <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" />
+ <input type="text" id="input_postfix_button" />
</div>
<div class="four mobile-one columns">
<a class="button expand postfix">Search</a>
@@ -192,14 +192,14 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<div class="eight columns">
<div class="row">
<div class="six columns">
- <label class="error">Field with Error</label>
- <input type="text" class="error" />
+ <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>Another Error</label>
- <input type="text" />
+ <label for="error_2">Another Error</label>
+ <input type="text" id="error_2" />
<small>Invalid entry</small>
</div>
</div>
@@ -219,26 +219,26 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<div class="row">
<div class="five columns">
- <label>Name</label>
- <input type="text" />
+ <label for="name">Name</label>
+ <input type="text" id="name" />
- <label>Occupation</label>
- <input type="text" />
+ <label for="occupation">Occupation</label>
+ <input type="text" id="occupation" />
- <label>Twitter</label>
+ <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" />
+ <input type="text" placeholder="foundationzurb" id="twitter" />
</div>
</div>
- <label>URL</label>
+ <label for="url">URL</label>
<div class="row collapse">
<div class="nine mobile-three columns">
- <input type="text" placeholder="foundation.zurb" />
+ <input type="text" placeholder="foundation.zurb" id="url"/>
</div>
<div class="three mobile-one columns">
<span class="postfix">.com</span>
@@ -249,27 +249,27 @@ <h4 class="subheader">We set out in Foundation 3 to create an easy to handle, po
<div class="five columns">
- <label class="error">Field with Error</label>
- <input type="text" class="error" />
+ <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>Another Error</label>
- <input type="text" />
+ <label for="error_4">Another Error</label>
+ <input type="text" id="error_4" />
<small>Invalid entry</small>
</div>
</div>
</div>
- <label>Address</label>
- <input type="text" placeholder="Street (e.g. 123 Awesome St.)" />
+ <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" />
+ <div class="two columns">
<select>
<option>CA</option>
</select>
Something went wrong with that request. Please try again.