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

问题描述

标签标签是否使用单选按钮工作？如果是这样，你如何使用它？我有一个如下所示的表单：

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)

我想为左列中的每个标签使用标签标签来定义其与右侧相应控件的连接柱。但是，如果我使用单选按钮，则规范似乎表明，表单控件的实际Salutation标签不再属于标签标签，而是选项先生，夫人，等等进入标签标签。

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.

我一直是可访问性和语义网的粉丝，但是这个设计对我来说没有意义。 标签标签显式声明了标签。 选项标记选择选项。如何在一组单选按钮的实际标签上声明一个标签？

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>

怎么办？

What to do?

推荐答案

标签标签是否与单选按钮一起工作？

Does the label tag work with radio buttons?

是
$ b

Yes

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

If so, how do you use it?

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

Same way as for any other form control.

您可以为属性赋予它< code> 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想为左栏中的每个标签使用标签标签

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

标签用于 a 控制，而不是一组控件。

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

如果您想为一组控件添加标题，请使用< fieldset> 带有< legend> （并给该集合中的每个控件一个< label> >）。

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“标签”标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！