H5学习笔记2——表单

表单元素

表单

<form> 元素

用于搜集不同类型的用户输入

输入域

<input> 元素

文本域

<textarea> 元素

输入标题

<label> 元素

外框包含一组表单元素

<feildset> 元素

元素组的标题

<legend> 元素

下拉选项列表

<select> 元素

下拉列表中的选项

<option> 元素

用于搜集不同类型的用户输入

选项组

<optgroup> 元素

点击按钮

<button>

绑定输入控件选项列表

<datalist> 元素

密钥对生成器

<keygen>

计算结果

<output>

表单属性

表单字符集

accept-charset

默认：页面字符集

常用值：

UTF-8 - 用于 Unicode 的字符编码

ISO-8859-1 - 用于拉丁字母的字符编码

表单的地址

action

绝对 URL - 指向另一个网站（如 action="http://www.example.com/example.html"）

相对 URL - 指向网站内的文件（如 action="example.html"）

浏览器自动完成

autocomplete

默认：开启

数据的编码

enctype

默认：url-encoded

仅供 method="post"

 HTTP 方法

method

默认：GET

GET ：

将表单数据以名称/值对的形式附加到 URL 中

URL 有长度限制（约 3000 个字符）

切勿使用 GET 发送敏感数据！ （将在 URL 中可见）

对于用户希望将结果加为书签的表单提交很有用

GET 更适合非安全数据

POST ：

在 HTTP 请求的正文中附加表单数据（数据不会显示在URL中）。

没有大小限制。

使用 POST 提交的表单无法被加入书签。

表单的名称

name

浏览器不验证

novalidate

地址的目标

target

默认：_self

_blank 在新窗口或标签页中显示响应。

_self 在同一框架中显示响应。（默认）

_parent 在父框架中显示响应。

_top 在整个窗口中显示响应。

framename 在命名的 iframe 中显示响应。

输入元素类型

按钮

单击按钮

button

单选按钮
radio

复选框
checkbox

重置按钮
reset

提交按钮
submit

图片按钮
image

普通选择器

颜色选择器
color

范围选择器
range

文件选择器
file

时间日期选择器

时间选择器
time

日期选择器
date

周选择器
week

日期时间选择器（有时区）
datetime

日期时间选择器（无时区）
datetime-local

月份选择器
month

文本输入框

电话号码输入框
tel

单行文本输入框
text

网址输入框
url

整型数字输入框
number

密码输入框
password

邮件地址输入框
email

隐藏字段
hidden

搜索字段带清空按钮
search

输入元素属性

值属性

初始值

value 属性

规定输入字段的初始值

尺寸

size 属性

规定输入字段的尺寸（以字符计）

最大长度

maxlength 属性

规定输入字段允许的最大长度

自动完成

autocomplete 属性

规定字段是否应该自动完成

开启，浏览器会基于用户之前的输入值自动填写值。

所属表单

form 属性

规定所属的一个或多个表单

引用一个以上的表单，请使用空格分隔的表单 id 列表。

高度和宽度

height 和 width 属性

规定 <input> 元素的高度和宽度。

仅用于 <input type="image">。

注释：请始终规定图像的尺寸。如果浏览器不清楚图像尺寸，则页面会在图像加载时闪烁。

预定义选项

list 属性

引用<datalist> 元素中包含的预定义选项

最小值和最大值

min 和 max 属性

规定 <input> 元素的最小值和最大值。

min 和 max 属性适用于如需输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

多值

multiple 属性

布尔属性。

设置，则规定允许用户输入一个以上的值。

适用于以下输入类型：email 和 file。

正则表达式

pattern 属性

定用于检查 <input> 元素值的正则表达式。

适用于以下输入类型：text、search、url、tel、email、password。

提示： title 属性对模式进行描述以帮助用户。

预期值提示

placeholder 属性

规定用以描述输入字段预期值的提示。

在用户输入值之前显示在输入字段中。

适用于以下输入类型：text、search、url、tel、email 以及 password。

数字间隔

step 属性

规定合法数字间隔。

提示：可与 max 以及 min 属性一同使用，来创建合法值的范围。

适用于以下输入类型：number、range、date、datetime、datetime-local、month、time 以及 week。

性质属性

只读

readonly 属性

规定输入字段为只读（不能修改）

禁用

disabled 属性

规定输入字段是禁用的。

被禁用的元素是不可用和不可点击的。

被禁用的元素不会被提交。

自动获得焦点

autofocus 属性

布尔属性。

设置，则规定当页面加载时 <input> 元素应该自动获得焦点。

必须填写

required 属性

布尔属性。

设置，则规定在提交表单之前必须填写输入字段。

适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、file.

覆盖form属性

控件 URL

formaction 属性

规定当提交表单时处理该输入控件的文件的 URL

覆盖 <form> 元素的 action 属性。

适用于 type="submit" 以及 type="image"。

编码

formenctype 属性

规定当把表单数据（form-data）提交至服务器时如何对其进行编码（仅针对 method="post" 的表单）

覆盖 <form> 元素的 enctype 属性。

适用于 type="submit" 以及 type="image"。

HTTP 方法

formmethod 属性

定义用以向 action URL 发送表单数据（form-data）的 HTTP 方法。

覆盖 <form> 元素的 method 属性。

适用于 type="submit" 以及 type="image"。

不验证

formnovalidate 属性

布尔属性。

设置，则规定在提交表单时不对 <input> 元素进行验证。

覆盖 <form> 元素的 novalidate 属性。

可用于 type="submit"。

显示响应

formtarget 属性

规定的名称或关键词指示提交表单后在何处显示接收到的响应。

覆盖 <form> 元素的 target 属性。

可与 type="submit" 和 type="image" 使用。