Thread

Why don’t you use label tags for your check boxes? Is there something wrong with that? Every site I go to I try to click the text next to the check box. I’m disappointed when it doesn’t work :(

It’s a minor issue I think. If it’s really bothering you, you might want to suggest it in the features request forum…

Well I figured the features forum was more towards the actual framework. I was just wondering if there is some kind of “unsupport” for label tags that I’m not aware of, or any special reason not to have them. It just took me by surprise I guess.

I never noticed it but i never use the checkboxes. From an accessibility point of view you are right they should use labels and layout wise there isn’t a problem either because even IE6 can use the adjacent-sibling selector

label + input {}
input + label {}

I agree with bramme saying it’s a minor problem but as the CI forum is a live demo of their EE forum they should make it conform with current standard behaviour.

Going through a few EE forums / templates it seems to be pretty standard behavior of the software.  Probably best brought to attention in the EE feature request section.

I apologise IE6 can’t use the adjacent-sibling selector.

Maybe I’m missing it but… what would the adjacent selector have to do with it?

I agree, labels should be implemented - I always try text before the actual box on every site I visit. A pet peeve of mine - just to see how accessible it really is. In the real world, I’m usually tabbing through the form anyways, so it doesn’t bother me.

Maybe I’m missing it but… what would the adjacent selector have to do with it?

I agree, labels should be implemented - I always try text before the actual box on every site I visit. A pet peeve of mine - just to see how accessible it really is. In the real world, I’m usually tabbing through the form anyways, so it doesn’t bother me.

Aren’t you bothered then by the fact you can’t tab through the “New Topic” form? Well, you can, but you just have to tab through the formatting options when the focus is at the title.

Going through a few EE forums / templates it seems to be pretty standard behavior of the software.  Probably best brought to attention in the EE feature request section.

You can’t post in the request forum unless you own a bought license :(

I was going to make a topic there with some forum feature requests (tabindex on some forms, labels and font styling for textareas (I hate Courier New in textareas))

The adjecent selector offers you the possibility of putting the label left or right from an input element without the need of adding a class. But because IE6 can’t handle it you are forced to use a class.
I like html to be with as less classes and ids as possible. If you have a good page structure you can do much with the DOM searching CSS possesses.

I’m nitpicking here but as you can see the text is slightly lower than the radio buttons and checkboxes. This can be solved by putting the text in a label and lay-out the labels. This is where the adjecent selector comes in.

Ah heck, since I’m feeling generous today.  Request made.

Use Safari and you won’t have to worry about tabindex (ok, it only does textfields/areas, but it really is much faster).

thanks. I could use Safari, I guess. But I got so accustomed to firefox…

Not using labels is a pet peeve of mine as well, although there are a few legitimate reasons not to use them.

My favorite format for adding labels to form fields is this:

<label class="[required|not-required] [error|no-error] [one-line|two-line] [{control-type}]">
 <span class="label">Form Field Label</span>
 <span class="field">Form Field</span>
 <span class="message">[error-message][field-information]</span>
</label>

It’s verbose, but it’s extraordinarily flexible. The W3C spec declares: “To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.” The advantage of this is that I don’t need to define an ID property for each of my form controls but still get the desired behavior. It also acts as a very capable simulacrum of a tabular format without resorting to tables. I can define some basic CSS and get an elegant LABEL->FIELD appearance that I can bend and tweak really easily.

I always design it very simply, like this:

<form>
<label>Sprinkles <input type="checkbox" value="Y" /></label>

<label>Oreos <input type="checkbox" value="Y" /></label>

<label>Chocolate Syrup <input type="checkbox" value="Y" /></label>

</form>

Oh and thanks for putting in that request! I believe it can only help 😊

Notice to the people who are using the input in label approach. The input is disregarded in screenreaders. So if you have a percentage of visual impaired people as your public you might reconsider your approach.

If their aren’t any you can use a nice trick by putting a submit input in a label and style the label while you hide the submit form view. This way you can create fancy buttons.