浅说label标签

1.label标签的作用

我们知道一个完整的表单是由表单标签<form></form>与其中包裹的各种表单控件组成的。label标签是一种常见的表单控件。它的作用是使用户在填写表单的项目时有更好的体验。比如说如下这个例子:

    <form action="">
        <label for="xiaohao">表单</label>
        <input type="text" id="xiaohao ">
    </form>

输入的显示结果是:

 

label标签的作用是为鼠标用户改进了可用性，当用户点击【<label>】标签中的文本时，浏览器就会自动将焦点转到和该标签相关联的控件上，但前提是input的id需要和label标签的name名一致。

• 若是不想id和for关联的话还可以使用第二种方式

就是label中嵌套input等，案例图如下：

    <form action="">
        <label>
            小豪<input type="text" id="">
        </label>

    </form>

 与上面效果是一样的,不过注意的是label标签这时不能加for属性了,当然其他表单控件也可以与label关联,就不一一细说了。