label标签和input之间的对应关系

属性:

  • 全局属性

- 选择label标签时,浏览器会自动将焦点转移到个label相关的input上。

一、书写方法:

  • 1.通过为input设置属性id,在label标签中设置for=id使label文本与对应的inpu他结合起来。

label标签和input之间的对应关系_第1张图片
显示结果
在这里插入图片描述

  • 2.label标签包裹input标签,点击label时,label两次响应,即label本身触发和input触发后冒泡到label上。

在这里插入图片描述

  • 也可以将 直接放在

在这里插入图片描述

二、将一个

  • 当用户聚焦到这个表单输入元素时,屏幕阅读器可以读出标签,让使用辅助技术的用户更容易理解应输入什么数据。
  • 点击关联的标签来聚焦或者激活这个输入元素,这扩大了元素的可点击区域,让包括使用触屏设备在内的用户更容易激活这个元素,获得很好的用户体验。

三、其他使用事项:

  • 关联标签的表单控件称为这个标签的已关联标签的控件。一个 input 可以与多个标签相关联。
  • 点击或者轻触与表单控件相关联的

你可能感兴趣的:(HTML琐碎知识点总结,html)