文档介绍：单元4
表单应用与制作注册登录页面
HTML5+CSS3网页设计与制作实用教程
工业和信息化人才培养规划教材
国家精品资源共享课程配套教材
高职高专计算机系列
人民邮电出版社
我们都曾申请过E-mail 邮箱,在申请过程必须在网页上输入个人信息,然后提交信息,提交成功后,才能获得E-mail 邮箱。这个用于获取信息的网页称为表单,通常一个表单中包含多个对象,有时也称为控件或表单元素,例如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框、用于显示列表项的列表框等。
一个网站不仅需要各种供用户浏览的网页,还需要与用户进行交互的表单。表单实现了浏览器和服务器之间的信息传递,它使网页由单向浏览变成了双向交互。表单是实现用户调查、产品订单和对象搜索等功能的重要手段。利用表单处理程序,可以收集、分析用户的反馈意见,做出科学的、合理的决策。
本章导读
The chapter’s introduction
目录导航
渐进训练
任务 4-1
探索训练
任务 4-3
析疑解惑
单元小结
任务 4-2
任务 4-4
任务 4-1
任务描述
,其浏览效果如图4-1 所示。
图4-1 的浏览效果
【任务4-1-1】创建电脑版用户注册网页
任务描述
①,且在该网页中插入1 个表单域。
②在表单域中插入1 个9 行3 列的表格。
③在表格中插入6 个单行文本域。
④在表格中插入2 个密码文本域。
⑤在表格中插入2 按钮。
⑥在表格中插入1 个下拉式菜单。
⑦在表格中插入1 个单选按钮组。
⑧在表格中插入1 个复选框。
⑨在表格中插入1 个图像域。
图4-2 的浏览效果
的浏览效果如图4-2 所示。
【任务4-1-1】创建电脑版用户注册网页
每个表单由一个表单域和若干个表单控件组成,制作表单页面的第一步是插入表单域。,然后选择菜单命令【插入】→【表单】→【表单】,如图4-3所示,在网页中的光标处插入一个表单域。

图4-3 插入“表单”的菜单命令
【任务4-1-1】创建电脑版用户注册网页
一个表单域插入到网页中,在编辑窗口中显示为一个红色虚线框,其他的表单对象必须要放入这个框内才能起作用。如果看不见插入到页面中的标记表单域的红色虚线区域,则可以选择菜单命令【查看】→【可视化助理】→【不可见元素】,使红色虚线可见,如图4-4 所示。

图4-4 “可视化助理”菜单
【任务4-1-1】创建电脑版用户注册网页
将光标置于表单域中,即可看到表单域的【属性】面板,在该【属性】面板中设置表单域的属性。
【属性】面板上各项属性的设置如下所述。

(1)“ID”:
(2)“Action”
(3)“Target”
(4)“Method”
(5)“Enctype”有2 个选项:
“application/x-ded”和“multipart/formdata”
【任务4-1-1】创建电脑版用户注册网页
对应的HTML 代码如下所示:
<form action="" method="post" name="form1" target="_blank" id="form1">
</form>
表单域的属性设置完成后,其【属性】面板如图4-5 所示。
图4-5 表单域的属性设置