checkboxes

['bonehead]

Okay, here's a real nummnuts question:

Can I manipulate the placement of the checkbox's label relative to it's
name? IOW, what if I want the box to appear to the left of the label
instead of to the right?

 

[Jukka K. Korpela]

Okay, here's a real nummnuts question:

No, it was just a pointless intro.

Can I manipulate the placement of the checkbox's label relative to
it's name?
Yes.

IOW, what if I want the box to appear to the left of the
label instead of to the right?

You have some odd meaning for "IOW".

The box normally appears to the left of the label, when you write
<input type="checkbox" ...> <label ...>...</label>

What is the problem with that?

 

[Tina - AffordableHOST.com]

Okay, here's a real nummnuts question:

Can I manipulate the placement of the checkbox's label relative to it's
name? IOW, what if I want the box to appear to the left of the label
instead of to the right?

Yes, you just put the text to whatever side you want. The text that shows
up on the webpage isn't in the actual form code. ;-)

--Tina

 

[David Dorward]

Can I manipulate the placement of the checkbox's label relative to it's
name? IOW, what if I want the box to appear to the left of the label
instead of to the right?

Then you format the label in the usual way for HTML documents - you put it
after the checkbox.

<input type="checkbox" name="animal" value="Dog" id="chkAnimalDog">
<label for="chkAnimalDog">Dog</label> <br>

<input type="checkbox" name="animal" value="Cat" id="chkAnimalCat">
<label for="chkAnimalCat">Cat</label>

 

[Toby A Inkster]

Then you format the label in the usual way for HTML documents - you put it
after the checkbox.

<input type="checkbox" name="animal" value="Dog" id="chkAnimalDog">
<label for="chkAnimalDog">Dog</label> <br>

<input type="checkbox" name="animal" value="Cat" id="chkAnimalCat">
<label for="chkAnimalCat">Cat</label>

True, but this raises an interesting question. Which side is better?

Aesthetically,

[x] an option
[x] another option

looks nice. Everything lined up. But, for a one-dimensional output medium,
such as a screen reader, it makes more sense to have the labels *before*
the input:

an option [x]
another option [x]

However, it may be possible to have your cake and eat it too. Untested:

<div class="checkboxwrapper">
<label for="foo">Foo</label>
<input type="checkbox" name="foo" id="foo">
</div>
<div class="checkboxwrapper">
<label for="bar">Bar</label>
<input type="checkbox" name="bar" id="bar">
</div>

.checkboxwrapper {
position: relative;
}
.checkboxwrapper label {
padding-left: 24px;
}
.checkboxwrapper input {
position: absolute;
top: 0; left: 0;
}

As a side note, for those using labels with an implicit "for", e.g.

<label>Foo <input name="foo"></label>

You may quite like this CSS:

label {
border: 1px dotted white;
}
label:hover {
color: black;
background: #ff9;
border: 1px dotted black;
}

 

[David Dorward]

True, but this raises an interesting question. Which side is better?

Aesthetically,
[x] an option
[x] another option
looks nice.

And is also consistant with the majority of GUI interfaces, which is good
for usability.

Everything lined up. But, for a one-dimensional output medium,
such as a screen reader, it makes more sense to have the labels *before*
the input:

an option [x]
another option [x]

That is why we have <label> elements, to explicitly associate the controls.
I don't know what the support is like, but the data format certainly can
cope.

 

[Jukka K. Korpela]

Aesthetically,

[x] an option
[x] another option

looks nice. Everything lined up. But, for a one-dimensional output
medium, such as a screen reader, it makes more sense to have the
labels *before* the input

It has already become the web-wide "standard" to put the checkbox (or
radio button) before the label. It is now irrelevant whether this was bad
practice; even if it were, it has already become good practice by
becoming so universal. If screen readers have problems with it, they need
to adapt to the "standard", and as far as I know, they have done that.