为什么要使用<label>？

Question

从演示的角度来看,如果我在<label>标签之间写一个文本,它看起来是相同的,如果我没有.

那么,为什么我们要使用这个标签呢？

Answer 1

HTML 不是关于演示文稿.这是一种描述数据的方式.如果您有一些表示输入标签的文本,则将其包装在标签标签中,而不是用于演示,但因为它就是这样.没有标签标签,该文本几乎毫无意义.使用label标签及其for属性(或不是*),您将提供意义和结构,并在您的标记之间形成一种关系,计算机/解析器/浏览器/人员可以更好地理解这种关系.

*for如果您在输入周围包装标签,则不一定需要:

<label>My input
  <input type="text" id="my-input" />
</label>

Answer 2

的for一个的属性label元素对应于id一个属性input元素.如果单击标签,则会将焦点放在输入框上.

例:

<input type="checkbox" id="agree" /> 
<label for="agree">I agree with the Terms and Conditions</label>

看到这个在行动.

如果单击文本,则会选中该框.

Answer 3

单击标签时,焦点将转到相关输入.当难以点击小矩形时,非常方便复选框.

Answer 4

HTML <label>标记有一个特殊功能:它允许您提供for将标签链接到输入字段或其他控件的属性,这样当用户单击标签时,就好像他点击了控件一样.

例如:

<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'>

这意味着当用户点击"标签文本"时,将切换复选框.

这对于可访问性,一般可用性非常有用,并且还允许一些技巧,例如使切换控件看起来不像一个复选框,但在幕后包含一个.

但除此for功能外,该<label>元素与任何其他HTML元素基本相同.

如果您不打算使用该for属性<label>,出于语义原因,使用元素可能仍然是正确的.