form表单的优化

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

我当时是懵逼了,平时做的表单也不少,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标签内的健壮性好很多


信息回填

(未完待续)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,185评论 19 139
  • 1.form表单有什么作用?有哪些常用的input 标签,分别有什么作用? HTML 表单用于接收不同类型的用户输...
    大胡子歌歌阅读 933评论 0 1
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,143评论 25 709
  • form简介 是HTML中的一个元素,它表示文档中的一个区域,这个区域包含了交互控件,用于向web服务器提交信息。...
    七里之境阅读 1,393评论 0 1
  • 突然有一天,经过地铁站旁的公交站前时,看见整整齐齐地排列着几十辆的单车。红色的车轮轮毂,双把手如鹤展翅,新颖的车身...
    花香两岸阅读 261评论 0 0