Skip to content

Commit

Permalink
Connected labels to fields with for/id
Browse files Browse the repository at this point in the history
  • Loading branch information
@peterk @mhayes
peterk authored and mhayes committed Nov 10, 2012
1 parent dd0e3ab commit 9d13a27
Showing 1 changed file with 39 additions and 39 deletions.
78 changes: 39 additions & 39 deletions test/forms.html
View file
Expand Up @@ -51,11 +51,11 @@ <h4>Row Layouts</h4>
<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" />
Expand All @@ -76,26 +76,26 @@ <h4>Row Layouts</h4>
<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>
Expand All @@ -116,11 +116,11 @@ <h4>Fieldsets</h4>

<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>
Expand All @@ -138,38 +138,38 @@ <h4>Labels and Actions with Collapsed Columns</h4>
</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">
<div class="two mobile-one columns">
<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>
</div>
</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>
Expand All @@ -192,14 +192,14 @@ <h4>Error States</h4>
<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>
Expand All @@ -219,26 +219,26 @@ <h4>Large Form Example</h4>
<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>
Expand All @@ -249,27 +249,27 @@ <h4>Large Form Example</h4>

<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>
Expand Down

0 comments on commit 9d13a27

Please sign in to comment.