1 表单是如何工作的？

---

用户在网页上填写表单并提交所填信息，浏览器将用户提交的数据发送至 Web 服务器， Web 服务器将数据传给适当的服务器脚本进行处理，处理结果会是一个全新的 HTML 页面，并经由 Web 服务器发回给浏览器，浏览器收到页面后即显示。

2 form 元素是如何工作的？

---

2.1 form 元素的属性

form 元素用于申明表单，定义采集数据的范围，也就是 <form> 和 </form> 里面包含的数据将被提交到服务器或者电子邮件里。主要有四个属性：

• action：规定提交表单数据的地址，它包含了 Web 服务器的 URL，脚本所在的文件夹，处理表单数据的脚本文件名。
• method：规定提交表单数据的方法（可能的值：get、post）。
• target：规定在何处打开 action URL（可能的值：_blank、_self、_parent、_top）。
• enctype：规定在发送表单数据之前如何对其进行编码，可能的值：
  • application/x-www-form-urlencoded：在发送前编码所有字符（默认）
  • text/plain：空格转换为 "+" 加号，但不对特殊字符编码
  • multipart/form-data：使用包含文件上传控件的表单时，必须使用该值

举个例子：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
</form>

2.2 提交表单数据的方法—— get 和 post 的区别

GET 和 POST 是两种最常用的 HTTP 方法，GET 是向服务器发索取数据的一种请求，一般用于获取、查询资源信息而非修改信息，是幂等^[1]的。POST 是向服务器提交数据的一种请求，一般用于更新资源信息。
更多区别请参阅：http://www.w3school.com.cn/tags/html_ref_httpmethods.asp

3 表单里可以有什么？

---

常见的 input 属性：

• type 属性

可能的值	描述
text	定义单行的输入字段，用户可在其中输入文本，默认宽度为 20 个字符
password	定义密码字段，该字段中的字符被掩码
submit	定义提交按钮，提交按钮会把表单数据发送到服务器
button	定义可点击按钮
reset	定义重置按钮，重置按钮会清除表单中的所有数据
radio	定义单选按钮
checkbox	定义复选框
file	定义输入字段和 “浏览” 按钮，供文件上传
hidden	定义隐藏的输入字段，隐藏字段对于用户是不可见的
image	定义图像形式的提交按钮

• name 属性
  规定 input 元素的名称，对提交到服务器后的表单数据进行标识。
  只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

• value 属性
  规定 input 元素的值。对于不同的输入类型，value 属性的用法也不同：

  • type="button", "reset", "submit" - 定义按钮上的显示的文本
  • type="text", "password", "hidden" - 定义输入字段的初始值
  • type="checkbox", "radio", "image" - 定义与输入相关联的值

<input type="checkbox"> 和 <input type="radio"> 中必须设置 value 属性。
value 属性无法与 <input type="file"> 一同使用。

• checked 属性
  规定此 input 元素首次加载时应当被选中，布尔属性，不需要值。
  与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

• maxlength 属性
  规定输入字段的最大长度，以字符个数计。
  与 <input type="text"> 或 <input type="password"> 配合使用。

• placeholder 属性
  placeholder 属性的属性值会显示在表单控件中，为填写表单的人提供输入提示。一旦用户输入文本，占位文本即消失。
  如果文本输入域为空，用户提交表单时，placeholder 属性值不会提交至 Web 服务器。
  举个例子：<input type="text" name="password" placeholder="请输入密码">
  

  

• multiple 属性
  如果使用该属性，则允许用户选择一个以上的值。

• Required 属性
  是一个布尔属性，可用于任何表单控件，它指示一个域是必填的。
  举个例子：<input type="text" placeholder="Buckaroo Banzai" required>

---

3.1 文本输入

type 属性为 text 的 <input> 元素，浏览器将创建一个单行控件。

<input type="text" name="fullname" value="请输入您的姓名" maxlength="20">

3.2 密码输入

type 属性为 password 的 <input> 元素，输入的文本会加掩码。但是表单数据并不会采用一种安全的方式从浏览器发送至 Web 服务器（除非你采取了安全措施），要想提高安全性，请联系你的托管公司。

