zoukankan      html  css  js  c++  java
  • form表单中的label标签

    小伙伴们,你们在前面学习表单各种控件的时候,有没有发现一个标签--label,这一小节就来揭晓它的作用。

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

    语法:

    <label for="控件id名称">

    注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

    示例:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>form中的lable标签</title>
    </head>
    
    <body>
    <form>
       <label for="male"></label>
      <input type="radio" name="sex" id="male" />
      <br />
      <label for="female"></label>
      <input type="radio" name="sex" id="female" />
      <br />
      <label for="email">输入你的邮箱地址</label>
      <input type="email" id="email" placeholder="Enter email">
    </form>
    <form>
        你对什么运动感兴趣:
        <br />
        <label for="run">慢跑</label>
        <input type="checkbox" id="run">
        <br />
        <label for="pashan">爬山</label>
        <input type="checkbox" id="pashan">
        <br />
        <label for="lanqiu">篮球</label>
        <input type="checkbox" id="lanqiu">
    </form>
    </body>
    </html>

    效果:

  • 相关阅读:
    【ELK】ELK安装与配置
    【Python】函数参数类型及用法
    【ansible】使用ansible安装nginx
    【Gitlab+Jenkins+Ansible】构建自动化部署
    【阿里云文档】常用文档整理
    【SHELL】Linux下安装Oracle Client
    extjs3 tree 指定内容qtip
    ionic3自定义单选
    extjs grid grouping 关闭和展开
    ionic 文本添加清除功能
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5539763.html
Copyright © 2011-2022 走看看