Menu
How to keep the radio button ( ) or checkbox [ ] and its label together when text wraps as the browser window is made narrower, so that we don't end up with this:
[ ] pepperoni [ ] anchovies [ ] mushrooms [ ]
olives
EDIT in response to nowrap suggestions. Thanks for the suggestion. Almost there. It works perfectly in Chrome, FF, and Opera but not in IE9. When the page CSS is label {white-space: nowrap} and the markup is:
<td>
<div>
<label>
<input type="radio" name="pizza" checked="true"
id="pepperoni" value="pepperoni" />pepperoni </label>
<label>
<input type="radio" name="pizza"
id="anchovies" value="anchovies" />anchovies </label>
<label>
<input type="radio" name="pizza"
id="mushrooms" value="mushrooms" />mushrooms </label>
<label>
<input type="radio" name="pizza"
id="olives" value="olives" />olives </label>
</div>
</td>
the TD becomes fixed-width in IE9; the TD won't shrink when the browser window is made narrower, and I get this:
( ] pepperoni ( ) anchovies ( ) mushrooms ( ) olives
when I need this:
( ) pepperoni ( ) anchovies
( ) mushrooms ( ) olives
Is there any additional trick for IE9? I tried putting a span containing a single space between the labels: ...</label><span> </span><label>... but that did not work.
910
Grouping controls is most important for related radio buttons and checkboxes. A set of radio buttons or checkboxes is related when they all submit values for a single named field. So in your example of a gender selection radio input, a fieldset makes perfect sense.
Additional Guidelines. Use standard visual representations. A checkbox should be a small square that has a checkmark or an X when selected. A radio button should be a small circle that has a solid circle inside it when selected.
You can check a radio button by default by adding the checked HTML attribute to the <input> element. You can disable a radio button by adding the disabled HTML attribute to both the <label> and the <input> .
To label a radio button, add a <label> element after the <input> element and insert a for attribute with the same value as the id of the associated <input> element. Then, write your label text in the <label> tag.
Surround both with a <span> container and set white-space: nowrap; on it.
<span style="white-space: nowrap;">
<input type="checkbox" id="in1" />
<label for="in1">pepperoni</label>
</span>
<span style="white-space: nowrap;">
<input type="checkbox" id="in2" />
<label for="in2">anchovies</label>
</span>
<span style="white-space: nowrap;">
<input type="checkbox" id="in3" />
<label for="in3">mushrooms</label>
</span>
<span style="white-space: nowrap;">
<input type="checkbox" id="in4" />
<label for="in4">olives</label>
</span>
EDIT
As mentioned by @xiaoyi, you could also use the <label> itself as the container:
<label style="white-space: nowrap;"> <input type="checkbox" /> pepperoni</label>
<!-- etc -->
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
