使用带有单选按钮的 HTML 'label' 标签 [英] Using the HTML 'label' tag with radio buttons

问题描述

label 标签是否与单选按钮一起使用?如果是这样，你如何使用它?我有一个显示如下的表单:

Does the label tag work with radio buttons? If so, how do you use it? I have a form that displays like this:

First Name: (text field)
Hair Color: (color drop-down)
Description: (text area)
Salutation: (radio buttons for Mr., Mrs., Miss)

我想对左列中的每个标签使用 label 标记来定义其与右列中相应控件的连接.但是如果我使用单选按钮，规范似乎突然表明表单控件的实际Salutation"标签不再属于 label 标签，而是选项Mr., Mrs.， 等等."进入 label 标签.

I'd like to use the label tag for each label in the left column to define its connection to the appropriate control in the right column. But If I use a radio button, the spec seems to indicate that suddenly the actual "Salutation" label for the form control no longer belongs in the label tag, but rather the options "Mr., Mrs., etc." go in the label tag.

我一直是可访问性和语义网络的粉丝，但这种设计对我来说没有意义.label 标签明确声明标签.option 标签选择选项.如何在一组单选按钮的实际标签上声明 label?

I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me. The label tag explicitly declares labels. The option tag selection options. How do you declare a label on the actual label for a set of radio buttons?

更新:这是一个带有代码的示例:

UPDATE: Here is an example with code:

<tr><th><label for"sc">Status:</label></th>
    <td>&#160;</td>
    <td><select name="statusCode" id="sc">
            <option value="ON_TIME">On Time</option>
            <option value="LATE">Late</option>
        </select></td></tr>

这很好用.但与其他表单控件不同的是，单选按钮的每个值都有一个单独的字段:

This works great. But unlike other form controls, radio buttons have a separate field for each value:

<tr><th align="right"><label for="???">Activity:</label></th>
    <td>&#160;</td>
    <td align="left"><input type="radio" name="es" value="" id="es0" /> Active &#160;
        <input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /> Completed on Time &#160;
        <input type="radio" name="es" value="LATE" id="es2" /> Completed Late &#160;
        <input type="radio" name="es" value="CANCELED" id="es3" /> Canceled</td>
</tr>

怎么办?

推荐答案

label 标签是否与单选按钮一起使用?

Does the label tag work with radio buttons?

是的

如果是这样，你如何使用它?

If so, how do you use it?

与任何其他表单控件相同.

Same way as for any other form control.

你要么给它一个 for 属性来匹配控件的 id，或者你把控件放在 label 元素中.

You either give it a for attribute that matches the id of the control, or you put the control inside the label element.

我想为左列中的每个标签使用标签标签

I'd like to use the label tag for each label in the left column

标签用于一个控件，而不是一组控件.

A label is for a control, not a set of controls.

如果要为一组控件添加标题，请使用

和

(并给出 到集合中的每个控件).

If you want to caption a set of controls, use a <fieldset> with a <legend> (and give a <label> to each control in the set).

<fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>

这篇关于使用带有单选按钮的 HTML 'label' 标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！