HTML表单

一、HTML表单是什么？

HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器。
HTML表单是由一个或多个小部件组成的。这些小部件可以是文本域、选择框、按钮、复选框或单选按钮。

二、表单标签<form>

所有HTML表单都以一个<form>元素开始

标签省略	不允许，开始标签和结束标签都不能省略

<form action="/my-handling-form-page" method="post"></form>

这个元素正式定义了一个表单。就像<div>元素或<p>元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但至少要设置action属性和method属性，这被认为是最佳实践。

• action 属性定义了在提交表单时所收集数据的提交位置(URL)。.
• method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”)。

三、 表单元素

1、表单输入标签<input>
HTML <input> 元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据

标签省略	必须有开始标签但不必有结束标签

    <input type=”类型”  name=”名称” />  <input type="text">

name：
控件的名称，与表单数据一起提交
type:

text：单行文字域。
password：一个值被遮盖的单行文本字段。使用 maxlength 指定可以输入的值的最大长度
file：此控件可以让用户选择文件。
checkbox：复选框。必须使用 value 属性定义此控件被提交时的值。使用 checked 属性指示控件是否被选择。
radio：单选按钮。必须使用 value 属性定义此控件被提交时的值。使用checked 属性指示控件是否缺省被选择。在同一个”单选按钮组“中，所有单选按钮的 name 属性使用同一个值； 一个单选按钮组中，同一时间只有一个单选按钮可以被选择。
button：无缺省行为按钮。
submit：用于提交表单的按钮。
reset：重置按钮
hidden：不显示在页面上的控件，但它的值会被提交到服务器。

value:
控件的初始值.
checked:
如果该元素的type属性的值为radio或者checkbox,则该布尔属性的存在与否表明了该控件是否是默认选择状态.
disabled:
这个布尔属性表示此表单控件不可用。 特别是在禁用的控件中， click 事件 将不会被分发
readonly:
这个布尔属性用于指明用户无法修改控件的值。
HTML5 如果控件的 type 属性为hidden, ,checkbox, radio, file时，此属性会被忽略。

2、项目标题标签< label >
HTML <label>元素表示用户界面中项目的标题,它可以使标题对应的文本框自动获焦。

标签省略	不允许，开始标签和结束标签都不能省略

<label>Click me <input type="text" id="User" name="Name" /></label>

<label for="User">Click me</label>
<input type="text" id="User" name="Name" />

for:需要标记的表单元素的ID

3、菜单和列表标签<select> <option> <optgroup>
1)<select>
HTML select (<select>) 元素是一种表单控件，可创建选项菜单。菜单内的选项为<option> , 可以由 <optgroup> 元素分组。选项可以被用户预先选择

标签省略	不允许，开始标签和结束标签都不能省略.

2)<option>
HTML元素 <option> 用于定义在<select>或<optgroup>元素中包含的项。

标签省略	不允许，起始标签是必需的，结束标签有时可以省略但不提倡

<select name="select">
                <option value="value1">Value 1</option> 
                <option value="value2" selected>Value 2</option>
                <option value="value3">Value 3</option>
</select>

参数说明：

select-name：
元素的名称

select-disabled：
这个布尔值的属性表明一个用户是否可以操控该表单对象.

select-multiple：
这个布尔值的属性标记select是否可以多选. 默认是单选.

option-disabled：
如果设置了这个布尔属性，选项就不是可选的。浏览器通常会将这种控件显示为灰色，并且不再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。如果这个属性没有设置，如果元素的祖先是禁用的，元素仍然是禁用的

option-selected：
如果存在, 则这个布尔属性表明，这个选项初始被选中。如果 <select> 元素的 multiple 属性没有设置，这个 <select> 元素只有一个 <option> 元素可以拥有 selected 属性。

option-value：
这个属性的内容代表这个选项选中的话，提交给表单的值。如果省略了这个属性，值就从选项元素的文本内容中获取。

3)<optgroup>
HTML元素 <optgroup> 会创建包含在一个 <select> 元素中的一组选项

标签省略	不允许，开始标签和结束标签都不能省略

disabled:
如果设置了这个布尔值，那么这个选项组中将没有选项是可以被选择的。通常浏览器会置灰这样的控件，它不会再接受任何浏览器事件，例如鼠标点击或者焦点相关的事件。
label:
选项组的名字，当在用户界面标记(label)选项的时候可以被浏览器使用。使用这个元素时必须加上这个属性.

<select>
  <optgroup label="Group 1">
    <option>Option 1.1</option>
  </optgroup> 
  <optgroup label="Group 2">
    <option>Option 2.1</option>
    <option>Option 2.2</option>
  </optgroup>
  <optgroup label="Group 3" disabled>
    <option>Option 3.1</option>
    <option>Option 3.2</option>
    <option>Option 3.3</option>
  </optgroup>
</select>

4、文字域标签<textarea>
HTML <textarea> 元素表示一个多行纯文本编辑控件

标签省略	不允许，开始标签和结束标签都不能省略

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

name
元素的名称
cols
文本域的可是宽度。必须为正数
rows
元素的输入文本的行数（显示的高度）。
disabled
禁用文本域。默认为false
readonly
不允许用户修改元素内文本

5、表单分组标签<fieldset>&<legend>
HTML的<fieldset> 元素通常用来对表单中的控制元素进行分组
HTML的<legend>元素代表一个用于表示它的父元素<fieldset>的内容的标题。

标签省略	不允许，开始标签和结束标签都不能省略

<form action="test.php" method="post">
    <fieldset>
        <legend>Title</legend>
        <input type="radio" id="radio"> <label for="radio">Click me</label>
    </fieldset>
</form>

四、HTML5的新增表单属性

placeholder : 输入框提示信息
                    type为text类型的input
autofocus : 指定表单获取输入焦点
                文档中只有一个表单元素可以具有autofocus属性，它是一个布尔值。
                 如果type属性设置为隐藏则不能应用
required : 此项必填，不能为空
                这个属性指定用户在提交表单之前必须为该元素填充值. 当type属性是
                hidden或者按钮类型(submit,reset,button)时不可使用
formaction :在submit里定义提交地址
pattern : 正则验证