<input type="password" name="secret">

3.3 提交、点击按钮和重置

type 属性为 submitt 的<input>元素，定义了提交按钮，用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。

<input type="submit" value="Order Now">

type 属性为 button 的<input>元素，定义了可点击的按钮，但没有任何行为。button 类型常用于在用户点击按钮时启动 JavaScript 程序。

<input type="button" value="Click me" onclick="msg()" >

type 属性为 reset 的<input>元素，定义了重置按钮，点击重置按钮会清除表单中的所有数据。

<input type="reset">

也可以选择用 <button> 标签来创建一个按钮。

<button>submit</button>

3.4 单选钮输入

单选钮只允许从一组选项中选择其一，每个选项使用一个 type 属性为 radio 的<input>元素。
单选钮一般是成组出现的，同组的单选钮 name 属性值一致。

<input type="radio" name="fruit" value="apple" id="apple" checked>
<label for="apple">apple</label>
  
<input type="radio" name="fruit" value="peach" id="peach">
<label for="peach">peach</label>
  
<input type="radio" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>

3.5 复选框输入

type 属性为checkbox的 <input> 元素，浏览器将创建一个复选框控件，可以选中，也可以不选中。
复选框一般是成组出现的，同组的复选框 name 属性值一致。

<input type="checkbox" name="fruit" value="apple" id="apple" checked>
<label for="apple">apple</label>

<input type="checkbox" name="fruit" value="peach" id="peach">
<label for="peach">peach</label>

<input type="checkbox" name="fruit" value="banana" id="banana">
<label for="banana">banana</label>

3.6 文件输入

type 属性为 file 的 <input> 元素会创建一个文件输入控件，允许你上传文件至 Web 服务器。使用这个元素的前提是，表单数据的上传方法必须为POST。
accpet 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

<input type="file" accept="image/gif, image/png" multiple="multiple">

提示：
1. 如果不限制图像的格式，可以写为：accept="image/*"。
2. 请避免使用该属性。应该在服务器端验证文件上传。

3.7 创建一个菜单

• <select> 和 <option> 元素结合使用可以创建菜单，option 元素用来表示各个菜单项。
• <option> 元素不需要 name 属性，因为 <select> 元素已经为整个菜单指定了名字。
• 浏览器将用户填写的表单信息发送至Web服务器时，会选用 <select> 元素的 name 属性名和 <option> 元素的 value 属性名，例如：characters ="Buckaroo"。
• <option> 元素的 selected 属性规定在页面加载时预先选定该选项。

<select name="characters">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny" selected>Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>

如果为 <select> 元素增加布尔属性 multiple，单选菜单即变成一个多选菜单。选择菜单项目时同时按下 Ctrl（Windows） 或 Command（Mac） 键，可以选择多个选项。

<select name="characters" multiple="multiple">
<option value="Buckaroo">Buckaroo Banzai</option>
<option value="Tommy">Perfect Tommy</option>
<option value="Penny" selected>Penny Priddy</option>
<option value="Jersey">New Jersey</option>
<option value="John">John Parker</option>
</select>

3.8 文本区

<textarea> 元素会创建一个多行的文本区，如输入的文本在文本框中放不下，右边还会出现一个滚动条。
<textarea> 元素不是一个 void 元素，开始和结束标记之间的所有文本会成为浏览器文本区控件中的初始文本。
<textarea> 元素可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

