新网页设计与制作项目实训教程 教学课件 严加琼 曾金发 项目10.pptVIP

项目10 表单网页制作 项目描述 　　　表单是网站管理员与用户之间进行沟通的桥梁，目前大多数的网站都需要与用户进行动态的交流，表单是必不可少的。本项目运用表单知识创建在线注册页面，效果如图10-1所示。 项目描述 10.2 知识储备 10.2.1 认识表单 10.2.2 创建及设置表单 10.2.3 创建及设置表单元素 10.2 知识储备 　　表单在网页中主要负责数据采集功能。一个表单主要有三个基本组成部分：表单标签，这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。表单按钮，包括提交按钮、复位按钮和一般按钮，用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了脚本的处理工作。 10.2 知识储备 10.2.2 创建及设置表单 1.插入表单 　　插入表单的具体操作步骤： （1）将光标置于要插入表单的位置。 （2）单击菜单“插入”→“表单”选项→“表单”命令,如图10-2所示。 10.2 知识储备 （3）选择命令后，页面中就会出现红色的虚线，这虚线就是表单，如图10-3所示。 10.2 知识储备 2.设置表单属性 　　表单有对应的属性面板，将光标置于虚线上，打开属性面板，可以设置表单的属性，如图10-4所示。 10.2 知识储备 10.2.3 创建及设置表单元素 　1.文本域、文本区域、隐藏域 　　表单中可用于输入文本的对象统称为文本域，Dreamweaver CS5中共提供3种类型的文本域：文本域、文本区域、隐藏域。其中文本域又可分为单行文本域，多行文本域和密码域，可接受任何类型的字母、数字、文本输入内容。 10.2 知识储备 (1)文本域 　　文本域是一个接受文本信息的文本框。在文本域中几乎可以容纳任何类型的文本数据。网页中常见的文本域有以下三种类型： ① 单行文本域：只能输入一行的信息。 ② 多行文本域：可以输入多行信息，为访问者提供一个较大的输入区域。 ③ 密码文本域：该类型比较特殊，当用户在域中输入时，所输入的文本北替换为星号（*）或项目符号，以隐藏输入文本，保护这些信息。 10.2 知识储备 　　插入文本域的步骤如下： ① 将光标置于要添加文本域的位置。 ② 单击菜单“插入”→“表单”→“文本域”，弹出“输入标签辅助功能属性”对话框，如图10-5所示。 ③ 根据需要进行相应的设置后单击“确定”按钮，即可在光标处添加文本域。 10.2 知识储备 　　文本域有对应的属性面板。选中文本域，打开属性面板，可以设置文本域的属性，如图10-6所示。 10.2 知识储备 (2)文本区域 　　文本区域的外观类似于多行文本框，插入是默认可容纳5行文本，其属性设置也与文本域属性设置相同。 　　插入文本区域的步骤如下： ① 将光标置于要添加文本区的位置。 ② 单击菜单“插入”→“表单”选项→“文本区域”命令，如图10-7所示。 10.2 知识储备 10.2 知识储备 (3)隐藏域 　　隐藏域在页面中对于用户是不可见的，它用于存储一些信息，以便于被处理表单的程序使用。 　　插入隐藏域的步骤如下： ① 将光标置于要添加隐藏域的位置， ② 单击菜单“插入”→“表单”选项→“隐藏域”命令。 选中隐藏域，打开属性面板，如图10-8所示。 10.2 知识储备 2.复选框、复选框组、单选按钮、单选按钮组、按钮 　(1) 复选框 　　复选框允许访问在一组选项中选择任意多个适用的选项。例如，在选择兴趣爱好时，访问者可能会同时选择“读书”、“写作”和“旅游”。 　　插入复选框的步骤如下： ① 将光标置于要添加复选框的位置。 ② 单击菜单“插入” →“表单”选项→“复选框”命令，打开“输入标签辅助功能属性”对话框，在“标签”右侧文本框中输入“读书”，如图10-9所示。 10.2 知识储备 ③ 依次逐个插入其他复选框。选中复选框，打开属性面板，如图10-10所示。 10.2 知识储备 (2) 复选框组 　　插入复选框组的步骤如下： ① 将光标置于要添加复选框的位置。 ② 单击菜单“插入”→“表单”→“复选框组”命令，打开“复选框组”对话框，在其中设置复选框组的名称、组中包含的复选框个数、复选框的文本标签及布局方式等，如图10-11所示。 10.2 知识储备 (3) 单选按钮 　　单选按钮作为一个使用组，提供彼此排斥的选项值，用户在单选按钮组内只能选择一个选项。 　　插入单选按钮的步骤如下： ① 将光标放到要添加单选按钮的位置。 ② 单击菜单“插入”→“表单”→“单选按钮”命令，打开“输入标签辅助功能属性”对话框，在“标签”右侧文本框中输入”男”，单击“确定”按钮。如