美文网首页
form表单的优化

form表单的优化

作者: Yuxin_Liu | 来源:发表于2017-02-25 18:06 被阅读0次

---“既然说到产品,那我们来聊一下产品相关的呗?”
---宝宝内心是拒绝的...
---“如果设计一个表单,怎么样能够做到友好...(原话忘了,反正就这个意思)”

我当时是懵逼了,平时做的表单也不少,label也用、信息回填也用,可偏偏是没想到啊!没说出来啊!!(拒绝犯二拒绝黄赌毒!),只说出了“好看,好用(呵呵🙄)、多步骤引导。。。”


label

label是什么

officially,“它通常关联一个控件,或者是将控件放置在label元素内,或者是用作其属性。”

说白了就是:

  • 关联一个form表单的控件(各种类型的input什么的)
  • “input”包在<label>里面
  • 用for和id相关联

但为什么要用label,因为label能够让控件的点控区域变大,用张鑫旭的话说“单选框点击区域就鼻屎那么大的地方,经常会点不到位置”。。。然而label有多大,点控区就有多大。

label怎么用

两种:

<div>//包住
    <label><input type="checkbox" value="ha-ha"></label>
</div>

<div>//关联
    <label for="ha"></label>
    <input id="ha" type="checkbox" value="ha-ha">
</div>

但据说,通过测试得出了酱紫的一个结论:
使用for和id找到控件元素的方法要比将控件放在label标签内的健壮性好很多


信息回填

(未完待续)

相关文章

  • form表单的优化

    ---“既然说到产品,那我们来聊一下产品相关的呗?”---宝宝内心是拒绝的...---“如果设计一个表单,怎么样能...

  • 关于vue v-decorator

    ant-desigin-vue中form表单的使用 form表单的使用 form表单之获取表单的数据 创建表单 通...

  • bootstrap表单

    bootstrap表单 1、form 声明一个表单域2、form-inline 内联表单域3、form-horiz...

  • Form表单、四种常见的POST请求提交数据方式、MIME【转】

    浏览器行为:Form表单提交 1、form表单常用属性 enctype为form表单数据的编码格式,Content...

  • Vue.js-ElementUI表单

    1 表单el-form 每个表单el-form由多个表单域el-form-item组成。默认情况,表单域是垂直分布...

  • 任务五——task01

    Form表单有什么作用?有哪些常用的input 标签,分别有什么作用? 1. Form表单的作用: Form表单是...

  • 02_html&css

    HTML 表单标签

    form标签属性action:表单提交的路径,可以是html,也可以...

  • 2019-10-24 表单标签

    今天学习了html表单 HTML表单(

    标签) 属性: 1 action:决定表单提交的地...

  • Ant Design form 表单赋值,清空

    1:表单清空:this.form.resetFields();2:表单赋值:this.form.setFields...

  • bootstrap直接对form表进行校验

    form表单可以前端进行校验,当然也可以直接采用bootstrap对form表单进行校验如form表单中有 等相关...

网友评论

      本文标题:form表单的优化

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