[前端]html5表单元素整理

html5表单元素整理

<input> 元素

<select> 元素（下拉列表）

<textarea> 元素（文本域）

<button> 元素(按钮)

html5新增表单元素

<datalist> 元素

<keygen> 元素

<output> 元素

<input> 元素

最重要的表单元素就是 input 元素。
通过type属性来决定类型,type类型如下:

button 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。

checkbox 定义复选框。

file 定义输入字段和 "浏览"按钮，供文件上传。

hidden 定义隐藏的输入字段。

image 定义图像形式的提交按钮。

password 定义密码字段。该字段中的字符被掩码。

radio 定义单选按钮。

reset 定义重置按钮。重置按钮会清除表单中的所有数据。

submit 定义提交按钮。提交按钮会把表单数据发送到服务器。

text 定义单行的输入字段，可在其中输入文本。默认宽度为 20 个字符。

HTML5增强的表单标签

email 文本框形式,但是限制内容格式为邮箱格式.
number 文本框形式,但是限制内容格式为数字.
range 一个滚轮条.

search 文本框形式,输入内容的时候，搜索框后边会自动出现一个小×，点击这个小×，可以清除输入的内容

date 选择日期(即年月日)
week 选择一年的第几周.

month 选择年月.

url 文本框形式,但是限制内容格式为url.
color 单击可以选择颜色.

<select> 元素（下拉列表）

创建下拉列表,下拉选项由子标签<option>定义.

<textarea> 元素（文本域）

创建一个大小可控的文本区.

<button> 元素(按钮)

类似于input的button类型按钮,但是提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

<datalist> 元素

类似文本框,有预设值,可以直接选择也可以输入开头部分,提示完整内容.

<keygen> 元素

标签规定用于表单的密钥对生成器字段。

当提交表单时，私钥存储在本地，公钥发送到服务器。
IE不支持.
w3c链接

<output> 元素

定义不同类型的输出，比如脚本的输出。 IE不支持.