为什么要使用<label>?
从演示的angular度来看,如果我在<label>
标签之间写一个文本,它看起来和我没有的文本是一样的。
那么,为什么我们使用这个标签呢?
HTML 不是介绍。 这是一种描述数据的方式。 如果您有一些代表input标签的文本,则将其包装在标签标签中,而不是用于展示,但是因为这就是它的原因。 没有标签标签,那个文本几乎是没有意义的。 使用标签标签及其属性(或不包含*),您正在提供意义和结构,并在您的标记之间形成一种关系,可以被计算机/parsing器/浏览器/人员更好地理解。
*如果您在input周围包装标签for
则不一定需要:
<label>My input <input type="text" id="my-input" /> </label>
label
元素的for
属性对应于input
元素的id
属性。 如果您单击该标签,则会将焦点放在input框上。
例:
<input type="checkbox" id="agree" /> <label for="agree">I agree with the Terms and Conditions</label>
看到这在行动。
如果你点击文本,它将检查框。
HTML <label>
标签有一个特殊的特征:它允许你提供一个将标签链接到input字段或其他控件的for
属性,这样当用户点击标签时,就好像他点击了控件。
例如:
<label for='mycontrol'>Label text</label> <input type='checkbox' name='mycontrol' id='mycontrol' value='1'>
这意味着当用户点击“标签文本”时,该checkbox将被切换。
这对于可访问性,一般的可用性是有用的,并且还允许一些技巧,例如制作看起来不像checkbox但是在幕后包含的切换控制。
但除此之外, <label>
元素与其他任何HTML元素基本相同。
如果您不打算使用for
属性,则出于语义原因,使用<label>
元素可能仍然是正确的。
当你点击标签时,焦点转到相关的input。 非常方便的checkbox,当它很难击中小矩形。
从HTML标签标签 :
“标签元素不会为用户呈现任何特殊的内容,但它为鼠标用户提供了可用性改进,因为如果用户单击标签元素内的文本,它将切换控件。
标签的for属性应该与相关元素的id属性相同,以将它们绑定在一起。
从介绍的angular度来看没有什么。 标签标签用于定义input元素的标签。 从语义的angular度来看,它不应该被用来定义文本。