IE8 and earlier....
Joseph R. B. Taylor
/Web Designer / Developer/
--------------------------------------
Sites by Joe, LLC
/"Clean, Simple and Elegant Web Design"/
Phone: (609) 335-3076
Web: http://sitesbyjoe.com
Email: j...@sitesbyjoe.com
On 11/10/10 3:45 PM, Kevin Rapley wrote:
I would be interested to gather your thoughts around this solution,
using progress tags to mark progress through the form.
<form action="#" method="post">
<fieldset>
<legend class="visuallyhidden">Form legend text</legend>
<progress value="0.0" max="5.0">
<label for="text-example">
<span class="label">
Label for text input
</span>
<span class="input">
<input type="text" name="text-example" id="text-example" class="text" />
</span>
</label>
</progress>
<progress value="1.0" max="5.0" class="radio-group">
<fieldset>
<legend class="visuallyhidden">Form legend text</legend>
<span class="label">
Label for radio group
</span>
<div class="radiobutton-container">
<progress value="1.1" max="5.0">
<label for="radio-label-1">
<span class="input">
<input type="radio" name="radio-group-name" id="radio-label-1" />
</span>
<span class="label">
Radio label
</span>
</label>
</progress>
<progress value="1.2" max="5.0">
<label for="radio-label-2">
<span class="input">
<input type="radio" name="radio-group-name" id="radio-label-2" />
</span>
<span class="label">
Radio label
</span>
</label>
</progress>
<progress value="1.3" max="5.0">
<label for="radio-label-3">
<span class="input">
<input type="radio" name="radio-group-name" id="radio-label-3" />
</span>
<span class="label">
Radio label
</span>
</label>
</progress>
</div><!-- / .radiobutton-container -->
</fieldset>
</progress><!-- / .radio-group -->
<progress value="2.0" max="5.0" class="checkbox-group">
<fieldset>
<legend class="visuallyhidden">Form legend text</legend>
<span class="label">
Label for checkbox group
</span>
<div class="checkbox-container">
<progress value="2.1" max="5.0">
<label for="checkbox-label-1">
<span class="input">
<input type="checkbox" name="checkbox-label-1" id="checkbox-label-1" />
</span>
<span class="label">
Checkbox label
</span>
</label>
</progress>
<progress value="2.2" max="5.0">
<label for="checkbox-label-2">
<span class="input">
<input type="checkbox" name="checkbox-label-2" id="checkbox-label-2" />
</span>
<span class="label">
Checkbox label
</span>
</label>
</progress>
<progress value="2.3" max="5.0">
<label for="checkbox-label-3">
<span class="input">
<input type="checkbox" name="checkbox-label-3" id="checkbox-label-3" />
</span>
<span class="label">
Checkbox label
</span>
</label>
</progress>
</div><!-- / .checkbox-container -->
</fieldset>
</progress><!-- / .checkbox-group -->
<progress value="3.0" max="5.0">
<label for="select-box-label">
<span class="label">
Option label text
</span>
<span class="input">
<select name="select-box-label" id="select-box-label">
<option selected="selected" data-skip="1">Option text</option>
<option>Option text</option>
<option>Option text</option>
<option>Option text</option>
<option>Option text</option>
</select>
</span>
</label>
</progress>
<progress value="4.0" max="5.0">
<label for="select-box-label">
<span class="label">
Option label text
</span>
<span class="input">
<select name="fancySelect" class="combibox">
<option value="0" selected="selected" data-skip="1">Choose Your
Product</option>
<option value="1"
data-icon="/graphics/structure/forms/products/iphone.png"
data-html-text="iPhone 4<i>in stock</i>">iPhone 4</option>
<option value="2"
data-icon="/graphics/structure/forms/products/ipod.png"
data-html-text="iPod <i>in stock</i>">iPod</option>
<option value="3"
data-icon="/graphics/structure/forms/products/air.png"
data-html-text="MacBook Air<i>out of stock</i>">MacBook
Air</option>
<option value="4"
data-icon="/graphics/structure/forms/products/imac.png"
data-html-text="iMac Station<i>in stock</i>">iMac
Station</option>
</select>
</span>
</label>
</progress>
<progress value="5.0" max="5.0">
<label for="textarea-example">
<span class="label">
Label for textarea
</span>
<span class="input">
<textarea name="textarea-example" id="textarea-example" class="text"
rows="10" cols="51"></textarea>
</span>
</label>
</progress>
<input type="submit" value="Submit form" class="button" />
</fieldset>
</form>
Kevin Rapley
Yoo-zuh-buhl | User Experience Consultant
0115 714 2337 | 0772 345 7862
yoo-zuh-buhl.co.uk <http://yoo-zuh-buhl.co.uk>
Yoo-zuh-buhl, The Terrace, Cultural Quarter, Grantham Road, Lincoln,
LN2 1BD
On 10/11/2010 19:37, Chris Price wrote:
On 10 November 2010 18:52, Thierry Koblentz
<thierry.koble...@gmail.com <mailto:thierry.koble...@gmail.com>> wrote:
I don't think lists should be used for this (there might be a case
for a OL in case of dependant selects, but that would be a
stretch). In the case of DL, I'd say that the relationship between
DTs and DDs is no better than the one created by the labels and
their for attribute.
fwiw, I use divs to wrap controls with their label, not because it
makes things easier to style, but because of the way the form
would look with no such wrapper and no styling.
I'm with you there Thierry
Fieldset is, by definition, a grouping within a form.
The legend describes the fieldset.
The label for and input id link to each other.
There is no subset of fieldset like dt is to dl or li is to ul so the
only logical element would be a div which is neutral.
I can only imagine I would have to grapple with semantics when I need
to break down a li or dd. If you lost the styling in a form built
with a list would it appear to make sense when each element had a
bullet beside it? Would another logical outcome not be that each
fieldset would require a separate list which may comprise 1 element?
--
Chris Price
Choctaw
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
*******************************************************************
