美文网首页
表单之

表单之

作者: 何必如此为难 | 来源:发表于2019-03-25 00:30 被阅读0次

在使用表单的时候,通常会使用到input(HTML),一般来说,
都是搭配label来进行使用。
label的定义和用法:(W3school参考手册)
<label> 标签为 input 元素定义标注(标记)。
label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
微信小程序上也有label,目前可以绑定的控件有:<button>, <checkbox>, <radio>, <switch>。微信小程序官网文档定义:用来改进表单组件的可用性,使用for属性找到对应的id,或者将控件放在该标签下,当点击时,就会触发对应的控件。for优先级高于内部控件,内部有多个控件的时候默认触发第一个控件。
在微信小程序上,通常会使用到<button>, <checkbox>, <radio>, <switch>这几个标签都是添加hidden属性,然后再搭配label标签。通过label标签的for属性进行绑定,只要点击的label标签包含的内容区域,就相当于触发了该标签。这样往往极大的方便了小程序的页面需要点击各种特别的图案或者是区域来触发想要的标签效果。例如button,就能多元化,button将能是各种各样的页面元素,不再仅仅是特定的某几种样式。

image.png
image.png

如上图的单选效果,而使用radio+label就能很轻松的完成。

相关文章

  • HTML 表单之label标签介绍

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

  • 表单之

    在使用表单的时候,通常会使用到input(HTML),一般来说,都是搭配label来进行使用。label的定义和用...

  • HTML----第三次笔记

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

  • H5前端开发学习笔记——0x06表单标签

    本节大纲 课时44表单标签-input(掌握) 课时45表单标签-按钮(掌握) 课时46Label标签(掌握) 课...

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

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

  • HTML基础二笔记(二)

    一、表单补充: 1.Lable标签可以让标签文本点击的时候让label指向的标签表单标签获得焦点。 使用for属性...

  • Form表单练习

    label 与 input label:标签,在表单中与 input 标签绑定使用。eg:1.显式联系 —— la...

  • Html阶段第二小节第二天

    1.表单 代码输入样式如下: 2.label标签 表示Label标签要绑定的HTML元素,你点击这个标签的时候,所...

  • HTML常用的标签

    1. form标签 1.表单可以包含input、label、textareainput标签submit:用于数据提...

  • 2019-01-08基于--mysql的网站内容管理系统的制作

    ①数据库的表单插入 在进行表单插入的时候涉及到label 标签,input标签中的type id placehol...

网友评论

      本文标题:表单之

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