属性	描述	语法
cols	规定文本区内的可见宽度（以平均字符数计）	<textarea rows="value">
rows	规定文本区内的可见行数（以行数计）	<textarea cols="value">
autofocus	是逻辑属性，规定在页面加载后文本区域自动获得焦点	<textarea autofocus>
disabled	规定禁用文本区。被禁用的文本区既不可用，也不可点击	<textarea disabled="value">
form	规定 <textarea> 元素所属的 form 元素，该属性的值必须是同一文档中的某个 <form> 元素的 id 属性	<textarea form="form_id">
maxlength	规定文本区域的最大字符数	<textarea maxlength="number">
name	规定文本区的名称	<textarea name="value">
placeholder	规定描述文本区域预期值的简短提示	<textarea placeholder="text">
readonly	规定文本区为只读，无法对内容进行修改，但用户可以通过 tab 键切换到该控件，选取或复制其中的内容	<textarea readonly="value">
required	是逻辑属性，规定文本区域是必填的	<textarea required>
wrap	规定当在表单中提交时，文本区域中的文本如何换行，默认属性值为 soft ，即提交表单时文本不换行。当属性值为 hard 时，文本换行（包含换行符），此时必须规定 cols 属性。	<textarea wrap="soft / hard">

<textarea name="comments" rows="8" cols="8" autofocus>请输入文本</textarea>

3.9 被隐藏的段落

type 属性为 hidden 的 <input> 元素，定义了隐藏的字段。隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。

<input type="hidden" name="country" value="Norway" >

3.10 插入图片

type 属性为 image 的 <input> 元素，定义了图像形式的提交按钮。

属性	描述
src 属性	规定作为提交按钮显示的图像的 URL
alt 属性	由于某些原因无法查看图像时提供备选的信息

<input type="image" src="submit.gif" alt="Submit" />

以下为 HTML 5 的元素新属性

---

3.11 数字输入

type 属性为 number 的 <input> 元素，浏览器将会限制只能输入数字。

属性	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	规定默认值

<input type="number" min="0" max="10" step="2" value="6">

3.12 范围输入

type 属性为 range 的 <input> 元素类似于 number，只是它会显示一个滑动条，而不是一个输入框。

属性	描述
max	规定允许的最大值
min	规定允许的最小值
step	规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）
value	规定默认值

<input type="range" min="0" max="10" step="2">

3.13 颜色输入

type 属性为 color 的 <input> 元素用于从拾色器中选取颜色。

<input type="color" name="user_color">

3.14 日期输入（Date Pickers）

type 属性为 date 的 <input> 元素可以指定一个日期。

<input type="date" name="user_date">                      选取日、月、年
<input type="month" name="user_month">                    选取月、年
<input type="week" name="user_week">                      选取周、年
<input type="time" name="user_time">                      选取时间（小时和分钟）
<input type="datetime" name="user_datetime">              选取时间、日、月、年（UTC 时间）
<input type="datetime-local" name="user_datetime-local">  选取时间、日、月、年（本地时间）

3.15 Email 输入和 URL 输入

type 属性为 email 和 url 的 <input> 元素其实就是一个文本输入元素，只不过在一些浏览器上会显示一个方便输入 email 或 url 的定制键盘。

<input type="email" name="user_email">
<input type="url" name="user_url">

3.16 search 搜索域

type 属性为 search 的 <input> 元素用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域，在搜索框中输入内容时，文本后会自动出现一个小 ×，用于清除输入的内容。

<input type="search" placeholder="搜索">

3.17 组合表单

<fieldset>
    <legend>Personal Information</legend>
    姓名：<input type="text" name="fullname">
    性别：<input type="radio" name="sex" value="male"> 男
         <input type="radio" name="sex" value="female"> 女
    生日：<input type="date" name="birthday">
    爱好：<textarea></textarea>
</fieldset>

4 表单的元素名（name）如何工作？

---

每个表单控件都有一个 name 属性，它相当于表单和处理表单的服务器脚本之间的一个粘合剂。提交表单时，name 属性值将作为数据的标签一起被浏览器发送至 Web 服务器。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

5 关于可访问性——为表单元素添加标签

---

可以用 label 元素为表单元素添加标签。每个表单元素的id属性值必须是唯一的。
点击 <label> 标签内的文本，浏览器会自动选中与 <label> 标签相关的表单控件。
<label> 标签的 for 属性应当与相关表单控件的 id 属性相同。

<input type="radio" name="hotornot" value="hot" id="hot">
<label for="hot">hot</label>

<input type="radio" name="hotornot" value="not" id="not">
<label for="not">not</label>

---

1. 对同一URL的多个请求应该返回同样的结果。 ↩