3-4. Label标签

作者: 一Left一 | 来源:发表于2017-11-09 21:47 被阅读8次

1、将没有关联的文字和输入框等关联起来,点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要让文字和输入框进行绑定

  • <label> 标签为 input 元素定义标注(标记)。
  • label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
  • 借助Label标签可以实现相关的绑定

2、绑定格式:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。

  • 将文字利用label标签包裹起来
  • 给输入框添加一个id属性
  • 在label标签中通过for属性和输入框中的id进行绑定即可
    <label for="account">账号:</label><input type="text" id="account">
    格式2: 直接将文字和表单元素用Label包裹
<body>
<!--
form: 是一个复合标签
格式:
<form>
  相关表单元素/标签/标记
</form>

相关元素/标签/标记:
       input: 输入 (文本域,密码域,单选框,复选框),通过type属性进行制定
       非input元素
属性:
    action: 是为了制定把收集的信息发送到的地址, 如果是网络地址一定要加上协议:(http://)

注意点:
    1. 所有表单元素,必须要写在form标签之内
-->

<form action="">
    <!--
     input 标签
     type: 指定输入类型
     value: 设置默认的值
     不会自动换行
     name: 告诉服务器,收集的哪一个信息,只有表单元素具备name属性的时候,才会把相应的信息发送到服务器
    -->
    
    <!--1,文本域,单行
     type="text"
     type: 指定输入类型
     value: 设置默认的值
     placeholder: 提供默认的提示信息,没有输入文字的,会出现
    
    -->
    请输入账户: <input type="text" placeholder="务必输入汉语" name="name">
    <!--
    2.密码域:
    type: password
    -->
    <br>
    请输入密码: <input type="password" value="1235456" name="ps">
    <!--
    3. 单选框
    type: radio:收音机
    如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
    注意:要实现单选的功能,要指定name属性相同的值
    -->
    <br>
    性别: 男<input type="radio" name="sex" value="male"> 女<input type="radio" name="sex" value="fmale">

    <!--
    4. 复选框
    type: checkbox
    要指定相同的name值
    如果没有指定值,默认就是on/off,为了服务器辨别,指定value值
    -->
    <br>
    兴趣爱好:
    篮球<input type="checkbox" name="love" value="basketball">
    排球<input type="checkbox" name="love" value="pai">
    乒乓球<input type="checkbox" name="love" value="ping">
    铅球<input type="checkbox" name="love" value="qian">
    选择文件:<input type="file">
    <input type="submit">
</form>
</body>
图片.png

http://www.w3school.com.cn/tags/tag_label.asp

相关文章

  • 3-4. Label标签

    1、将没有关联的文字和输入框等关联起来,点击文字输入框不会聚焦, 如果想点击文字时让对应的输入框聚焦, 那么就需要...

  • HTML 表单之label标签介绍

    转自:HTML 表单之label标签介绍label标签介绍label标签为input元素定义标注(标记),它不会向...

  • label和input绑定

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

  • Bootstrap组件 - 标签、徽章

    知识点 标签给标签添加class .label、.label-default 可用的变体:.label-defau...

  • 8.3-跳转语句

    一、break语句——终止循环 break \\不带标签 break label \\带标签跳转,label是标签...

  • HTML----第三次笔记

    3.1label标签 label标签用于对input标签定义标注 作用:用于绑定一个表单元素,当点击label时,...

  • 利用纯CSS制作轮播图

    做这种轮播图我们先要理解checked标签,label标签。 label: 标签为 input 元素定义标注(标记...

  • H5表单标签label和下拉表单

    一、label标签 label标签用于绑定一个表单元素,当点击label标签内的文本时,浏览器会自动将焦点(光标)...

  • Grafana 配置变量

    label_values(label) 返回label每个指标中的标签值列表。label_values(metri...

  • python gui - 003 tkinter label 调

    label 是标签控件;可以显示文本和位图 Lable 标签 Label=Tkinter.Lable(maste...

网友评论

    本文标题:3-4. Label标签

    本文链接:https://www.haomeiwen.com/subject/yhgmmxtx.html