Robby on Rails

Unreal. I was just having a conversation with a designer about this some 20 minutes ago. But we were particularly discussing if we should use a label tag for text fields, or maybe label tags are appropriate only for radio buttons and checkboxes.

And if you’re using Rails, you probably use a form builder anyway, so why not enhance the builder to wrap your form labels in a label element.

I’ve been griping about this before but it’s still worth evangelizing. Especially certain folks - although they’ve started using it in some places - still seem not to really appreciate label tag’s virtues. I still blame Safari, which until its third incarnation didn’t support clickable label elements. But now that it has been fixed, pretty please everyone go and fix your forms.

You can’t tab and set focus on checkboxes? I usually just tab through forms (including forms with checkboxes) and hit space to check them, or another tab to skip over them.

I find it annoying to have to make up IDs for all my form elements. If my design allows, I leave out the “for” attribute and just put the input inside the label element. But not having a label on a checkbox or radio button is just a sin. Hugh: The default behavior on Macs doesn’t put radio buttons, check boxes or select lists into the tab order. (I think it’s a “Universal Access” preference to toggle that…)

One gotcha to watch out for: IDs must be unique for this to work. Often, server-side code will generate a group of checkboxes that have the same HTML name (OK) and ID (not OK).

(Yes, I know HTML element IDs have to be unique anyway, but that isn’t enforced and is easy to overlook.)

The labels are reason alone to justify unique checkbox element IDs, even if you have to give them a name like “email_action_1”, “email_action_2”, etc.

Another tip: you can wrap the form element with a label without worrying about the ‘for’ or ‘id’ attributes.

I’m assuming you’re using Mac OS X Robbie? If so there’s an option to allow tabbing through all form elements, including check-boxes.

That should allow you to use only the keyboard to complete forms. It’s rather annoying that Apple decided the default behaviour would be to only allow tabbing through “Text boxes and lists only”.

Your main point regarding labels still holds as good design practice for those users who prefer to use the mouse.

Thanks for sharing! I’ve incorporated the tip into my own form builder plugin

This has bugged me for a while. It seems form builder should have baked in so we aren’t all rolling our own.

The web framework I use does not support the label tag :(

So how do you put a label on a radio button using Rails’ FormHelper? For an example, fix this code snippet from a partial. Two things are going on here, one this is in a partial which is rendering a collection, hence the :index argument, and two there are three radio buttons to fill a single member field, runner_time.dayIn. How do you make the label refer to the correct radio button, of which there are three: Fri, Sat, and Sun?

<%= radio_button(:runner_time, :dayIn, :value => “Fri”, :index => runner_time_counter) <%= label(:runner_time, :dayIn, “Fri”, :index => runner_time_counter) %> <%= radio_button(:runner_time, :dayIn, :value => “Sat”, :index => runner_time_counter) %> <%= label(:runner_time, :dayIn, “Sat”, :index => runner_time_counter) %> <%= radio_button(:runner_time, :dayIn, :value => “Sun”, :index => runner_time_counter) %> <%= label(:runner_time, :dayIn, “Sun”, :index => runner_time_counter) %>

So how do you put a label on a radio button using Rails’ FormHelper? For an example, fix this code snippet from a partial. Two things are going on here, one this is in a partial which is rendering a collection, hence the :index argument, and two there are three radio buttons to fill a single member field, runner_time.dayIn. How do you make the label refer to the correct radio button, of which there are three: Fri, Sat, and Sun?

<%= radio_button(:runner_time, :dayIn, :value => “Fri”, :index => runner_time_counter) <%= label(:runner_time, :dayIn, “Fri”, :index => runner_time_counter) %> <%= radio_button(:runner_time, :dayIn, :value => “Sat”, :index => runner_time_counter) %> <%= label(:runner_time, :dayIn, “Sat”, :index => runner_time_counter) %> <%= radio_button(:runner_time, :dayIn, :value => “Sun”, :index => runner_time_counter) %> <%= label(:runner_time, :dayIn, “Sun”, :index => runner_time_counter) %>

Unfortunately the label helper does not poperly match the ‘for’ with the ‘id’ of a radio_button. I solved this problem in my custom FormBuilder with the following code:

def radio_button(method, tag_value, options = {})
  input_tag = super
  label_text = options[:label] || tag_value
  input_id = input_tag[/id="(\w*)"/, 1]
  label_tag = label(method, label_text, :for => input_id)
  @template.content_tag(:div, input_tag + label_tag, :class => 'fieldgroup')
end

hey robby

I was directed to here in search of a solution to my problems with checkboxes… I honestly think that the method might be broken (although I’ve thought this before and have been wrong)... anyway, this thing is driving me crazy, I would really appreciate you taking a look at it…

I’ve detailed the problem here:

http://groups.google.com/group/rubyonrails-talk/browse_thread/thread/f4e4f606ddd5ab63?hl=en

Thank you for the article. This is something I never knew and I really appreciate having learned this!

Actually, if you use the radio_button helper, you can still use the label helper like this:

This works because the form helper sets the id of the radio button to “object_property_value” when it’s a radio button.