第16章使用表单创建交互网页.ppt

表单是Internet用户同服务器进行信息交流的最重要工具。表单具有调查数据、搜索信息等功能。一般的表单由两部分组成，一是描述表单元素的HTML源代码；二是客户端的脚本，或者服务器端用来处理用户所填写信息的程序。 当访问者将信息输入表单并单击“提交”按钮时，这些信息将被发送到服务器，服务器端脚本或应用程序在该处对这些信息进行处理，服务器通过将请求信息发送回用户，或基于该表单内容执行一些操作来进行响应。通常都是通过通用网关接口（CGI）脚本、ColdFusion页、JSP、PHP或ASP来处理信息的，如果不使用服务器端脚本或应用程序来处理表单数据就无法收集这些数据。 表通常一个表单中会包含多个对象，有时它们也被称为控件，如用于输入文本的文本域、用于发送命令的按钮、用于选择项目的单选按钮和复选框，以及用于显示选项列表的列表框等。本节将向读者详细介绍如何在网页中插入和设置常用的表单元素。 16.2.1　认识常用表单元素 在Dreamweaver CC的“插入”面板上有一个“表单”选项卡，单击选中“表单”选项卡，可以看到在网页中插入的表单元素按钮,在该选项卡中包含了网页中常用的表单元素和在Dreamweaver CC中新增的HTML 5表单元素，关于HTML 5新增表单元素将在16.3节中进行详细介绍。 16.2.2　表单域 表单域是表单中必不可少的元素之一，所有的表单元素只有在表单域中才会生效，因此，制作表单页面的第1步就是插入表单域。 课堂案例——插入表单域 课堂案例：插入表单域 最终文件：光盘\最终文件\第16章\16-2-2.html 视频：光盘\视频\第16章\16-2-2.swf 16.2.3　设置表单域属性 将光标移至刚插入的表单域中，在“状态”栏的标签选择器中单击选中form#form1标签，即可将表单域选中，可以在“属性”面板上对表单域的属性进行设置。 16.2.4　文本域 在文本域中，可以输入任何类型的文本、数字或字母，文本域也是网页表单中最常用的一种表单元素。 课堂案例——插入文本域 课堂案例：插入文本域 最终文件：光盘\最终文件\第16章\16-2-4.html 视频：光盘\视频\第16章\16-2-4.swf 16.2.5　设置文本域属性 ① Name 在该文本框中可以为文本域指定一个名称。每个文本域都必须有一个唯一的名称，所选名称必须在表单内唯一标识该文本域。 提示：表单元素的名称不能包含空格或特殊字符，可以使用字母、数字字符和下划线的任意组合。注意，为文本域指定名称最好便于记忆。 ② Size 该选项是用来设置文本域中最多可显示的字符数。 ③ Max Length 该选项用来设置文本域中最多可输入的字符数。如果将该文本框保留为空白，则浏览者可以输入任意数量的文本。 ④ Value 在该文本框中可以输入一些提示性的文本，从而帮助浏览者顺利填写该文本框中的资料。当浏览者输入资料时初始文本将被输入的内容代替。 ⑤ Title 该选项用于设置文本域的提示标题文字。 ⑥ Place Holders 该属性为HTML 5新增的表单属性，用于设置文本域预期值的提示信息，该提示信息会在文本域为空时显示，并会在文本域获得焦点时消失。 ⑦ Disabled 选中该选项复选框，表示禁用该文本域，被禁用的文本域既不可用，也不可点击。 ⑧ Auto Focus 该属性为HTML 5新增的表单属性，选中该复选框，表示当网页被加载时，该文本域自动获得焦点。 ⑨ Required 该属性为HTML 5新增表单属性，选中该复选框，表示在提交表单之前必须填写该文本域。 ⑩ Read Only 选中该复选框，表示该文本域为只读，不能对该文本域中的内容进行修改。 ? Auto Complete 该属性为HTML 5新增的表单元素属性，选中该选项复选框，表示该文本域启用自动完成功能。 ? Form 该属性用于设置与该表单元素相关联的表单标签的ID，可以在该选项后的下拉列表中选择网页中已经存在的表单域标签。 ? Pattern 该属性为HTML 5新增的表单元素属性，用于设置文本域值的模式或格式。例如 pattern=[0-9]，表示输入值必须是0与9之间的数字。 ? Tab Index 该属性用于设置该表单元素的tab键控制次序。 ? List 该属性是HTML 5新增的表单元素属性，用于设置引用数据列表，其中包含文本域的预定义选项。 16.2.6　密码域 密码域与文本域的形式是一样的，只是在密码域中输入的内容会以星号或圆点的方式显示。在Dreamweaver CC中将密码域单独作为一个表单元素，用户只需要单击“插入”面板“表单”选项卡中的“密码”按钮，即可在网页中插入密码域。 16.2.7　文本区域 多行文本域的使用也是非常常见的，通常在