Label Helper Makes It Into Edge Rails

Changeset 7541 just made me a happy man. The first thing that I do with every rails I app I work on is install Rick Olson’s label helper plugin. With the aforementioned changeset though, a helper for making form labels has been added to rails core. This will save me time on each rails app which means time to market is now around 4 minutes. :)

A Few Examples

label(:post, :title) 
#=> <label for="post_title">Title</label> 

label(:post, :title, "A short title") 
#=> <label for="post_title">A short title</label> 

label(:post, :title, "A short title", :class => "title_label") 
#=> <label for="post_title" class="title_label">A short title</label>

I do find it odd that they didn’t add label’s partner, label_tag. All the other form helpers (text_field => text_field_tag, select => select_tag, etc.) have an _tag companion method. Maybe I missed it somewhere.

For those that don’t use labels, you should. They are good for accessibility and also when clicked, highlight the associated field element, if you code them correctly.

4 Comments

Andrew Vit
Sep 30, 2007

It doesn’t look like this initial version of the helper takes a block parameter: the alternate use of is to put the target element inside the tags, instead of having separate label and input with a “for=” reference. I do this a lot for checkboxes, to keep the elements nicely grouped together.
John Nunemaker
Oct 01, 2007

Good point. Hadn’t thought of using a block for that.
Brian Howard
Oct 04, 2007

Could expand on this comment for me: “They are good for accessibility and also when clicked, highlight the associated field element, if you code them correctly.” I have used labels and know they are a good idea but never really knew how to make them more useful.

Thanks
John Nunemaker
Oct 05, 2007
@Brian Howard – Accessbility: Screen readers can tell which form element the label is related to if the label has a for attribute and the element has an id that is in the for attribute. For example…
```
&lt;label for="user_name"&gt;Name:&lt;/label&gt;
&lt;input type="text" id="user_name" name="user[name]" /&gt;
```
If the for attribute lines up with the form element id then, in most browsers, you can click the label text and it will put the cursor in the form element or make it active if it is a select, option or check box.

The other way of using labels is just to wrap them around the form control like so…
```
&lt;label&gt;Name: &lt;input type="text" id="user_name" name="user[name]" /&gt;&lt;/label&gt;
```