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>

    效果:

  • 相关阅读:
    Android 开发 学习网站
    Ping 命令详解
    总结 Mac OS 安装 mysql 遇到的各种坑
    转载:django model orM 用字典作为参数,保存数据
    Django模型层Meta内部类详解 [引]
    Django 框架下的bootcamp搭建 ---第二篇笔
    Django 框架下的Blog 搭建 ---第一篇笔记
    Flask +SQL 操作
    python 开源项目大全
    cent OS 安装python
  • 原文地址:https://www.cnblogs.com/Rinpe/p/5539763.html
Copyright © 2011-2022 走看看