第6章 编辑表单 网页设计案例教程ppt.ppt

第6章 编辑表单 本章内容在网站设计中的地位 表单在网页中的作用不可小视，应用表单可以收集来自用户的信息，表单通常的用处包括网上调查、网上订单和建立搜索界面等。当用户在表单中完成各种信息的输入，并且将表单提交后，通过服务器端的应用程序或者脚本程序，信息就会反馈到服务器，并被转换为可以识别的数据，存储在数据库中，从而实现与客户的交互。在网页设计中，为了收集网页访问者的信息，必须设计合适的表单页面。 本章要点 文本域的使用； 复选框的使用； 按钮的使用； 插入列表和菜单。 教学目标 通过本章学习，掌握向网页中插入文本域、按钮、复选框、列表、文件域等； 能对表单元素进行灵活运用； 能在网页中对表单元素进行布局； 能利用表单元素制作较为复杂的表单页面。 6.1.1 表单的基本操作 1．创建表单 表单包括两部分：一部分是HTML源代码用于描述表单(如域、标签和用户在页面上看见的按钮)；另一部分是脚本或应用程序用于处理提交的信息(如Asp脚本)，不使用处理脚本就不能收集表单数据。浏览器处理表单的过程一般是这样：用户在表单中输入数据，然后提交表单，浏览器根据表单中的设置处理用户输入的数据。若表单制定通过服务器端的脚本程序进行处理，则该程序处理完毕后将结果反馈给浏览器，用户就可以看到处理结果了。当然，若表单制定能通过客户端的脚本程序处理，处理完毕后也会将处理结果反馈给用户。 表单标签form…/form用于申明表单，定义采集数据的范围，也就是form…/form中包含的数据将被提交到服务器或者电子邮件中。 向文档中插入表单的具体操作步骤如下。 (1) 将插入点放在要插入表单的位置。 (2) 执行“插入”→“表单”菜单命令，或选择“插入”栏的“表单”项，如图 (3) 单击“表单”按钮，出现表单。 (4) 在“设计”窗口中，选中表单，或者在标签选择器中选择form标签，执行“窗口”→“属性”菜单命令，打开“属性”面板，如图 。 下面对“属性”面板中的各项参数进行说明。 ①“表单名称”：输入唯一的名称以标识表单。 ②“动作”：指定处理该表单的动作页或脚本的路径。 ③“方法”：选择表单数据传输到服务器的方法，有以下3种。 默认：使用浏览器的默认设置将表单数据发送到服务器。通常，默认方法为GET。 GET：将值追加到请求页的URL中。 POST：在HTTP请求中嵌入表单数据。 ④“MIME类型”：弹出式菜单可以制定对提交给服务器进行处理的数据使用MIME编码类型。 2．表单的用法 表单元素包括文本域、隐藏域、复选框、列表、文件域以及按钮等。下面介绍如何将这些元素插入到表单中。 (1) 插入文本域。文本域是用来设置文本编辑区空间的名称，可以被脚本或应用程序调用。同其他控件一样，在发送控件中的数据时，同时也发送名称值。在HTML文件中插入文本域可以执行下列操作步骤。 ① 把光标定位在要插入表单的位置，执行“插入→表单→文本区域”菜单命令或单击插入栏中选择“表单”类别中的“文本区域”按钮 。 ② 文本域有对应的“属性”面板，选中文本域，打开“属性”面板，设置文本域的属性。 下面对“属性”面板中的各项参数做简单介绍。 a.“文本域”文本框：用来设置所选文本框的名称。 b.“字符宽度”文本框：用来设置所选文本框的长度，可输入数值。例如，输入“10”，则文本框的长度能显示5个字符，或者能显示5个汉字。如果列数超出该值，由warp属性来确定是自动为文本编辑区添加水平滚动条，还是自动对文本进行回行。 c.“行数”文本框：用来设置文本编辑区的文本行数，即文本编辑区的高度。如果文本行数超过该值，浏览器会自动为文本编辑区添加垂直滚动条。 d．“换行”：用来控制文本编辑区中文字自动回行的方式。 e．“类型”：制定域类型为单行、多行还是密码域。 f．“初始值”文本框用来设置所选文本框被显示时的初始文本。如图6.7所示就是浏览器默认打开时显示的初始文字。 (2) 插入单行文本域。单行文本域通常提供单字或短语响应，如姓名、地址等。 执行“插入→表单→文本字段”菜单命令 。 (3) 插入密码域。密码域是特殊类型的文本域，当用户在密码域中输入文本时，所输入的文本被替换为符号“＊”或者项目符号“·”显示，从而起到保密的作用 。 (4) 插入多行文本域。多行文本域也是一种允许访问者自己输入内容的表单对象，只不过允许访问者填写较长的内容。在文本域“属性”面板的“类型”中选择“多行”单选按钮，文本框将转换成多行文本域。当多行文本域设置为“多行”时将产生一个textarea标签。“字符宽度”设置映射为cols属性，“行数”设置映射为rows属性。 (5) 插入单选按钮。单选按钮主要用于标记一个选项是否被选中，在文档中用户可以添加多个单选按钮，与复选框不同的是，浏览者浏览网页时只能