HTML与CSS网页设计-表单属性与表单提交

2023-10-19 理论教育版权反馈

【摘要】：浏览者通过表单元素将表单数据填写完整后，要将表单提交到服务器，才能完成此次与服务器的数据交互。表3.7表单的属性以下代码演示了表单的属性。名/值对中的名称即为表单元素的name 属性值，则名/值对中的值是指表单元素的value 属性值。将例3.13 中的表单改为get 方式提交。表单数据提交到哪个程序处理由表单的action 属性设置，浏览器以哪种方式提交表单数据由表单的method 属性设置。图3.26发表新话题的表单

浏览者通过表单元素将表单数据填写完整后，要将表单提交到服务器，才能完成此次与服务器的数据交互。表单提交是指浏览器将表单内所有表单元素的数据作为整体发送到服务器端。浏览者可以通过类型为sumit或image的<input />标签以及类型为submit的<button></button>标签的单击来告知浏览器行使这一提交动作。

浏览器提交到表单数据时，究竟应该向服务器端的哪个程序发送表单数据，采用哪种方式发送数据，表单数据如何编码等，可以由<form></form>标签的一些属性来设置。

表单的属性见表3.7。

表3.7　表单的属性

pagenumber_ebook=86,pagenumber_book=75

以下代码演示了表单的属性。

例3.13：

pagenumber_ebook=87,pagenumber_book=76

代码运行结果如图3.16 所示。

pagenumber_ebook=87,pagenumber_book=76

图3.16　例3.13 的运行结果

填写会员名和密码后单击登录提交按钮，浏览器将把表单数据发送到服务器的login.html 程序中去处理，代码运行结果如图3.17 所示。

pagenumber_ebook=87,pagenumber_book=76

图3.17　例3.13 表单提交的结果

说明

目前我们并没有架设WEB 服务器，包含登录表单的页面也没有真正部署到WEB 服务器中，所以使用了login.htm 这个普通的静态网页来模拟需要在服务器中运行的表单数据处理程序。

在表单提交时，有时在浏览器地址栏中可以看到除表单处理程序的URL 之外的一些数据。在百度中填写搜索关键字的场景，如图3.18 所示。

pagenumber_ebook=88,pagenumber_book=77

图3.18　Google 搜索表单

浏览者填写了搜索关键字后单击“百度一下”搜索，结果如图3.19 所示。

pagenumber_ebook=88,pagenumber_book=77

图3.19　百度搜索结果

注意

浏览器地址栏中的数据，？（问号）之后的数据是因为表单采用get 方式提交而产生。

实际上，问号之后就是浏览者在表单中填写的数据，当浏览器发现表单的method 属性值为get 时，将会把表单中每个表单元素的数据组织成为多个的名/值对，用&连接符将这些名/值对连成一个字符串，附加在表单的action 属性指定的表单处理程序的地址之后。名/值对中的名称即为表单元素的name 属性值，则名/值对中的值是指表单元素的value 属性值。

将例3.13 中的表单改为get 方式提交。

例3.14：

pagenumber_ebook=89,pagenumber_book=78

运行此页面，填写会员名为ximo su，密码为123456，单击登录按钮提交到login.html。

观察转到login.html 页后浏览器地址栏中的数据，如下：

…….login.html?txtName=ximo+su&txtPwd=12345&btnSubmit=%B5%C7%C2%BC

问号之后有3 个名/值对，名即txtName、txtPwd、btnSubmit，是表单中3 个表单元素的name 属性的值，则3 个值ximo+su、123456、%B5%C7%C2%BC 是这3 个表单元素相对应的value 值。

说明

可以理解，get 和post 两种提交方式的差别。get 方式是将表单数据作为一个字符串附加在地址之后传递到服务器端，而post 方式则是由浏览器隐藏地传递到服务器端。

注意(www.chuimin.cn)

当表单内包含密码框及文件域时或表单的数据量较大时，应使用post 方式。另外，应区分这两种方式在语义方面的差别：post 指浏览器提供一批数据发送到服务器，而get指浏览器要从服务器端获取数据。

总结

➢表单用于浏览器和WEB 服务器之间进行数据交互。

➢使用<form></form>标签创建表单。

➢使用<input />标签、<textarea></textarea>标签、<select></select>标签及<option></option>标签、<button></button>标签、<label></label>标签、<fieldset></fieldset>标签及<legend></legend>标签在表单内部创建表单元素。

➢<input />标签可以创建多种类型的表单输入元素。

➢<select></select>标签及<option></option>标签可以创建列表框及其内部的选项。

➢<button></button>标签可以创建多种类型的按钮。

➢<label></label>标签可以为其他表单元素创建标签文本并与表单元素进行绑定。

➢<fieldset></fieldset>标签及<legend></legend>标签可以将表单内部的众多表单元素进行分组，并为每一组提供标题。

➢表单提交指浏览器将表单内部表单元素的数据发送到WEB 服务器端。表单数据提交到哪个程序处理由表单的action 属性设置，浏览器以哪种方式提交表单数据由表单的method 属性设置。

作业

1.在网页中使用文本框、复选框、单选按钮、文本域、下拉列表、按钮等表单元素，制作一个显示申请表信息的页面，如图3.20 所示。

pagenumber_ebook=90,pagenumber_book=79