<form>

简介

<form>标签用来定义一个表单，所有表单内容放到这个容器元素之中。

  1. <form>
  2.   <!-- 各种表单控件-->
  3. </form>

上面代码就是表单的基本形式。

下面是一个比较常见的例子。

  1. <form action="https://example.com/api" method="post">
  2.   <label for="POST-name">用户名：</label>
  3.   <input id="POST-name" type="text" name="user">
  4.   <input type="submit" value="提交">
  5. </form>

上面代码就是一个表单，一共包含三个控件：一个<label>标签，一个文本输入框，一个提交按钮。其中，文本输入框的name属性是user，表示将向服务器发送一个键名为user的键值对，键值就是这个控件的value属性，等于用户输入的值。

用户在文本输入框里面，输入用户名，比如foobar，然后点击提交按钮，浏览器就会向服务器https://example.com/api发送一个 POST 请求，发送user=foobar这样一段数据。

<form>有以下属性。

  • accept-charset：服务器接受的字符编码列表，使用空格分隔，默认与网页编码相同。
  • action：服务器接收数据的 URL。
  • autocomplete：如果用户没有填写某个控件，浏览器是否可以自动填写该值。它的可能取值分别为off（不自动填写）和on（自动填写）。
  • method：提交数据的 HTTP 方法，可能的值有post（表单数据作为 HTTP 数据体发送），get（表单数据作为 URL 的查询字符串发送），dialog（表单位于<dialog>内部使用）。
  • enctype：当method属性等于post时，该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded（默认值），multipart/form-data（文件上传的情况），text/plain。
  • name：表单的名称，应该在网页中是唯一的。注意，如果一个控件没有设置name属性，那么这个控件的值就不会作为键值对，向服务器发送。
  • novalidate：布尔属性，表单提交时是否取消验证。
  • target：在哪个窗口展示服务器返回的数据，可能的值有_self（当前窗口），_blank（新建窗口），_parent（父窗口），_top（顶层窗口），<iframe>标签的name属性（即表单返回结果展示在<iframe>窗口）。

encrypt 属性

<form>表单的encrypt属性，指定了采用 POST 方法提交数据时，浏览器给出的数据的 MIMI 类型。该属性可以取以下值。

（1）application/x-www-form-urlencoded

application/x-www-form-urlencoded是默认类型，控件名和控件值都要转义（空格转为+号，非数字和非字母转为%HH的形式，换行转为CR LF），控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用&分隔。

（2）multipart/form-data

multipart/form-data主要用于文件上传。这个类型上传大文件时，会将文件分成多块传送，每一块的 HTTP 头信息都有Content-Disposition属性，值为form-data，以及一个name属性，值为控件名。

  1. Content-Disposition: form-data; name="mycontrol"

下面是上传文件的表单。

  1. <form action="https://example.com/api"
  2.       enctype="multipart/form-data"
  3.       method="post">
  4.   用户名：<input type="text" name="submit-name"><br>
  5.   文件：<input type="file" name="files"><br>
  6.   <input type="submit" value="上传"> <input type="reset" value="清除">
  7. </form>

上面代码中，输入用户名Larry，选中一个file1.txt文件，然后点击“上传”。浏览器发送的实际数据如下。

  1. Content-Type: multipart/form-data; boundary=--AaB03x
  3. --AaB03x
  4. Content-Disposition: form-data; name="submit-name"
  6. Larry
  7. --AaB03x
  8. Content-Disposition: form-data; name="files"; filename="file1.txt"
  9. Content-Type: text/plain
  11. ... contents of file1.txt ...
  12. --AaB03x--

上面代码中，浏览器将这个表单发成多个数据块。最上面使用Content-Type字段告诉服务器，数据格式是multipart/form-data（即多个数据块），每个数据块的分隔标志是--AaB03x。每个数据块的第一行是Content-Disposition，其中的name字段表示这个数据块的控件名，数据体则是该控件的数据值，比如第一个数据块的name属性是submit-name控件，数据体是该控件的值Larry。第二个数据块是控件files，由于该控件是上传文件，所以还要用filename属性给出文件名file1.txt，数据体是file1.txt的内容。