3-4. Label标签

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,073评论 19 139
  • img标签: img标签中的img其实是英文image的缩写,所以img标签的作用, 就是告诉浏览器我们需要显示一...
    佩佩216阅读 5,517评论 0 2
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 8,706评论 1 41
  • 那时候我还不懂拥抱有多大的意义,为什么朋友聚会结束,非要与我来个拥抱,我是个内心极其保守且封建的女孩!我笑笑还是...
    丑妞阅读 2,880评论 0 1
  • 太多的时候,太多的事情,让我们觉得努力没有意义,放弃了最后的机会。热情没有回应,慢慢就淡了吧,就像爱情,经受不住冷...
    33174dada65f阅读 1,765评论 0 0

友情链接更多精彩内容