PHP网站开发项目式教程（微课版）（第2版）任务4 提交保单数据 .pdf

任务4提交表单数据

翁

A需要解决的核心问题

•表单界面设计中复选框元素name属性的取格式是怎样的？

•使用JavaScript脚本验证表单数据的目的是什么？调用脚本

函数时，函数名称前面的return关键字的作用是什么？

•使用HTML5中的pattern属性指定的针对姓名和密码验证的正

则表达式分别是什么？

4.1.1衰单界面设计

慕槌知识及要龈魂嬲

设计表单界面时，必须使用form***/form标签生成表单

容器，还需在该容器中添加各种表单元素或非表单元素。form

标签中当前需要设置的属性是method,其取可以是post和get。

设计表单界面时，经常需要使用表格对表单中的各种元素以

及文字标签进行规则的布局设计，表单标签与表格标签的嵌套关

系如下。

〈form…〉

〈table…〉

tr

〈td表单元素/td

/tr

/table

/form

即表单form与/form标签必须放在表格〈table・・・/table

标签的外面，表单各个元素标签必须放在表格单元格标签

td-/td内部。

生成表单元素文本框、密码框、单选按钮、复选框、提交和重

置按钮都需要使用input标签，可在input标签中设置type属性

的分别为text、password、radiocheckboxsubmit和reset

来生成相关的元素。

下拉列表需要使用〈select••・/select和〈option〉…

/option两对标签来生成，其中〈select・・•/select用于生成

列表框，option・・・〈/option用于生成各个选项。文本区域需要

使用textareaeee/textarea标签来生成。

创建页面文件4-1.html,在其中设计图4-1所示的表单界面。

自我介绍

姓名：必须为6〜20个字母

—

性别：。男。女

龄：取值为0-100

个人密码：6~10个字符

确认密码与个人密码相同

你的爱好：看书足球音乐爬山

你最喜欢的颜色：红色

个人介绍不能为空

提君重置

图4T表单界面

要

2。或画元素的设沙要求

表单界面对姓名、年龄、个人密码、确认密码和个人介绍等

数据的输入提出了一些要求，为了保证用户输入的内容能够满足

这些要求，需要验证表单数据的合法性；为了能够使用脚本获取

各个元素的取并对这些进行合法性验证，要求为每个需要提

交数据的表单元素设置id属性；另外，为了能够在服务器端获取

表单元素提交的数据，需要为相应表单元素设置name属性。通常,

为了避免将两个属性弄混而造成麻烦，建议直接将各个元素的

这两个属性设置为相同的取。

(1)将“姓名”文本框的name和id属性取均设为unameo

(2)将“性别”单选按钮组的name属性取设为sex。用户选中“男”

之后，提交的数据是“男”，选中“女”之后提交的数据是“女”o

(3)将“年龄”文本框的name和id属性取均设为age。

(4)将“个人密码”输入框的name和id属性取均设为psdlo

(5)将“确认密码”输入框的name和id属性