web之表单form

表单是我们平常编写Web应用常用的工具，表单（<form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单是一个包含表单元素或控件的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等）输入信息的元素。表单使用表单标签（<form>）定义。

1. 表单语法

<form.../>元素用于生成输入表单，该元素不会生成可视化部分。

<form action="/handling-page" method="post">
  <div>
    <label for="name">用户名：</label>
    <input type="text" id="name" name="user_name" />
  </div>
  <div>
    <label for="passwd">密码：</label>
    <input type="password" id="passwd" name="user_passwd" />
  </div>
  <div>
    <input type="submit" id="submit" name="submit_button" value="提交" />
  </div>
</form>

基础属性

name：表单的唯一名称（建议与属性一致），以区分同一个页面中的多个表单。
action：指定当点击表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可是一个绝对地址，也可以是一个相对地址。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。该属性必填。
method：提交表单时的请求类型（get或者post类型），默认为get。

提交参数

单纯的<form.../>元素既不能生成可视化内容，也不包含任何表单控件，甚至不能提交表单，因此<form.../>元素必须与其他控件元素集合使用。

当在<form.../>元素里定义一个或多个表单控件，一旦提交表单，该表单里的表单控件将会转成请求参数。规则如下：

每个有name属性的表单控件对应一个请求参数，没有name属性的表单控件不会生成请求参数。
如果多个表单控件有相同的name属性，则多个表单控件只生成一个请求参数，只是该参数有多个值。
如果某个表单控件设置了disable或disable="disabled"属性，则该表单控件不再生成请求参数。
表单控件的name属性指定请求参数即键值对的键名，value属性指定请求参数值即键值对的值。

键名和键值之间用等号连接，所有的键值对对会提交到服务器，提交的数据格式和<form>元素的method属性相关。如果是GET方法，所有键值对会以URL的查询字符串形式，提交到服务器，比如/handling-page?user_name=张三&user_passwd=123&submit_button=提交。

GET /handling-page?user_name=张三&user_passwd=123&submit_button=提交
Host: example.com

如果是 POST 方法，所有键值对会连接成一行，作为 HTTP 请求的数据体发送到服务器，比如user_name=张三&user_passwd=123&submit_button=提交。下面就是 POST 请求的头信息。

POST /handling-page HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 74

user_name=张三&user_passwd=123&submit_button=提交

enctype属性

表单能够用四种编码向服务器发送数据，由表单的enctype属性决定。

GET方法提交表单数据时，enctype属性无效。
application/x-www-form-urlencoded：这是默认的编码方式，它只处理表单控件里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
multipart/form-data：这种编码方式会以二进制流的方式来处理表单数据，会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性。
text/plain：当表单的action属性值为mailto:URL的形式时使用这种编码方式比较方便，主要适用于直接通过表单发送邮件的方式。

2. 表单控件

在HTML中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域3个部分构成。

input控件

HTML表单控件很多，多数情况下被用到的表单标签是输入标签(<input>)，<input>主要用于收集用户信息，可根据不同的type属性值，拥有多种形式。

<form>
  <input type="radio" name="frequency" value="daily">Daily<br>
  <input type="radio" name="frequency" value="weekly">Weekly<br>
  <input type="radio" name="frequency" value="monthly">Monthly<br>
  <input type="radio" name="frequency" value="yearly">Yearly
  <br>
  <label for="file">选择一个文件</label>
  <input type="file" id="file" name="myFile" multiple>
</form>

用户上传文件也是通过表单。具体来说，就是通过文件输入框选择本地文件，提交表单的时候，浏览器就会把这个文件发送到服务器。上传文件时需要将表单<form>元素的method属性设为POST，enctype属性设为multipart/form-data。其中，enctype属性决定了 HTTP 头信息的Content-Type字段的值，默认情况下这个字段的值是application/x-www-form-urlencoded，但是文件上传的时候要改成multipart/form-data。

上面的 HTML 代码中，file 控件的multiple属性，指定可以一次选择多个文件；如果没有这个属性，则一次只能选择一个文件。

select控件

select用于创建单选或多选列表，select控件里一般都需要option控件。

select控件有属性multiple，表示多选列表。

option控件有属性selected="selected"时，为默认值。

<form action="">
<select name="cars" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
</form>

textarea控件

textarea是多行文本区域，有cols和rows属性，cols是每行显示几个字符数，rows是显示几行。

<textarea rows="10" cols="30">
我是一个文本框。
</textarea>

label控件

label用于显示文本，将文本和控件关联到一起，单击文本和单击控件一致。

参考：