08月13, 2016

表单form的研究

起因

最近经常在群里看到诸如以下这些问题:

  1. 怎么按键盘的Enter键提交表单呢?
  2. 移动端怎么聚焦时让键盘变成数字键呢?
  3. 移动端如何绑定键盘右下角【提交按钮】事件?
  4. 移动端键盘右下角【提交】如果换成【搜索】呢?

针对这些问题分享下我对使用表单的一些建议。

优化前

<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

input元素的type

input元素的type属性决定着她的功能,应该根据自己的业务场景合理的使用她。

类型 说明 ios android 备注
password 密码框 - - 在有密码需求时使用,在某些系统下(如ios)会调起系统内置键盘,更加安全
tel 电话框 直接调出系统默认的数字键盘 调起数字键盘 如果期望输入是数字类型,可以优化考虑该属性
解决上面的问题2
number 数字框 调起输入法的数字键盘
如果没装输入法,会调起系统的全数字键盘(不是线数字)
调起数字键盘 优先考虑使用tel
search 搜索框 - - 在移动端中使用该属性可以使键盘右下角变身成【搜索】按钮,么么哒。
解决上面的问题4
email 邮箱 - - 会调起字母键盘,并且有@符号
url 网址 - - 会调起字母键盘,更适合输入域名网址

当然还有一些datetime等,但要考虑到兼容性,也视项目情况而定。

placeholder占位

合理的使用placeholder占位,但要考虑兼容性。兼容方案:

  1. 使用value模拟需要注意提交时判断value是否是默认占位的值,比较坑
  2. 使用span标签定位显示,需要考虑到直接设置元素值时的触发情况

maxlength

如果已知元素理想的输入长度,不妨设置下元素的最大长度属性,并且兼容性很好哦。从一定程度上避免了用户的误输入,从而提升用户体验。

label

表单元素的描述文字应该使用label标签包裹,并且使用for属性指向表单元素,从而达到点击描述文字可以聚焦文本框的效果,如:

<li>
    <label for="J-username">用户名:</label>
    <input type="text" name="username" id="J-username">
</li>

聚焦时的状态

在文本框聚焦时理论来说应该让用户感知出来,而不是纹丝不动。

聚焦时页面的位置

聚焦时考虑页面滚动到焦点元素的最佳可视范围。

你还需要考虑在移动端中聚焦时页面老跑偏...

表单的异步提交状态

当表单异步提交过程中需要向后端发送数据,可能会经历 提交中、提交出错、提交成功 的状态,还要考虑到提交中再次提交(重复提交)的问题。

比如在提交时设置提交按钮的disabled = true,并且使其变灰,显示【提交中...】是不是更友好些呢?手拉手的问题我就不再说了...

再延伸

  • 考虑到用户网络慢,在用户没有加载完成js时提交了表单
    1. 后端原生支持 - 后端即使纯form提交也可以正常的接收
    2. 默认阻止 - 在form标签默认阻止onsubmit="return false",js初始化时处理掉
  • autocomplete - 根据业务场景判断是否使用自助补全功能,可以在整个表单form添加,也可以在input元素添加
  • 移动端文本聚焦时fixed失效
  • 表单中重置按钮

其他表单元素的研究


简单的写了个demo: https://github.xuexb.com/demo/form/new.html ,demo还有特优化,比如聚焦时提示层的位置,还有聚焦时移动页面的最佳可视位置,而这个位置又分很多版本,比如微信里聚焦会有安全提示占空间,而一些浏览器的bar高度又不一样,再加上屏幕的尺寸不一有很多道道的。

img

demo中使用了部分 @zbfe/zui 的组件。

本文链接:https://xuexb.com/html/form.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。