当前位置:
文档之家› 网页设计与制作第6章 表单的使用
网页设计与制作第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服务器 上特定的程序进行处理。表单是收集访问者反馈信息的 有效方式,是网站与浏览者实现互动的重要手段。在网 络中应用非常广泛。目前大多数的网站,尤其是专业型 的网站,都需要与访问者进行动态的交流。要实现与访 问者的交互,表单是必不可少的板块。例如,在线申请、 在线购物和在线调查问卷等。表单架设了网站和访问者 之间进行沟通的桥梁。这些过程就是需要填写一系列表 单,并将其发送到网站的后台服务器,交由服务器的脚 本或应用程序来处理。