项目十 表单元素的应用ppt课件.pptx

《项目十 表单元素的应用ppt课件.pptx》由会员分享，可在线阅读，更多相关《项目十 表单元素的应用ppt课件.pptx（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、项目十 表单元素的应用项目十 表单元素的应用学习目标学习目标掌握插入各种表单元素掌握设置表单元素属性掌握各种表单元素的用法项目十 表单元素的应用项目项目简介简介该项目需要掌握表单元素的作用及使用方法，掌握运用表单元素制作交互式网页的技能。重点掌握文本域、单选按钮、下拉菜单、复选框、文本区域、按钮等元素的应用。本项目要完成的任务：任务 制作用户注册页面任务 制作用户注册页面任务描述任务描述该任务主要运用表单及表单域的功能制作用户注册交互页面，重点掌握表单及表单域元素的功能与作用。通过该任务的学习，为后面动态网页部分制作网上交互式栏目打下理论与实作基础。该任务的需求如下所示：在“WebTest项目

2、10”文件夹中新建10-1.html文档，并实现如图10-1所示的页面效果。任务 制作用户注册页面图10-1 10-1.html页面浏览效果图任务 制作用户注册页面知识知识储备储备表单是用来收集访问者信息或实现一些交互作用的网页常用的表单元素有：单行文本域、密码文本域、多行文本域、下拉列表域、单选按钮、复选按钮、隐藏域、提交按钮、重置按钮、普通按钮等。表单是一种网页容器标签，可以插入普通网页标签，也可插入各种表单交互组件。表单标签为，表单元素都放在表单标签之内任务 制作用户注册页面任务任务实施实施1.新建文档新建 10-1.html文档，并保存到“WebTest/项目10”文件夹中；任务 制作

3、用户注册页面2.页面布局在10-1.html文档的“设计”视图中，把光标定位到页面的第一行位置插入一个1行1列的表格。设置表格属性为：宽500像素，边框、填充、间距均为0，居中显示。任务 制作用户注册页面3. 插入表单光标定位到表格中点击“插入”菜单选择“表单”点击“表单”，插入表单（在“设计”视图中，表格中会显示一红色虚线框）任务 制作用户注册页面4.表单中插入表格和表单元素（1）光标定位到表单中插入一个12行2列的表格，设置表格属性为：宽100%，边框为1、填充和间距均为0。把第一行两个单元格合并成一个单元格，高为30光标定位在第一行，在“格式”菜单中选择“对齐”，点击“居中对齐”，并在单

4、元格中输入“新用户注册系统”文本，文本加粗显示（选中文本，点击属性面板上的“粗体”按钮 ）任务 制作用户注册页面（2）选中第2行第1列至第11行第1列在单元格的属性面板中设置宽100、高30在“格式”菜单中选择“对齐方式”，选择“右对齐”，分别按效果图样式录入“真实姓名”、“用户名”、“备注”，并设置文本显示为“粗体”。（3）选中第2行第2列至第11行第2列在“格式”菜单中选择“对齐方式”，选择“左对齐”。任务 制作用户注册页面（4）光标定位到第2行第2列（对应“真实姓名”）点击“插入”菜单选择“表单”点击“文本域”弹出“输入标签辅助功能属性”对话框，如图10-2所示“ID”中输入文本框ID“

5、Name”,其它属性默认确定。图10-2 文本域辅助功能属性对话框任务 制作用户注册页面（5）同理，在第3行第2列中插入“用户名”对应的“文本域”元素。（6）在第4行第2列中插入“密码”对应的“文本域”元素，在“设计”界面，选中刚插入的“文本域”，在属性面板中的“类型”中选择“密码”如图10-3所示。图10-3 文本域属性面板任务 制作用户注册页面（5）同理，在第3行第2列中插入“用户名”对应的“文本域”元素。（6）在第4行第2列中插入“密码”对应的“文本域”元素，在“设计”界面，选中刚插入的“文本域”，在属性面板中的“类型”中选择“密码”如图10-3所示。图10-3 文本域属性面板提示：文本

