label标签

聚焦

• 聚焦有什么作用？
• 怎么样实现聚焦？

解答

• 聚焦能够实现点击文字的时候，光标自动移到包裹文字的输入框标签自动选中该文字对应的输入框
• 让文字和输入框绑定
• 使用label标签

标签

• 特点(区别于其他同父元素下的标签)
• 作用(他的特点注定了他的作用)
• 使用场景(工程项目)
• 怎么样使用(需要容纳在那个标签下、需要配合哪些标签使用)
• 有多少种使用方式，分别有什么优缺点

解答

• 不详
• 实现绑定\聚焦功能
• 实现点击文字，自动选中该数据框
• 把需要文字用label标签包裹起来
• 为输入框设置一个id属性并且为该属性赋值
• 把该属性值赋值给label标签的for属性
• 扩展：如果有多个id属性相同的输入框呢？
• 扩展：能否和其他标签进行绑定？如P标签、H标签
• 扩展：能否有其他标签能够嵌套进label标签，有什么效果？
• 2种实现方式，官方推荐前一种，后一种是没有办法实现交叉绑定的（其实也算不上什么缺点）

解答扩展

• 只会选中第一个
• 是不能的，而且就算和输入框进行绑定，超过一个页面之后也不能实现类似于锚点的功能
• 直接把input标签连带起文字嵌套进入label标签可以直接实现聚焦功能

input标签的补充

• input标签能否脱离其父元素存在(form)
• tr/td/th标签是不能的，li标签却可以
• input标签也是可以的

datalist标签

• 特点(区别于其他同父元素下的标签)
• 作用(他的特点注定了他的作用)
• 使用场景(工程项目)
• 怎么样使用(需要容纳在那个标签下、需要配合哪些标签使用)

解答

• 给输入框绑定待选项
• 例如百度搜索框输入某些关键字后有待选选项
• 在datalist标签中写入option标签，多个option标签包裹待选项
• dalalist标签设定id
• input标签设置list属性，属性值为datalist的id，实现绑定
• 扩展：有没有方法可是实现查看所有带选项
• 扩展：如果带选项过多，怎么隐藏该箭头（毕竟百度输入框没有）
• 百度输入框不是用datalist做的，是用ajax做的
• datalist虽然说是”列表”，但是是无法单独在body中出现的

解答扩展

• 箭头的下拉可以实现查看所有带选项

绑定

• label标签和datalist标签的共同点
• 可以看到，在HTML中凡是涉及到绑定功能的标签都可以用一下2个步骤解决
• 设置id
• 绑定id
• 关键是谁设置id，谁绑定id