使用过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页面通过元素向用户提供超级链接,用户点击该链接时,会向服务器发起请求;
第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、表单的主要元素
元素:表示表单;元素:表单中的输入控件,输入控件可以是文本框、单选框、复选框、按钮等等;
元素:表单中的标签控件;
元素:表单中的按钮控件;
与元素:用于实现列表框和下拉菜单;
元素:多行文本控件。
4、表单提交文本框的输入
下面是一个可以提交文本框输入的HTML文档:
form001 请输入您的姓名:
在浏览器中打开该HTML文档时,展示效果如下:
我们可以在文本框中输入信息,例如输入tom:
当我们点击“提交”按钮后,浏览器显示信息如下;
可以看到,数据被提交给process.html页面,并且附带了一个参数name,且值为我们输入的tom。
5、表单提交用户对单选框的选择
下面是一个可以提交单选框被选信息的HTML文档:
form002 性别:
男: 女:国籍:
中国:
美国:
日本:
英国:
其它:
在浏览器中打开该HTML文档时,显示效果如下:
我们可以选择性别和国籍,例如我们选择“男”和“中国”:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了gender参数的值为male,nationality参数的值为Chinese。
6、表单提交用户对复选框的选择
下面是一个可以提交复选框被选信息的HTML文档;
form003 请选择您的业余爱好:
美术:
足球:
唱歌:
厨艺:
其它:
在浏览器中打开该HTML文档时,显示效果如下:
我们可以选择自己的业余爱好,例如我们选择足球、唱歌、厨艺:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了三个hobby参数,其值分别为Football,Singing和Cook。
7、表单提交用户对下拉菜单的选择
下面是一个可以提交下拉菜单被选信息的HTML文档;
form004 请选择您的学历: 小学初中高中大学请选择您的兴趣爱好: 美术足球唱歌厨艺其它
在浏览器中打开该HTML文档时,显示效果如下:
我们可以单选我们的学历,也可以通过按下Shift+鼠标键多选我们的兴趣。例如我们选择“初中”学历,选择“美术”和“厨艺”两项爱好:
当我们点击“提交”按钮后,浏览器显示信息如下:
可以看到,我们选择的信息被提交给process.html文件,并且附带了education参数和两个hobby参数,education的值为junior_high_school,hobby的值为Art和Cook。
上面列举了几种控件的HTML5表单设计方法,其它的控件也大概差不多,把多个控件组合在同一个
元素中的方法也是相同的,这里就不再赘述了。