html中表单form的深入分析

下面我们来看一篇关于html中表单form的深入分析，希望这篇文章能够让各位深入理解到html中表单form的用法哦。

起因

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

怎么按键盘的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失效
表单中重置按钮

utf-8和gb2313区别是什么，其实这个就是编码范围及字符位的一个问题了，对于这个我们其实不需了解这么内核的东西，下面简单的为各位介绍一下utf-8和gb2313区别和选择吧。

最近碰到一个项目，要求使用gb2312，平常写代码时，用的编码都是utf-8，这两者有什么区别呢，我们又该如何选择呢

首先我们要理解编码是什么，编码是信息从一种形式或格式转换为另一种形式的过程也称为计算机编程语言的代码简称编码。用预先规定的方法将文字、数字或其它对象编成数码，或将信息、数据转换成规定的电脉冲信号。编码在电子计算机、电视、遥控和通讯等方面广泛使用。编码是信息从一种形式或格式转换为另一种形式的过程。

utf-8和gb2312是编码格式的一部分，查阅了一下有关utf-8和gb2312的资料：

utf-8：是一种针对Unicode的可变长度字符编码，又称万国码。由Ken Thompson于1992年创建。现在已经标准化为RFC 3629。utf-8用1到4个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如日文，韩文）

gb2312：信息交换用汉字编码字符集。《信息交换用汉字编码字符集》是由中国国家标准总局1980年发布，1981年5月1日开始实施的一套国家标准，标准号是gb2312—1980。gb2312编码适用于汉字处理、汉字通信等系统之间的信息交换，通行于中国大陆；新加坡等地也采用此编码。中国大陆几乎所有的中文系统和国际化的软件都支持gb2312。

国内很多大的网站比如：百度搜索，新浪网，搜狗搜索引擎等用的编码都是utf-8，部分网站，学校官网则使用gb2312。

所以utf-8是国际编码，gb2312是中文编码，如果只是国内用户使用的话，则选择gb2312，但是国外访问gb2312编码的网站就会乱码，而utf-8是世界性通用代码，国内国外访问均不会出现乱码状况。

总结：从文字支持上说utf-8比GB2312要多。一般企业站看情况自己选择网页编码。在开发的时候就要确定使用哪种编码，以防网页乱码。同时在dedecms、帝国、phpcms等网站系统时，开发HTML和使用开源程序编码也要保持一致（前几天自己用gb2312的HTML在编码为utf-8的phpcms上套模板，就出现网页乱码情况）。当然个人比较倾向utf-8，感觉很少出现乱码状况。

表单2.0包括了一些我们在1.0中常用的一些类型升级为了字段，如邮箱，手机号之类了，这里面我们来看表单2.0之Input标签新增类型包括啊些吧。

HTML5的新特性扩展了 input 标签的类型，使得表单组件更丰富。

 

 

下述示例代码使用了 HTML5 提供的表单 2.0 中的 input 类型：

 

代码如下	复制代码
<form>  Email:<input type="email"><br>  搜索:<input type="search"><br>  URL地址:<input type="url"><br>  电话号码:<input type="tel"><br>  数字类型:<input type="number" min="18" max="50" step="2"><br>  范围类型:<input type="range" min="0" max="10" step="2" value="10"><br>  颜色类型:<input type="color"><br>  日期类型:<input type="date"><br>  <input type="submit"> </form>

email类型

email 类型是专门用于输入 email 地址的文本框。

如果输入内容不是 email 地址，则不允许提交，并提示错误信息。效果如下图所示：

根据上图效果，总结 email 类型的规则是：提交表单时，检查 email 类型的文本框中是否包含 @ 符号。

值得注意的是： email 类型的文本框并不能检查 email 地址是否真实存在。

<input type="email" />
```

### url类型

`url` 类型是专门用于输入 `url` 地址的文本框。

如果输入内容不是 `url` 地址，则不允许提交，并提示错误信息。效果如下图所示：


根据上图效果，总结 `url` 类型的规则是：提交表单时，检查 `url` 类型的文本框中是否包含 `http://` 符号。

```html
<input type="url" />
search类型

search 类型是专门用于输入搜索关键词的文本框。

在移动设备中，当 search 类型的元素获取焦点时，键盘的“前往”会改为“搜索”字样。效果如下图所示：

iPhone设备：

Android设备：

值得注意的是：在PC端浏览器 search 类型与 text 类型外观相同。

<input type="search" />

tel类型

tel 类型是专门用于输入电话号码的文本框。

在移动设备中，当 tel 类型的元素获取焦点时，键盘使用数字面板。效果如下图所示：

iPhone设备：

Android设备：

值得注意的是：该元素没有特殊的校验规则，不强制输入数字。

<input type="tel" />

number类型

number 类型是专门用于输入数字的文本框。

如果输入内容不是数字，则不允许提交，并提示错误信息。效果如下图所示：

根据上图效果，总结 number 类型的规则是：提交表单时，检查 number 类型的文本框中是否为数字。

属性名称 类型 描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）

<input type="number" min="0" max="100" step="5" />

date类型

date 类型是专门用于输入日期，提供日期选择控件。

当用户单击向下箭头按钮时浏览器页面中显示日历。效果如下图所示：

<input type="date" />
range类型

range 类型是专门用于输入一定范围内数字值。

range 类型在HTML页面显示为滑动条。效果如下图所示：

属性名称 类型 描述
min Number 允许输入的最小数值。
max Number 允许输入的最大数值。
step Number 设置增加或减少的间隔。（步长）
value Number 设置滑动条的当前值。

<input type="range" min="0" max="100" step="5" value="50" />
color类型

color 类型是专门用于选取颜色。

color 类型提供了一个颜色选取器。效果如下图所示：

显示效果：

颜色选取器：

color 类型的显示效果，当用户单击 color 类型弹出显示颜色选取器。
<input type="color" />

页面不缓存可以让我们有更新就立即更新出来用户不需要清除浏览器缓存或不停的按f5刷新了，这里整理了解一些关于页面不缓存的方法，具体的如下。

一，js,css,图片文件不缓存

style.css?v=<?php echo time(); ?>
style.css?v=2

css

a.js?v=Math.random();

二，html页面不缓存

HTTP1.1中启用Cache-Control 来控制页面的缓存与否，这里介绍几个常用的参数：

no-cache，浏览器和缓存服务器都不应该缓存页面信息；
public，浏览器和缓存服务器都可以缓存页面信息；
no-store，请求和响应的信息都不应该被存储在对方的磁盘系统中；
must-revalidate，对于客户机的每次请求，代理服务器必须想服务器验证缓存是否过时；
Last-Modified只页面的最后生成时间，GMT格式；

Expires过时期限值，GMT格式，指浏览器或缓存服务器在该时间点后必须从真正的服务器中获取新的页面信息；

方法一：在<head>标签里增加如下meta标签。

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

方法二：在java代码中增加如下代码。

response.setHeader("Cache-Control","no-cache");
response.setHeader("Pragma","no-cache");
response.setDateHeader("Expires",0);

方法三：asp教程做法

Response.Buffer = True
Response.ExpiresAbsolute = Now() - 1
Response.Expires = 0
Response.CacheControl = "no-cache"
Response.AddHeader "Pragma", "No-Cache"

方法四：php教程做法
 
<?php
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Last-Modified: ' . gmdate('D, d M Y H:i:s') . 'GMT');
header('Cache-Control: no-cache, must-revalidate');
header('Pragma: no-cache');
?>