HTML表单

HTML表单

表单元素指的是不同类型的 input 元素、复选框、单选按钮、提交按钮等等。

<input> 元素是最重要的表单元素。有很多形态，根据不同的 type 属性：

输入类型：text定义供文本输入的单行输入字段。

输入类型：password定义密码字段。

输入类型：submit提交表单数据至表单处理程序的按钮。

radio定义单选按钮输入（选择多个选择之一）

<input type="checkbox"> 定义复选框。

HTML5 输入类型

color

date

datetime

datetime-local

email

month

number

range

search

tel

time

url

week

注释：老式 web 浏览器不支持的输入类型，会被视为输入类型 text。

<input type="number"> 用于应该包含数字值的输入字段。（输入只能是1~5之间的数字）

<form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

输入限制

disabled：规定输入字段应该被禁用。

max：规定输入字段的最大值。

maxlength：规定输入字段的最大字符数。

min：规定输入字段的最小值。

pattern：规定通过其检查输入值的正则表达式。

readonly：规定输入字段为只读（无法修改）。

required：规定输入字段是必需的（必需填写）。

size：规定输入字段的宽度（以字符计）。

step：规定输入字段的合法数字间隔。

value：规定输入字段的默认值。

<input type="number" name="points" min="0" max="100" step="10" value="30">

一个输入框，0~100，每次只能加10。

<select> 元素（下拉列表）

<option> 元素定义待选择的选项。

列表通常会把首个选项显示为被选选项。

您能够通过添加 selected 属性来定义预定义选项。<option value="fiat" selected>Fiat</option>（将此下拉设置为第一个值）

<textarea> 元素定义多行输入字段（文本域）。

<button> 元素定义可点击的按钮

HTML5 增加了如下表单元素：

<datalist>

<datalist> 元素为 <input> 元素规定预定义选项列表。

用户会在他们输入数据时看到预定义选项的下拉列表。

<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。

<keygen>

<output>

注释：默认地，浏览器不会显示未知元素。新元素不会破坏您的页面。

Action 属性定义在提交表单时执行的动作。向服务器提交表单的通常做法是使用提交按钮。如果省略 action 属性，则 action 会被设置为当前页面。

Method 属性规定在提交表单时所用的 HTTP 方法（GET 或 POST）。

何时使用 GET？

默认方法。

如果表单提交是被动的（比如搜索引擎查询），并且没有敏感信息。

当您使用 GET 时，表单数据在页面地址栏中是可见的：

action_page.php?firstname=Mickey&lastname=Mouse

注释：GET 最适合少量数据的提交。浏览器会设定容量限制。

何时使用 POST？

如果表单正在更新数据，或者包含敏感信息（例如密码）。

 POST 的安全性更加，因为在页面地址栏中被提交的数据是不可见的。      

<fieldset> 组合表单数据

<fieldset> 元素组合表单中的相关数据

<legend> 元素为 <fieldset> 元素定义标题。

HTML Form 属性

accept-charset：规定在被提交表单中使用的字符集（默认：页面字符集）。

action：规定向何处提交表单的地址（URL）（提交页面）。

autocomplete：规定浏览器应该自动完成表单（默认：开启）。

enctype：规定被提交数据的编码（默认：url-encoded）。

method：规定在提交表单时所用的 HTTP 方法（默认：GET）。

name：规定识别表单的名称（对于 DOM 使用：document.forms.name）。

novalidate：规定浏览器不验证表单。

target：规定 action 属性中地址的目标（默认：_self）。