2

我正在学习一些 HTML，但我对label元素的使用感到困惑，因为我在很多地方都发现了它，在表单中输入，在元素optgroup中的部分带有标签，在elelemt 之前等。selecttextarea

那么，是否有规则何时使用它以及何时避免以错误的方式使用它？特别是在 HTML5 中？

4

4 回答 4

2

该<label>元素应与表单字段一起使用：大多数类型<input>的<select>和<textarea>。如果有一个包含相关元素的for属性。id因此，如果您单击标签，则相关元素将获得焦点。

Jsbin 的示例用法

<label for="textinput">Enter data here</label>
<input id="textinput>"

<input type="checkbox" id="checkbox">
<label for="checkbox">What this box does</label>

<input type="radio" id="radio_opt1" name="radiogroup">
<label for="radio_opt1">Option description</label>
<input type="radio" id="radio_opt2" name="radiogroup">
<label for="radio_opt2">Option description</label>

<label for="select">Select an option</label>
<select id="select">
    <option>Some option</option>
</select>

<label for="textarea">Enter data into the textarea</label>
<textarea id="textarea"></textarea>

在<optgroup>元素中，有一个label属性，它与标签元素不一样，虽然它的作用是相似的：标识某组选项：

<select>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
    <optgroup label="First group">
        <option>Some option</option>
    </optgroup>
</select>
于 2013-09-28T13:58:06.380 回答
1

Label：此属性显式地将正在定义的标签与另一个控件相关联。

因此，label当您想为另一个控件（如文本框、复选框等）显示一些文本或标签时，应该使用该属性。

重要的是

如果存在，此属性的值必须与同一文档中某个其他控件的 id 属性的值相同。如果不存在，则定义的标签与元素的内容相关联。

在此处查看文档

于 2013-09-28T13:57:14.263 回答
0

不，它不是 HTML5 独有的:)

标签可以与表单元素结合使用，例如<input>, <select>, <textarea>. 单击标签会自动将焦点更改为连接的元素。

有两种方式连接标签和元素：

  1. 将元素放在标签内
  2. for为标签添加属性，其中for值是id需要连接的元素

示例（取自http://htmlbook.ru/html/label）：

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>LABEL</title>
 </head>
 <body>
  <form action="handler.php">
   <p><b>Lorem ipsum dolor sit amet...</b></p>
   <p><input type="checkbox" id="check1"><label for="check1">Lorem</label><Br>
   <input type="checkbox" id="check2"><label for="check2">Ipsum</label><Br>
   <input type="checkbox" id="check3"><label for="check3">Dolor</label><Br>
   <input type="checkbox" id="check4"><label for="check4">Sit amet</label></p>
  </form> 
 </body>
</html>
于 2013-09-28T13:58:15.413 回答
-1

它应该只用在带有其他元素的表单中。它可以在现有表单控件之前、之后或周围。这是W3Schools的一个例子。

<form action="demo_form.asp">
  <label for="male">Male</label>
  <input type="radio" name="sex" id="male" value="male"><br>
  <label for="female">Female</label>
  <input type="radio" name="sex" id="female" value="female"><br>
  <input type="submit" value="Submit">
</form>
于 2013-09-28T13:57:02.217 回答