Menu
I saw 2 different method on same form example:
on http://www.alistapart.com/articles/prettyaccessibleforms/ why they are using 2 method in first fieldset they are keeping input after labeland in 2nd fieldset they are keeping input after label. Why?
<fieldset>
<legend>Delivery Details</legend>
<ol>
<li>
<label for="name">Name<em>*</em></label>
<input id="name" />
</li>
<li>
<label for="address1">Address<em>*</em></label>
<input id="address1" />
</li>
<li>
<label for="address2">Address 2</label>
<input id="address2" />
</li>
<li>
<label for="town-city">Town/City</label>
<input id="town-city" />
</li>
<li>
<label for="county">County<em>*</em></label>
<input id="county" />
</li>
<li>
<label for="postcode">Postcode<em>*</em></label>
<input id="postcode" />
</li>
<li>
<fieldset>
<legend>Is this address also your invoice »
address?<em>*</em></legend>
<label><input type="radio" »
name="invoice-address" /> Yes</label>
<label><input type="radio" »
name="invoice-address" /> No</label>
</fieldset>
</li>
</ol>
</fieldset>
why they are sometime keeping input after label and sometime inside?
Update:
here http://www.usability.com.au/resources/forms.cfm they are also keeping input after label not inside
865
Not all inputs need labels An input with a type="submit" or type="button" does not need a label — the value attribute acts as the accessible label text instead. An input with type="hidden" is also fine without a label.
When using input elements of “type” checkbox and radio the label element should always be placed after the <input> element. Label elements should be associate with the following form elements: Input type = "text" Input type = "checkbox"
Using float and overflow attributes: Make a label and style it with float attribute. Now set the label float(position) left or right according to your requirement. This will align your label accordingly. Overflow property for input is used here to clip the overflow part and show the rest.
Thus, each form control can be referenced by multiple labels, but each label can only reference one control. So if it makes sense to have a second label for a control (and in the situation you describe, it does) feel free to add a second label.
This is according to the specs, and works in all modern browsers (but not in IE6 - clicking the label will not set focus to the input control, unless you include an id and for):
<label>
Name: <input type="textbox" name="firstName" />
</label>
As for "why" - In the <fieldset>, the radio buttons were put in the labels so there won't be an unclickable gap between the label and its radio button.
83
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
