|
起因
最近经常在群里看到诸如以下这些问题：
怎么按键盘的Enter键提交表单呢？
移动端怎么聚焦时让键盘变成数字键呢？
移动端如何绑定键盘右下角【提交按钮】事件？
移动端键盘右下角【提交】如果换成【搜索】呢？
针对这些问题分享下我对使用表单的一些建议。
优化前
<ul>
<li>
<span>用户名:</span>
<input type="text" name="username">
</li>
<li>
<span>密码:</span>
<input type="password" name="password">
</li>
<li>
<span>搜索词:</span>
<input type="text" name="key">
</li>
<li>
<span>手机号:</span>
<input type="text" name="tel">
</li>
<li>
<span>年龄:</span>
<input type="text" name="age">
</li>
<li>
<span>自我介绍:</span>
<textarea name="content"></textarea>
</li>
<li style="padding-left: 70px">
<input type="button" value="保存" id="J-save">
</li>
</ul>
<script>
$("#J-save").on("click", function () {
// 验证信息
// 异步 or 同步提交
alert("保存中");
});
</script>
以上代码是常见的表单元素的结构，一般是绑定提交按钮的click事件，然后处理验证用户输入的信息，符合条件后用ajax异步或者某种方式跳转。
也有些fe会套一层form标签，但还是绑定的click事件。
优化点
针对以上的表单元素优化点如下：
始终使用form标签
只要是表单元素始终在元素外层包裹form标签，说好的我们一起手拉手语义化呢？
始终绑定submit事件
不单独的对【提交】按钮绑定click事件，对整个表单绑定submit提交事件，这样可以让整个表单内的文本框获得Enter提交的VIP待遇，并且在移动端中可以让文本框聚焦时键盘的右下角是【前往】。
再加上对表单里元素值的验证+聚焦，可以达到【输入->回车->错误->输入->回车->提交】一气呵成的体验。
这个可以解决上面的问题1、问题3
placeholder占位
合理的使用placeholder占位，但要考虑兼容性。兼容方案：
使用value模拟需要注意提交时判断value是否是默认占位的值，比较坑
使用span标签定位显示，需要考虑到直接设置元素值时的触发情况
maxlength
如果已知元素理想的输入长度，不妨设置下元素的最大长度属性，并且兼容性很好哦。从一定程度上避免了用户的误输入，从而提升用户体验。
label
表单元素的描述文字应该使用label标签包裹，并且使用for属性指向表单元素，从而达到点击描述文字可以聚焦文本框的效果，如：
<li>
<label for="J-username">用户名:</label>
<input type="text" name="username" id="J-username">
</li>
聚焦时的状态
在文本框聚焦时理论来说应该让用户感知出来，而不是纹丝不动。
聚焦时页面的位置
聚焦时考虑页面滚动到焦点元素的最佳可视范围。
你还需要考虑在移动端中聚焦时页面老跑偏...
表单的异步提交状态
当表单异步提交过程中需要向后端发送数据，可能会经历 提交中、提交出错、提交成功 的状态，还要考虑到提交中再次提交（重复提交）的问题。
比如在提交时设置提交按钮的disabled = true，并且使其变灰，显示【提交中...】是不是更友好些呢？手拉手的问题我就不再说了...
再延伸
考虑到用户网络慢，在用户没有加载完成js时提交了表单
后端原生支持 - 后端即使纯form提交也可以正常的接收
默认阻止 - 在form标签默认阻止onsubmit="return false"，js初始化时处理掉
autocomplete - 根据业务场景判断是否使用自助补全功能，可以在整个表单form添加，也可以在input元素添加
移动端文本聚焦时fixed失效
表单中重置按钮
|
