<label>个人简介:</label> 为什么要加个<label>...</label>?

来源:6-7 留下您宝贵的意见 - 使用<textarea>标签创建文本域

戀仩沵嘸葾

2016-04-22 16:13

<label>个人简介:</label>   为什么要加个<label>...</label>?     和直接写  个人简介  有什么区别??

写回答 关注

6回答

  • RoughColorText
    2016-04-22 16:30:55
    已采纳

    <label> 标签为 input 元素定义标注(标记)。

    label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

    简单的说大概这就是一个规范,你这里加入的后面应该是一个文本框的了,然后效果大概就是

    http://img.mukewang.com/5719e0d20001eb0703410048.jpg

    加了的话,点击文字和点击文本框是一样的效果的了(触发了文本框控件)

    其他的像是勾选框之类的也是一样的

    当然你不加也是可以的,但就是没有了这个功能了

    戀仩沵嘸葾 回复遗忘的梦之峰

    你吧input标签 整个的放入 <label></label>中间。 也就是 <label>姓名:<input type="text" ></label> 这样再点击姓名的时候 焦点就会自动聚焦在input输入框中了。

    2016-10-21 20:02:45

    共 5 条回复 >

  • Summer1987
    2016-06-13 15:44:29

    为什么我没有所谓出发控件的反应,只是加label前,鼠标显示的是I,不加显示的是箭头

  • 慕莱坞0690818
    2016-04-22 17:01:28

    <>...</>又开始就有结束

    戀仩沵嘸葾

    哈哈 大实话

    2016-04-22 18:02:54

    共 1 条回复 >

  • 向日葵214
    2016-04-22 16:54:15

    它可以设置标签关联。

    举个例子来说一下这样写的方便之处:

    <label for="information">个人简介</label><br />

    <textarea cols="20" rows="20" id="information" name="infor">这里填写你的个人简介</taxtarea>

    当你这样写的时候就把个人简介的标签和填写个人简介的多行文本输入框结合在一起,鼠标点击个人简介的时候,焦点就会移动到<textarea>,然后直接输入即可,很方便。也做到了web的语义化。(注意:label的for属性和相关联的id属性要一致,这里面都是"information")

    http://img.mukewang.com/5719e4ad00014e0d13660736.jpg

    这样子可能还不太明显,再换一个例子:

    <label >性别:</label><br />

    <input type="radio"  id="mail" name="nan" value="男"></input>

    <label for="mail">男</label><br />

    <input type="radio"  id="famail" name="nan" value="男"></input>

    <label for="famail">女</label><br />

    无论是点击label里面的文字还是选中那个小圆点点都可以选择,方便很多。

    http://img.mukewang.com/5719e6800001c19a13660736.jpg

    戀仩沵嘸葾

    <input type="radio" id="mail" name="nan" value="男"></input> 不是应该写成<input type="radio" id="mail" name="nan" value="" /> 吗? 刚刚我问的那个“radio” id 和"mail"name 我搞明白了。。。之前没理解到位。。。

    2016-04-22 17:31:21

    共 2 条回复 >

  • 慕妹3608846
    2016-04-22 16:23:34

    能利用CSS设置样式

    戀仩沵嘸葾

    还没有学习css呢

    2016-04-22 16:29:54

    共 1 条回复 >

  • qq_快乐向往_03182652
    2016-04-22 16:18:58

    web语义化,使其更有意义,比如和<form>一起用的时候就可以很好的对应起来

    戀仩沵嘸葾 回复RoughC...

    刚刚试过了 ,确实是那样的!

    2016-04-22 16:44:53

    共 3 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1228524 学习 · 19002 问题

查看课程

相似问题