Usability improvement: Make checkbox clickable by label!

Question

Probably you know that e.g. for clicking on "Remember me on this computer" (qa1.5) you need to sniper-hit the checkbox. This is also valid on other pages.

Wouldn't it be easier to let the user click on the text "Remember me on this computer" as well. For this we need to transform it to a label.

This is no bug or severe problem, however, to make q2a great(er) the improvement would be nice ;)

 

From:
<TD CLASS="qa-form-tall-label">
<INPUT NAME="remember" TYPE="checkbox" VALUE="1" CLASS="qa-form-tall-checkbox">
Remember me on this computer
</TD>

To:
<TD CLASS="qa-form-tall-label">
<INPUT NAME="remember" id="remember" TYPE="checkbox" VALUE="1" CLASS="qa-form-tall-checkbox">
<label for="remember">Remember me on this computer</label>
</TD>

Comments

Yes, great point. And for the "Email me if a comment..." box too.

Answer 1

It's a good idea, but a little difficult to implement in a blanket way in the theme class, since element IDs are reserved for the application level. Will have to think about this one...

Comments

Then just add label around INPUT and text:

<label>
<INPUT NAME="remember" TYPE="checkbox" VALUE="1" CLASS="qa-form-tall-checkbox">
Remember me on this computer
</label>

---

Oh wow, I didn't know you could do that - much easier. I've implemented it and it will be part of the 1.5.1 release (which is currently running here).

---

Could you give us the php and the code line where to put the <label>s ? Thanks.

---

Modify form_label(...) in qa-theme-base.php as follows:


function form_label($field, $style, $columns, $prefixed, $suffixed, $colspan)
{
    $extratags='';
   
    if ( ($columns>1) && ((@$field['type']=='select-radio') || (@$field['rows']>1)) )
        $extratags.=' STYLE="vertical-align:top;"';
       
    if (isset($colspan))
        $extratags.=' COLSPAN="'.$colspan.'"';
   
    $this->output('<TD CLASS="qa-form-'.$style.'-label"'.$extratags.'>');
   
    if ($prefixed) {
        $this->output('<LABEL>');
        $this->form_field($field, $style);
    }
           
    $this->output(@$field['label']);
   
    if ($prefixed)
        $this->output('</LABEL>');

    if ($suffixed) {
        $this->output('&nbsp;');
        $this->form_field($field, $style);
    }
   
    $this->output('</TD>');
}

---

so wonderful and userfriendly, big thanks!