使用过Delphi的程序员，对Form这个词应该比较熟悉。在Delphi中，Form被翻译为“界面、窗口”，作用是：为用户提供界面，供用户输入信息，向用户展示处理结果。

HTML5中也有Form，功能与Delphi中的Form差不多，用于接收用户输入，和服务器进行交互。不过HTML5中的Form，中文一般译为“表单”。

1、Web前端与Web后端的交互

Web前端，指浏览器上展示的HTML文件，以及HTML文件使用的CSS文件及JavaScript脚本。

Web后端，指运行在服务器上的，为Web前端提供服务的软件，Web后端也常常被称为Web服务器。

在HTML5中，Web前端与Web后端交互的流程一般如下：

（1）Web前端向Web后端发起HTTP请求；

（2）Web后端收到HTTP请求后，进行业务处理；

（3）Web后端向Web前端返回HTTP响应。

到目前为止，我们在HTML5中碰到的Web前端发起HTTP请求的方式有两种：

第1种：HTML页面通过<a>元素向用户提供超级链接，用户点击该链接时，会向服务器发起请求；

第2种：HTML页面通过表单为用户提供输入界面，用户提交表单时，会向服务器发起请求。

2、GET请求和POST请求

HTTP请求有八种，对Web前端开发者来说，最常用的是GET请求和POST请求。

GET请求：向Web后端请求指定的页面；GET请求携带的数据，以URL参数的形式提供；

POST请求：向Web后端提交数据，请求Web后端对数据进行处理；POST请求携带的数据，在请求消息体中提供。

在HTML5中，用户点击链接地址，Web前端向后端发起GET请求；

在HTML5中，用户提交表单，Web前端可以向后端发起GET请求，也可以发起POST请求。

说明：由于目前没有和后端服务器对接，为了便于对表单设计进行展示，下面的例子HTML文档，都是用GET请求来提交数据。

3、表单的主要元素

<form>元素：表示表单；

<input>元素：表单中的输入控件，输入控件可以是文本框、单选框、复选框、按钮等等；

<label>元素：表单中的标签控件；

<button>元素：表单中的按钮控件；

<select>与<option>元素：用于实现列表框和下拉菜单；

<textarea>元素：多行文本控件。

4、表单提交文本框的输入

下面是一个可以提交文本框输入的HTML文档：

<!DOCTYPE html><html> <head> <title>form001</title> <meta charset='utf-8' /> </head> <body> <form action='process.html' method='get'> <label>请输入您的姓名：</label> <input type='text' name='name' /> <br/> <input type='submit'/> </form> </body></html>

在浏览器中打开该HTML文档时，展示效果如下：

我们可以在文本框中输入信息，例如输入tom：

当我们点击“提交”按钮后，浏览器显示信息如下；

可以看到，数据被提交给process.html页面，并且附带了一个参数name，且值为我们输入的tom。

5、表单提交用户对单选框的选择

下面是一个可以提交单选框被选信息的HTML文档：

<!DOCTYPE html><html>    <head>        <title>form002</title>        <meta charset='utf-8' />    </head>    <body>        <form action='process.html' method='get'>            <label>性别：</label>            <br/>            男：<input type='radio' name='gender' value='male' />            女：<input type='radio' name='gender' value='female' />            <br/><br/>            <label>国籍：</label>            <br/>            中国：<input type='radio' name='nationality' value='Chinese' /> <br/>            美国：<input type='radio' name='nationality' value='American' /> <br/>            日本：<input type='radio' name='nationality' value='Japanese' /> <br/>            英国：<input type='radio' name='nationality' value='English' /> <br/>            其它：<input type='radio' name='nationality' value='Other' /> <br/>            <br/>            <input type='submit'/>        </form>    </body></html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择性别和国籍，例如我们选择“男”和“中国”：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了gender参数的值为male，nationality参数的值为Chinese。

6、表单提交用户对复选框的选择

下面是一个可以提交复选框被选信息的HTML文档；

<!DOCTYPE html><html> <head> <title>form003</title> <meta charset='utf-8' /> </head> <body> <form action='process.html' method='get'> <label>请选择您的业余爱好：</label> <br/> 美术：<input type='checkbox' name='hobby' value='Art' /> <br/> 足球：<input type='checkbox' name='hobby' value='Football' /> <br/> 唱歌：<input type='checkbox' name='hobby' value='Singing' /> <br/> 厨艺：<input type='checkbox' name='hobby' value='Cook' /> <br/> 其它：<input type='checkbox' name='hobby' value='Other' /> <br/> <br/> <input type='submit'/> </form> </body></html>

在浏览器中打开该HTML文档时，显示效果如下：

我们可以选择自己的业余爱好，例如我们选择足球、唱歌、厨艺：

当我们点击“提交”按钮后，浏览器显示信息如下：

可以看到，我们选择的信息被提交给process.html文件，并且附带了三个hobby参数，其值分别为Football，Singing和Cook。

7、表单提交用户对下拉菜单的选择

下面是一个可以提交下拉菜单被选信息的HTML文档；

<!DOCTYPE html><html>    <head>        <title>form004</title>        <meta charset='utf-8' />    </head>    <body>        <form action='process.html' method='get'>            <label>请选择您的学历：</label>            <br/>            <select name='education'>                <option value='primary_school'>小学</option>                <option value='junior_high_school'>初中</option>                <option value='senior_high_school'>高中</option>                <option value='college'>大学</option>            </select>            <br/><br/>            <label>请选择您的兴趣爱好：</label>            <br/>            <select name='hobby' multiple='true'>                <option value='Art'>美术</option>                <option value='Football'>足球</option>                <option value='Singing'>唱歌</option>                <option value='Cook'>厨艺</option>                <option value='Other'>其它</option>            </select>            <br/><br/>            <input type='submit'/>        </form>    </body></html>

在浏览器中打开该HTML文档时，显示效果如下：