lt;form> 标签用于为用户输入创建 HTML 表单。

表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。

表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。

表单用于向服务器传输数据。

下面小编为大家介绍几个常用的表单标签。

<datalist>标签

这个标签规定了 <input> 元素可能的选项列表。

一般会被用来在为<input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

我们来演示一个案例，大家就知道怎么用了：

上面这个小代码，我们看得出，input标签的list属性值和datalist标签的id是一样的，没错，它们就是这样来相互关联起来的。当它们结合起来之后，不仅可以像select标签一样可以通过下拉来选择已有的选项，还可以根据用户输入的字符，对选项进行匹配筛选。

效果图如下：

有了datalist标签，我们实现这种效果起来十分简单，不需要任何的JavaScript代码也能轻松实现。

<output>标签：

标签定义不同类型的输出。比如脚本的输出、一些加减乘除的运算结果，我们都可以使用这个标签。

我们来举个例子：输入的数字乘以2后得到的结果，我们用output输出显示。

我们用oninput属性监听着表单的变化，并把得到的结果赋值到output标签的value。我们来看看效果图：

其中，output标签是可以离开form表单标签的，但是，如果你这样做的话，必须给output标签添加form属性，其属性值是与其相关联form表单的id。

我们来将output移到form表单的外面试试：

<form id="demo" oninput="b.value = parseInt(a.value)*2">
 <input type="number" name="a"> 乘以2=
</form>
<output form="demo" name="b" for="a"></output>

跟上面的代码有几处不同之处，form标签多了一个id，值为“demo”，output标签被移到了form标签外面，不再是form标签的子节点，变成了兄弟节点（当然你可以把它移到文档的其他位置）。output标签还多了一个form属性，此时，它的值正好是form标签的id值：“demo”。这种写法，代码同样是奏效的。

<keygen>标签

这个标签相信大家很少用到，但是也是为了学习，我们来了解一下就好。

这个标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器，这种机制是专为使用基于Web的证书管理系统。

我在MDN（Mozilla Developer Network）的网站上看到了关于它的一些介绍：

There iscurrently discussion among Web browser makers whether to keep this feature ornot. Until a decision is reached, it is better to continue to consider thisfeature as deprecated and going away.

大意是：目前各大浏览器厂商还在讨论是否要保留它，在讨论结束之前，你最好还是别用它。

而另一段话则是更加直接明了：

This featurehas been removed from the Web standards. Though some browsers may still supportit, it is in the process of being dropped. Do not use it in old or newprojects. Pages or Web apps using it may break at any time.

大意是：虽然有些浏览器还支持它，但是这个特性已经被移除出web标准了，以后别使用它了。

、良生- input type=file与文件上传

本文所说的input type=file指的是type类型是file的input元素，最简HTML代码如下：

<input type=file>

但是，为了习惯，我们多写成：

<input type="file">

在HTML5出现之前(XHTML)，我们的闭合规则则有些出入：

<input type="file" />

顾名思义，选择文件，并上传文件。

在万恶的旧时代，HTML5还没有出现之前，原生的file input表单元素只能让我们一次上传一张图片。无法满足一次上传多图的交互需求，所以，很多场景，就被swfupload.js给取代了，有点逐渐淡出人们视野的感觉。

然，技术发展，日新月异，三十年河东，三十年河西。随着原生HTML5表单对多图(multiple属性)、上传前预览，二进制上传等支持越来越广泛，原生的file input表单元素又迎来了新的升级，flash为背景的swfupload.js注定要落寞。

但是，对于PC项目，IE8-IE9浏览器还是不能忽略的。所以，现在，很流行的一种处理方式，就是HTML5 file上传和flash swfupload上传一起整合的模式，优先使用原生HTML5上传，不支持的，使用flash上传。我之前有篇关于HTML5上传的文章，每天访问量很高的：“基于HTML5的可预览多图片Ajax上传”，大家有兴趣可以看看。

如果想使用浏览器原生特性实现文件上传(如图片)效果，父级的form元素有个东西不能丢，就是：

enctype="multipart/form-data"

enctype属性规定在发送到服务器之前应该如何对表单数据进行编码，默认的编码是：”application/x-www-form-urlencoded“。对于普通数据是挺适用的，但是，对于文件，科科，就不能乱编码了，该什么就是什么，只能使用multipart/form-data作为enctype属性值。

无论是旧时代的单图上传，还是HTML5中的多图上传，均是如此。

文件，尤其图片，上场前能够预览，是很棒的交互体验。不走服务器，不耗费流量，多棒！

理想虽好，实现起来……

在HTML5还没出现的旧时代，只有低版本的IE浏览器貌似有方法，使用私有的滤镜，超越安全的限制（其实是利用了不好的东西），实现图片直接预览；但是呢，那个时候，Chrome, FireFox没有这一出，于是，想要使用原生file input实现图片的上传前预览，兼容性坎很难跨过去。

但是，后来，HTML5来了，我们出现了转机，IE10+以及其他现代浏览器，可以让我们直接读取图片的数据，然后在页面上呈现，实现了上传前预览；加上之前老IE的滤镜策略，貌似，可行。但是呢但是，老的IE浏览器只能最多一次选择一个文件，因此，只有单图上传的时候，大家可以考虑考虑。

传统的form提交，是要改变页面流的，也就是刷新后跳转。好的体验应该是走Ajax交互的。HTML5里面支持二进制formData数据提交，因此，可以从容Ajax提交上传的文件数据；那老旧的IE浏览器怎么办？

一般方法如下：

<form action="" method="post" enctype="multipart/form-data" target="uploadIframe">< <iframe id="uploadIframe"></iframe>

var doc = iframe.contentDocument ? iframe.contentDocument : frames[iframe.id].document; var response = doc.body && doc.body.innerHTML;

OK, 当然，你也可以不用像上面这么麻烦，直接使用jquery.form.js. 原理呢，就是上面这样，但是，不需要这么麻烦。

原生的file input不收待见的另外一个原因是：长的丑还不好控制。

举个例子，下图这个“选择文件”这几个文字，我们就不好对file控件动刀子实现自定义：

file input框

怎么办呢？

有一种方法是这样的： 让file类型的元素透明度0，覆盖在我们好看的按钮上。然后我们去点击好看的按钮，实际上点击是是file元素。

然而，此方法有一些不足：

更好的方法是，使用label元素与file控件关联，好处在于：

<label class="ui_button ui_button_primary" for="xFile">上传文件</label> <form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

效果如下（真实实时效果）：

input file类型控件有一个属性，名为

accept

, 可能有些小伙伴不太了解。可以用来指定浏览器接受的文件类型，也就是的那个我们打开系统的选择文件弹框的时候，默认界面中呈现的文件类型。例如：

accept="image/jpeg"

，则界面中只有jpg图片，如下截图，同时，窗体右下方是“自定义文件”按钮：

自定义文件

实际开发的时候，很少只允许传jpg图片，应该都是只能传图片类型，此时，可以使用：

accept="image/*"

于是乎，“自定义文件”按钮变成了语义更明确的“图片文件”：

图片文件

accept属性值其实是MIME类型, 例如下面几个可能常用的：

accept="application/pdf" accept="audio/x-mpeg" accept="text/html" .accept="video/x-mpeg2"

然后，多个属性值使用逗号分隔，例如：

<input accept="audio/*,video/*,image/*">

现代浏览器直接value = "", 有些IE浏览器貌似不行，好像使用file.outerHTML = file.outerHTML，我自己没测试。

不过我觉得比较麻烦，还要判断浏览器什么的。像本文的Ajax单图上传，直接form.reset()就可以了。

以上~

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。