Skip to main content

input 和 label 结合

Docs

  • input 和 label 的关系

    • label 元素一般跟 input 配合使用，用来表示 input 的标题。
    • label 可以跟某个 input 绑定，点击 label 就可以激活对应的 input 变成选中。

  • 将一个 <label> 和一个 <input> 元素匹配在一起

    • 给 <input> 一个 id 属性。
    • <label> 需要一个 for 属性，其值和 <input> 的 id 一样。

  • 也可以将 <input> 直接放在 <label> 里，此时则不需要 for 和 id 属性，因为关联已隐含存在：

    <label
      >Do you like peas?
      <input type="checkbox" name="peas" />
    </label>

  • 将一个 <label> 和一个 <input> 元素相关联主要有这些优点：

    • 标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。
    • 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。
Loading Github Gist ...
Details