网页设计与制作第6章 表单的使用

❖ 一系列的选项。其中每个选项都是超级链接，选中 每一个选项都将打开一个链接。
❖ 一个跳转按钮。
6.3.7 跳转菜单
❖ 1．添加一个跳转菜单 ❖ 2．修改跳转菜单
第6章 表单的使用
操作题: 新建一个文档，在该文档中建立一个个人资料
的表单。该表单如下图所示。
POST请求。 ❖ 【目标】：指定打开链接文件的框架或窗口。 ❖ 【MIME类型】：指定提交服务器处理的数据的MIME编码方式，与 ❖ POST方法连用的一般是application/x-www-form-urlencode。如果创建 ❖ 的是文件上载区域，则指定multipart/form-data MIME格式。
6.2 表单的创建
(1)表单的HTML基本语法 <form>.. .. .. ..</form>
6.3 表单对象的创建
在创建表单之后，就可以通过表单工具面 栏在表单中插入各种表单对象，也可以通过 相应的菜单在表单中插入相应的表单对象。 在表单中可以插入单行文本域、隐藏文本域、 多行文本域、单选按钮、复选框、单选按钮 组、列表菜单以及跳转菜单等多种表单对象。
❖ 【按钮名称】：设置按钮的名字。按钮名有提交和重置两个 保留名。提交用于将表单信息提交至处理信息的应用或脚本； 重置用于以原始值重新设置所有的表单区。
❖ 【标签】：设置在按钮上显示的文本。
❖ 【动作】：指定在单击这个按钮时发生的事件。选择【提交 表单】单选按钮，将会自动将按钮标签设置为【提交】；选 择【重设表单】阅览单选按钮，将会自动将按钮标签设置为 【重置】；选择【无】单选按钮，则表示在按钮被单击后， 既不提交表单也不重置表单。
6.2 表单的创建
❖ 默认，使用浏览器默认的方法（一般为GET）。 ❖ 选择GET，追加表单值到URL，并发送服务器GET请求， ❖ URL限制长度为819个字符，超出长度的部分会被去掉，所以不要对长 ❖ 表单使用GET方法，也不要用GET方法传送用户名、密码、信用卡账号 ❖ 或其他机密信息，因为GET方法不是传送信息的安全方式。 ❖ 选择POST，在HTTP request的消息正文中发送表单的值，并发送服务器
第6章 表单的使用
❖ 6.1 表单插入面板 ❖ 6.2 表单的创建 ❖ 6.3 表单对象的创建
6.1 表单插入面板
一般的表单由文本域、复选框、按钮、文件域等部分组 成，而所有的部分，都包含在一个<form>标识符标志的表 单结构内。 ❖ （表单体）：添加其他表单对象的基本容器。 ❖ （文本字段）：在表单中建立文本输入框的工具。 ❖ （隐藏域）：在网页的表单中包含隐藏的信息。 ❖ （文本区域）：在表单中建立输入多行文本输入的工具。 ❖ （复选框）：供用户在提供的多个选项中做出复选。 ❖ （单选按钮）：用于创建单个按钮。 ❖ （单选按钮组）：用于创建多个单选按钮，并使这些单选按 钮成为一组
6.3.7 跳转菜单
跳转菜单是一个下拉菜单，其中的每个选项都可 以说是一个超级链接，所以既可创建一个站内的链 接，也可以创建一个站外的链接，还可以创建Email链接或图片链接，或者是到任意一种能在浏览 器中打开的文件的链接。
一个跳转菜单通常包括3个组成部分：
❖ 菜单说明。用来说明其中的选项都是属于哪一类的 链接。
6.2 表单的创建
表单最重要的用途是和用户进行交互， 所以表单必须有非常方便的用户界面。使 用表单可以使你搜索来自用户的信息，从 而达到进行交互的目的。
根椐需要设置如下参数：
❖ 【表单名称】：用于设置表单的名称，可 在下面的编辑框中输入一个名字。
❖ 【动作】：用于指定处理表单的应用程序。 ❖ 【方法】：用于指定处理表单的方法
6.3.2 插入单选按钮
当用户单击单选按钮组中的某个按钮时，其他按钮就会被 取消选中状态。单选按钮使用起来很方便，但适用的范围有限。 只有预知所有答案的各种可能项，且只有一项被选中时，才能 使用单选按钮 . 【单选按钮】：输入单选按钮的名字，同一组中的单选按钮必 须用同一个名字。 【选定值】：设置选中的单选按钮的值。当用户提交这个表单 时，这个值将会被发送至服务器的应用程序中，同一组中的每 个单选按钮必须设置不同的值。 【初始状态】：设置该单选按钮在第一次载入时的状态，有 【已勾选】与【未选中】两个选项。在一组单选按钮中，只能 将一个单选按钮设置为选中状态。
示。 ❖ 在此对话框中添加或删除列表（或菜单）中的项目。列表中的每
个项目都有一个标签和一个值。若没有指定值，则标签会代替值， 将发送至应用程序进行处理。 ❖ 单击或按钮，可添加或删除列表中的项目；单击或按钮，可将选 中的项目在列表中重新排列。
6.3.4插入复选框
复选框提供了多个选项，以便访问者选择。选 中某个复选框时，在其相应的方框内标有“√”； 去掉“√”，则表示不选中该复选框。打个比方说， 复选框就像标准化考试中的多项选择题，如图6-17 所示。 ❖ 【复选框名称】：设置复选框的名字 ❖ 【选定值】：设置选中的复选框的值。当用户提交 这个表单时，这个值将会被发送至服务器端的应用 程序中。 ❖ 【初始状态】：设置该复选框在第一次显示时的状 态，有【已勾选】与【未选中】两个选项。来自6.3.3 添加列表/菜单
❖ 【列表/菜单】：设置列表或菜单的名字。 ❖ 【类型】：设置插入的是列表还是菜单。对于列表，可以在【高
度】文本框中设置其高度（即列表中一次可以显示的项目数 ❖ 量）；如果选中【允许多选】复选框，则可以在列表中一次选中
多个项目。 ❖ 【初始化时选定】：默认选中的列表项或菜单项。 ❖ 【列表值】：单击该按钮，打开【列表值】对话框，如图6-16所
6.3.1 插入文本字段和文本区域
文本字段和文本区域如图6-7所示，用来输入文本，如姓名、 密码等内容。 ❖ 【文本域】：给文本域分配一个名字。每一个文本域必须对应 不同的名字。 ❖ 【字符宽度】：设置文本域内可以显示字符的最大数目。这个 值可以小于【最多字符数】文本框的值 ❖ 【最多字符数】：设置单行文本域内一行所能显示的最多字符 数目或多行文本域所能显示的最大行数。 ❖ 【初始值】：设置文本域第一次显示时的文字。 ❖ 【类型】：设置文本域为单行文本域、多行文本域或密码文本 域。 ❖ 【单行】：在代码中加入TYPE属性为TEXT的INPUT标记。 ❖ 【多行】：在代码中加入TEXTAREA标记。 ❖ 【密码】：在代码中加入TYPE属性为PASSWORD的IUPUT 标记。
6.1 表单插入面板
❖ （列表/菜单）：可以在网页中以列表的形式为用户提供一 系列的预设选择项。
❖ （跳转菜单）：提供一个包含跳转动作的菜单列表。 ❖ （图象域）：可用于替换表单中的标准按钮对象。 ❖ （文件域）：在网页中建立一个文件地址的输入选择栏。 ❖ （按钮）：用于触发服务器脚本处理程序的工具。 ❖ （标签）：当用户单击该按钮时，文档窗口则会显示为文档 ❖ 和代码同进显示模式，并在源代码中添加<label>标签和 ❖ </label>标签，在这两个标签之间用户可以输入相应的代码。 ❖ （字段集）：用于让用户在对话框中输入代码，然后系统自 ❖ 动将这些代码加入到表单源代码中。
6.3.5 插入文件地址域
文件地址域能够在网页中建立一个文件地址的输入选择 栏。Dreamweaver MX提供了直接在文档中插入文件地址 域的功能。文件地址域如图6-19所示，包括了一个文本字段 和一个【浏览】按钮，该域用来选择本地文件。在浏览器中 单击【浏览】按钮，可以打开【打开】对话框，在目录列表 中可以选择需要的文件。
6.3.2 插入单选按钮
相应的HTML基本语法为：
6.3.3 添加列表/菜单
菜单单击它右侧的按钮时，将弹出一个 下拉列表，可以在弹出的列表中选择任一选 项，如图6-12所示。列表与菜单的不同点在 于它始终显示了一个或多个选项，如图6-13 所示，它要比菜单直观一些，但占用的空间 要大于菜单。它就像是单选按钮与菜单的折 衷方案。
❖ 【文件域名称】：设置文件域的名字。每一个文件域必须对 应不同的名字。
❖ 【字符宽度】：设置文件域内可以显示的最大字符数目。这 个值可以小于【最多字符数】文本框中设置的值。
❖ 【最多字符数】：设置文件域一行内所能输入的最大字符数 目。可以使用这个属性限制文件域的长度。
6.3.6 插入按钮对象
表单中的按钮对象是用于触发服务器脚本处理程序的工 具。只有通过按钮的触发，才能把用户填的信息传送到服务 器端去。常见的按钮有提交按钮和重置。提交按钮用来发送 表单中填写的数据；重置按钮用来清除表单中填写的数据。
第6章 表单的使用
第6章 表单的使用
学习目标： 通过这章的学习，可以应用表单收集来自
用户的信息，包括网上调查、网上订单和建 立搜索界面等等。主要内容包括表单和表单 对象概念、创建表单和添加表单对象。
第6章 表单的使用
简单地说，表单就是用户可以在网页中填写信息的 表格，其作用是接收访问者信息并将提交给Web服务器 上特定的程序进行处理。表单是收集访问者反馈信息的 有效方式，是网站与浏览者实现互动的重要手段。在网 络中应用非常广泛。目前大多数的网站，尤其是专业型 的网站，都需要与访问者进行动态的交流。要实现与访 问者的交互，表单是必不可少的板块。例如，在线申请、 在线购物和在线调查问卷等。表单架设了网站和访问者 之间进行沟通的桥梁。这些过程就是需要填写一系列表 单，并将其发送到网站的后台服务器，交由服务器的脚 本或应用程序来处理。