6、域默认类型为单行，如选择密码类型，则输入信息以密文形式显示。任务 制作用户注册页面（7）光标定位到第5行第2列（对应“性别”）点击“插入”菜单选择“表单”点击“单选按钮组”弹出“单选按钮组”对话框，在标签中分别输入“男”、“女”，值对应为1和2，如图10-4所示“布局，使用”选择“换行符”确定图10-4 单选按钮组对话框任务 制作用户注册页面提示1：由于单选按钮布局选择为“换行符”，页面效果男和女在两行上，需求效果是在一行显示，打开“代码”视图，把两按钮代码间的换行符删除即可。提示2：“单选按钮”旁边的“+”表示新增一行，“一”表示删除当前行，通过移动上下小黑三角形，可对“标签“进行上下移动。

7、提示3：在“设计”视图中选中按钮，可在属性面板中设置按钮的“初始状态”：“已勾选”或“未勾选”。提示4：前面三点同种适用于后面讲的复选框。任务 制作用户注册页面（8）按（4）的步骤，在第6行第2列、第9行第2列、第10行第2列分别插入“年龄”、“住址”、“电话”对应的文本域。任务 制作用户注册页面（9）光标定位到在第7行第2列（对应“学历”）点击“插入”菜单选择“表单”点击“文本域”“列表/菜单” 弹出“输入标签辅助功能属性”对话框确定在“设计”界面选中插入的“列表/菜单”在属性面板中，类型选择“菜单”点击“列表值”在“列表值”对话框中录入学历信息，如图10-5所示确定图10-5 列表/菜单对

8、话框任务 制作用户注册页面（10）光标定位到在第8行第2列（对应“爱好”）点击“插入”菜单选择“表单”点击“复选框组”在“复选框组”对话框中录入如图10-6所示信息。确定图10-6 复选框对话框提示：打开提示：打开“代码代码”视图，把筛选框代码间的换行符视图，把筛选框代码间的换行符删除即可。删除即可。任务 制作用户注册页面（11）光标定位到在第11行第2列（对应“备注”） 点击“插入”菜单选择“表单”点击“文本区域” 弹出“输入标签辅助功能属性”对话框在ID框中录入“BZ”确定选中“文本区域”对象在属性面板中的“初始值”中录入“填入其他信息，字数不超过200字”，“字符宽度”为40，行为5。任

9、务 制作用户注册页面（12）把第12行两单元格合并成一个单元格在“格式”菜单中选择“对齐”，选择“居中对齐”，属性面板中设置第12行单元格高为40光标定位到第12行点击“插入”菜单选择“表单”点击“按钮” 弹出“输入标签辅助功能属性”对话框在ID框中录入“Reset” 确定选中Reset“按钮”对象在属性面板中，“值”输入“重填”，动作选择“重置表单”把光标定位在Reset按钮后面，按前面的方法再插入一个按钮，ID为“submit”，默认为“提交”。任务 制作用户注册页面5.保存网页，按F12在浏览器中浏览效果。提示2：表单一般用于动态网页设计中，在后面的项目中还会进一步讲解。知识拓展在网页中

10、，表单主要负责数据采集的功能，是用户和服务器之间进行信息交互的重要手段。一、 表单的组成一个表单有三个基本组成部分： 表单标签、表单域、表单按钮。知识拓展1.表单标签：，表单元素都放在表单标签之内，表单标签的主要功能是申明表单，定义采集数据的范围，以及数据提交到服务器的方法。2.表单域：包含文本域、文本区域、复选框、单选按钮、列表/菜单、文件域、图像域、隐藏域、等，表单域主要用于采集用户的输入或选择的数据。3.表单按钮：包括提交按钮、重置按钮和一般按钮。用于将数据提交或者取消输入。知识拓展二、表单详解1.表单标签7.复选框2.文本域8.选择（列表/菜单）3.密码域9.文件域4.隐藏域10.图像域5.文本区域11.按钮6.单选按钮12.跳转菜单