---“既然说到产品,那我们来聊一下产品相关的呗?”
---宝宝内心是拒绝的...
---“如果设计一个表单,怎么样能够做到友好...(原话忘了,反正就这个意思)”
我当时是懵逼了,平时做的表单也不少,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标签内的健壮性好很多
信息回填
(未完待续)