核心提示:Label标签结合input标签使用功能,在form表单中的input标签前边经常带有注释的文字,比如用户名注册时,我们要求浏览者填写用户名,我们会在对应的 input 前面加上 姓名:,浏览者就知道...
Label标签结合input标签使用功能,在<form>表单中的input标签前边经常带有注释的文字,比如用户名注册时,我们要求浏览者填写用户名,我们会在对应的 input 前面加上 "姓名:",浏览者就知道在哪个文本框中输入相应的内容。
那么,我们在填写注释文字的时候,如果选择直接在<input>标签的前面打上文字,这样的方式也可以实现文字的显示,但是这样要求访问者每次需要输入内容的时候,总是要把鼠标点击到文本框中才可以输入内容,这样存在一定的浏览缺陷,所有,我们需要结合Label标签来实现这个功能。
<label>标签存在于<form>标签中,它包含我们要注释的内容来使用,通过对 input 标签添加一个 id 属性值,然后在label标签中使用 for 属性,for 属性的属性值只要是 input 标签中 id 的属性值,它就能够绑定对应的 input 标签,这个时候,就算我们点击的是 文本框 前面的注释文字,对应的文本框也会实现聚焦。格式如下:
<label for="txt">姓名:</label><input type="text" id="txt" />
除了上面的格式,还有另外一种书写起来比较方便,但是不太严谨的方式。
我们可以直接用label标签把我们的注释文字和文本框一起括起来,这样书写直接省略了 id 属性值,取消了 for 属性绑定,格式如下:
<label>姓名:
<input type="text" />
</label>
但是上面的这种书写方式有比较大的缺陷,比如,我希望点击这里的注释文字,而希望聚焦的是另外的一个文本框,这个时候这样的书写方式就无法实现我们所需要的功能。
所以在企业开发中,我们都使用第一种书写方式,这种书写方式可以当做了解。