Dreamweaver网页设计制作表单页面.ppt
- 格式：ppt
- 大小：1.79 MB
- 文档页数：38
下载文档原格式
合集下载
dreamweaver cs6网页设计资料 项目八 使用表单-PPT精选文档-PPT精选文档
（12）菜单项设置完成后，回到属性面板中，在“初始化时选定” 列表中选择“请选择”字样，这样，在浏览器中默认显示“请选择”，如 图所示。
单击“插入”面板上“表单”分类中的 按钮，在第11行的“教育水平” 后面的单元格中插入下拉菜单，单击属性面板上的“列表值”按钮，打开 “列表值”对话框，在“项目标签”栏中输入“小学”、“大学”、“博 士”等项目，在“值”栏中输入对应的值。 单击“确定”按钮，回到属性面板，在“初始化时选定”列表中选择“请 选择”菜单项，在浏览器中默认显示“请选择”。
（1）在 Dreamweaver 中新建一个空白文档，将页面标题设为 “我的搜索引擎”。在文档中输入“搜索引擎”4字，字体设为“隶书”， 字号设为 36像素，居中，然后将其保存为 search.htm。
（2）添加一个表单。连续回车两次，在光标所在处，选择“插 入”|“表单”|“表单”命令，或选择插入栏上的“表单”类别，然后单 击“表单”按钮 ，在页面中插入表单，光标位置会出现一个红色虚线框。 将光标定位在红色虚线框内，输入文本“关键字：”，字号大小设置为 18像素，如图所示。
（7）在第6行“出生日期”右侧的单元格中插入如图所示的域。
其中“年”是一个单行文本域，设置其“字符宽度”为5，“最多字符数” 为4，初始值为“20”，如图所示。
（8）单击“插入”面板上“表单”分类中的 按钮，在“月”前 面插入菜单，单击属性面板上的“列表值”按钮，打开“列表值”对话框， 在“项目标签”栏中输入01~12月份，在“值”栏中输入相应的值，如图 所示。
可以单击“插入”面板上“表单”分类中的 按钮直接插入两个 普通按钮，如图所示。
（15）至此，表单大体上完成了，最后别忘了给表单添加处理脚 本或程序。 方法是：点击文档窗口下面标签栏中的<form>标签，选择表单，打开表单 属性面板，在“动作”域中指定处理程序“form.asp”（假设该文件已创 建）；在“方法”下拉菜单中选择“GET”；在“编辑类型”下拉菜单中 选择“multipart/form-data”。如图所示。
DW网页设计--表格 ppt课件
ppt课件
19
8.2.6 设置表格的列
• 虽然HTML页面中表格是按照一行一行这样的概念建立起 来的，但是可以使用<colgroup>定义表格列的分组。这个 标签常和其他2个标签配合用，一个是<col>标签，一个是 <span>标签。<col>标签表示为表格中一个或多个列定义 属性值，是仅包含属性的空元素，只能在表格或colgroup 中使用此元素。
ppt课件
15
8.2.3 合并单元格
• 合并同行单元格使用colsplan属性。在需要修改的那一行 中，先删除多余的单元格，这是重要的一步，如果删错了 单元格，很可能最后呈现的表格会面目全非。这之后再定 义合并的单元格。合并同列的单元格使用rowspan属性， 这里介绍一种合并单元格的方法。
ppt课件
ppt课件
9
8.2.1 制作普通表格
• <table> • <tr> • <th>Head1</th> • <th>HEAD1</th> • </tr> • <tr> • <th>Head2</th> • <td>row 1, cell 2</td> • </tr> • <tr> • <th>Head3</th> • <td>row23, cell 2</td> • </tr> • </table>
第8章 表格
• 没有CSS之前，表格是最流行的布局页面的方式。它表示 一种布局页面的方法，而不仅仅只是指单元格组成的表格， 不过那已经是很久以前的事情了。现在谈论Web设计的时 候，再说到“表格”，那么它就是一个普通的由单元格组 成的表格。
DreamweaverCS5网页制作第3章 使用表格布局页面PPT课件
3.1 表格的建立和编辑
3.1.4 实战演练：网站“行星大观”页眉导航部分制作
操作步骤： 6）光标移到第2行第1个单元格，在属性面板中设单元格的“宽”为270，“高”为24。鼠标 选中该行其它所有单元格，在属性面板中设单元格设为“宽”为100，水平、垂直方向均为 居中对齐。输入对应文字，如图所示。
（3）选取行或列 从一个单元格开始，拖动鼠标选中整行和整列的单元格，单元 格所在的行或列即被选中。或将鼠标停留在一行的左边框或一列的上边框，当选择行 或列的图标出现时，单击鼠标即可选择行或列。
3.1 表格的建立和编辑
3. 设定表格和单元格属性 （1）表格属性
当选中整个表格时，属性面板会自动变成表格的设置面板。可以通过这个面板 修改表格的行数、列数、大小等属性。表格的属性面板如下图所示。其中行、列、 宽、高、填充（即单元格边距）、间距、边框在创建表格时已经介绍过。
3.1 表格的建立和编辑
2. 选取表格元素 （1）选取整个表格 将鼠标指针移动到表格的边框线上单击鼠标左键选择整个表
格。或光标放在表格中时，点击菜单“修改”→“表格”→“选择表格”命令。也可以 将光标放在单元格中，在文档窗口的左下角的标签选择器中选择“Table”标签，选取 整个表格。
（2）选取单元格 将鼠标指针移动到某个单元格上，按住Ctrl键不放，再单击， 就可以选中这个单元格。按住Ctrl键，再逐个单击要选取的单元格，就可以选中不连 续的多个单元格。光标移到某个单元格中，按住Shift键鼠标点击另外一个单元格，则 这两个单元格之间的所有单元格将被选中，形成一个连续矩形区域。也可以通过鼠标 拖拽的方法可以选取连续的一片单元格。
3.1 表格的建立和编辑
3.1.1 案例制作：2006世界杯E组对阵表
网页设计第9章Dreamweaver的表格和网页版面设计PPT课件
9
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
9.1 网页中的表格
9.1.4.5 调整表格大小和外观 ▪ 调整表格宽度或高度：选择表格，拖动选择框右边
或底边的控制点。 ▪ 同时调整表格的高度和宽度：选择表格拖动选择框
右下角的控制点。 ▪ 若要精确指定表格大小：选定表格，在属性检查器
的“宽”和“高”文本框输入数值，在其后的下拉 列表框选择值的单位。 ▪ 在表格的属性检查器中可以设置表格的背景颜色、 背景图像、边框颜色等等属性。
进入布局模式。如图。 ▪ 在布局模式里，“插入”栏的“布局”中有两个可
用的按钮,它们是“布局表格”按钮和“绘制布局单 元格”按钮。此时，标准模式下的“表格”按钮和 “绘制层”按钮均呈不可用状态。（在标准模式下， “布局表格”按钮和“绘制布局单元格”按钮是不 可用的）。
16
9.2 用表格布局网页
17
9.2.3 绘制布局表格 ▪ 在布局模式下单击“插入”工具栏“布局”类别中的“布局
表格”按钮，然后将十字形指针移至工作区，按住鼠标左键 拖动，即可绘制出一个布局表格。按住Ctrl键可连续绘制出 多个布局表格。
18
9.2 用表格布局网页
9.2.4 更改布局表格和布局单元格的属性 设置布局表格的属性——使用布局表格的属性检查器。 如图:
dreamweaverdreamweaver的表格和网页版面设计的表格和网页版面设计表格在网页中的作用表格在网页中的作用表格的创建与编辑表格的创建与编辑利用表格对页面进行布局利用表格对页面进行布局利用布局试图对页面进行布局利用布局试图对页面进行布局dreamweaverdreamweaver中框架的创建方法中框架的创建方法超链接框架目标的指定超链接框架目标的指定框架和框架页的基本操作框架和框架页的基本操作9191网页中的表格网页中的表格表格是现代网页制作的一个重要组成部分
DreamweaverCS5网页制作第4章 表单PPT课件
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 6）在表格的第4行年月日前，分别单击“插入”面板组“表单”选项下的“列表/菜单” 按钮 ，分别选中插入的列表菜单，在属性面板中将“类型”设为“列表”，列表名称分 别是year、month、day，单击属性面板的“列表值”按钮，在“列表值”对话框中添加 “项目标签”和“值”的内容，单击按钮 和按钮 可以添加或删除列表内容，最后 单击“确定”按钮，如图所示。
4.1 案例制作：个人信息调查表
4.1. 案例制作：个人信息调查表
操作步骤： 5）光标移到第3行文字右侧插入单选按钮组按钮 。在弹出的对话框中进行设定，如图46所示。插入的按钮组是垂直排列的。只需将光标移到单选按钮前面向前删除，则单选 按钮则排列成一行。选中单选按钮及文字，在属性面板的“目标规则”中选择“t2”。
4.2 新知解析
9. 文件域属性面板设置项目：
❖ “文件域名称”：指定该文件域对象的名称。 ❖ “字符宽度”：指定希望该域最多可显示的字符数。 ❖ “最多字符数”：指定域中最多可容纳的字符数。如果用户通过浏览来定位文件，则 文件名和路径可超过指定的“最多字符数”的值。但是，如果用户尝试键入文件名和路 径，则文件域仅允许键入“最多字符数”值所指定的字符数。
4.2 新知解析
8. 图像域属性面板设置项目：
❖ “图像区域”：为该按钮指定一个名称。 ❖ “源文件”：指定要为该按钮使用的图像。 ❖ “替代”：用于输入描述性文本，一旦图像在浏览器中载入失败，将显示这些文本。 ❖ “对齐”：设置对象的对齐属性。 ❖ “编辑图像”：启动默认的图像编辑器并打开该图像文件进行编辑。
4.3 实战演练：网络写作注册信息表
4.2 新知解析
dreamweaver cs6网页设计资料 项目九 使用表单 共66页PPT资料
（5）单击“测试”按钮，Dreamweaver 尝试连接到数据库。如果连接失 败，应复查该DSN。如果连接仍失败，应检查 Dreamweaver 用来处理动态 页的文件夹的设置。如果连接成功，会出现如图所示的对话框。
本任务使用 ASP作为服务器技术。根据所选择的服务器技术， Dreamweaver 处理数据库连接的方式也有所不同。在 Dreamweaver 中可供使用的服务器技术包括：ColdFusion、 、ASP、JSP、PHP 等。
创建数据库、源并与ODBC连接
“数据库”面板上的新连接
（1）打开 Access 软件，选择“文件”|“新建”|“空数据库”命令， 打开“文件新建数据库”对话框，在对话框中选择路径和文件名，如图所 示。然后单击“创建”按钮，新建数据库。
（3）根据对话框中的提示，建立站点并选择一种文档类型，在弹出的 “选择文档类型”对话框中选择一种文档类型，如图所示。
（4）单击+ 按钮，从下拉菜单中选择“数据源名称(DSN)”。在“连接名 称”文本框中为连接起一个名字，然后从“数据源名称(DSN)”下拉列表 中选择在前面创建的数据源userinfo，如图所示。如果有必要，在“用户 名”和“密码”文本框中输入用户名和密码。
（1）选择“开始”∣“控制面板”命令，打开“控制面板”对话框，如 图所示。
（2）在“控制面板”对话框中选择“系统和安全”，在打开的对话框中 选择“管理工具”，如图所示。
（3）在打开的对话框中双击“数据源(ODBC)”图标，如图所示。
（4）在打开的“ODBC 数据源管理器”对话框中，单击“系统 DSN”标签， 如图所示。
IIS安装完成后，就可以用其发布 Web应用程序。下面介绍配置 IIS的具体步骤。 （1）选择“开始”| “管理工具”| “Internet信息服务（IIS）管理器” 命令，打开“Internet 信息服务（IIS）管理器”窗口。在该窗口中，依 次展开“本地计算机”| “网站”| “默认网站”节点，如图所示。
dreamweaver表单部分课件
单选按钮的名称
设置在浏览器中首次载 入表单时单选按钮的选 中状态
2.4 复选框
允许在一组选项中选择多个选项,同一组复 选框每一个复选框按钮的名字各不相同. [插入][表单][复选框]
<p>爱好： <input name="favorite" type="checkbox" id="favorite" value="tiyu" /> 体育
[标签]:在该文本框中输入表单对象的前导文字
[样式]:针对代码视图中的<label>标签而言 [位置]:选择将标签文字放置于表单元素的前面或后面
2.1 文本域
文本域接受任何类型的字母、数字和文本。文本可以单行或多
行显示，也可以以密码的方式显示。
[插入][表单][文本域]
<p>用户名 <input type="text" name="username" id="username" /> </p> <p>密码 <input type="password" name="userpassword" id="userpassword" /> </p> <p>个人简介 <textarea name="memo" cols="30" rows="6" id="memo"></textarea> </p>
value="提交" /> <input type="reset" name="reset" id="reset" value=" 重置" />
Dreamweaver_网页设计制作表单页面(PPT38页).pptx
所有的表单元素要放到表单域中 才有效。
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 ➢ Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
➢ Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
第1讲 表单的概念
表单 ➢ 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
➢ 客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 ➢ 服务器端方式：主要优点是能全方
单选 要点：
按钮
1. 插入：“快捷工具栏”表单→“单 选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分单
选框内容。同一组单选按钮应具有相
同的名称。建议采用驼峰式命名方式
。
第2讲 插入各种表单元素
7.2.6 3. “选定值”：单选框选项的值。单 插入 选框所提交的内容为单选框的值，而 单选 不是单选框的名称。
第1讲 表单的概念
工作 表单的工作过程如下：
过程
➢ 访问者在浏览有表单的网页时，可 填写必须的信息，然后单击“提交”
按钮。
➢ 这些信息通过Internet传送到服序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 ➢ Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
➢ Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
第1讲 表单的概念
表单 ➢ 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
➢ 客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 ➢ 服务器端方式：主要优点是能全方
单选 要点：
按钮
1. 插入：“快捷工具栏”表单→“单 选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分单
选框内容。同一组单选按钮应具有相
同的名称。建议采用驼峰式命名方式
。
第2讲 插入各种表单元素
7.2.6 3. “选定值”：单选框选项的值。单 插入 选框所提交的内容为单选框的值，而 单选 不是单选框的名称。
第1讲 表单的概念
工作 表单的工作过程如下：
过程
➢ 访问者在浏览有表单的网页时，可 填写必须的信息，然后单击“提交”
按钮。
➢ 这些信息通过Internet传送到服序对这些数据进
行处理，如果有错误会返回错误信息
，并要求纠正错误。
使用Dreamweaver制作基本网页PPT课件
主要有标题栏、菜单栏、插入栏、文档工具栏、属性面板和浮动面板组等部分组成
网页设计与制作技术
回菜单
视图模式
【设计】视图 : 完全可编辑的可视化 表示形式
所见即所得
网页设计与制作技术
回菜单
视图模式 【代码】视图 :
用于编写和编辑HTML 、 JavaScript等服务器语 言代码
手工编码环境
网页设计与制作技术
网页设计与制作技术
自定义ID ➢ 用户可以自己定义一个ID作为选择符，ID跟独立
的类class选择符的功能一样，语法和用法不同。 ➢ 定义方法：
# ID名{属性1:属性值1；属性2：属性值2…} #yellowone {color:yellow} <p ID=“yellowone”>hello</p>
有序列表的HTML代码如下： <ol>
<li>诺基亚6708手机 </li> <li>备用手写笔 ( 1支) </li> <li>标准电池 (1块) </li> <li>旅行充电器</li> <li>立体声耳机</li> </ol>
无序列表的HTML代码如下： <ul>
<li>录音功能</li> <li >智能语音识别</li> <li >语音命令</li> <li >PC同步功能 </li> <li>红外线和USB传输</li> </ul>
网页设计与制作技术
2.2.4 属性面板 ➢ “属性”面板可以检查和编辑当前选定页面元素的
网页设计与制作技术
回菜单
视图模式
【设计】视图 : 完全可编辑的可视化 表示形式
所见即所得
网页设计与制作技术
回菜单
视图模式 【代码】视图 :
用于编写和编辑HTML 、 JavaScript等服务器语 言代码
手工编码环境
网页设计与制作技术
网页设计与制作技术
自定义ID ➢ 用户可以自己定义一个ID作为选择符，ID跟独立
的类class选择符的功能一样，语法和用法不同。 ➢ 定义方法：
# ID名{属性1:属性值1；属性2：属性值2…} #yellowone {color:yellow} <p ID=“yellowone”>hello</p>
有序列表的HTML代码如下： <ol>
<li>诺基亚6708手机 </li> <li>备用手写笔 ( 1支) </li> <li>标准电池 (1块) </li> <li>旅行充电器</li> <li>立体声耳机</li> </ol>
无序列表的HTML代码如下： <ul>
<li>录音功能</li> <li >智能语音识别</li> <li >语音命令</li> <li >PC同步功能 </li> <li>红外线和USB传输</li> </ul>
网页设计与制作技术
2.2.4 属性面板 ➢ “属性”面板可以检查和编辑当前选定页面元素的
Dreamweaver制作网页.ppt
2 建立HTML页面元素
建立表格（4） 编辑表格单元的属性
设定表格对象为居中对齐
指定表格每行单元的背景颜色
2 建立HTML页面元素
添加表单对象（1）（插入/表单/文本域）
选择类型 指定表单对象的属性
2 建立HTML页面元素
添加表单对象（2）
添加文本域
添加单选按钮
添加密密码域 添加按钮
设定相关对象的属性
4 Dreamweaver浏览网页 单击此按钮，选择此浏览器 最后在浏览器中看到的画面
5小结
HTML中的表格和CSS是界面开发时最核心的东西，我们 可以通过Dreamweaver轻松管理，大多数网站都可以通过 table布局，通过调用外部的CSS来管理自己网站的风格， 但是我们必须熟悉其中的基本元素，如table里的表格对象 <tr><td>和CSS里面的各种属性元素的含义等。我们只有 熟悉了其基本的元素和属性，才能更加轻松灵活的开发我 们的网站
3 用CSS设定HTML的样式
创建自己的CSS（1）
打开右边的快捷工具栏，点开 CSS可以看到类似的目录结构
3 用CSS设定HTML的样式
创建自己的CSS（2）
现有CSS列表，我这里新建 了一个.STYLE2的样式表
.STYLE2下面的详细信息 设定颜色为纯蓝
CSS是设定页面样 式的最好方式，这 里只是介绍通过 DW来创建自己的 CSS样式，CSS的 属性很多，这里只 是简单的介绍一下
这里添加了一个新的 CSS属性，即页面的 背景图片
3 用CSS设定HTML的样式
引用外部的CSS（4） 新的样式表里的样式和原
有的样式一样
在样式表中所添加的背景
引用外部的CSS样式表非 常重要，在开发时，页面 设计者不必顾虑太多页面 的样式，通过引用外部的 样式表，我们可以简化开 发流程，并能够使网站的 风格能够保持一致。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第1讲 表单的概念
表单
交互式表单收集用户信息，将其
的 提交到服务器，从而实现与客户的交
组成 互，一个完整的表单应该包含两个部
分：
在网页中进行描述的表单对象
应用程序，它可以是服务器端的，
也可以是客户端的，用于对客户信息
进行分析处理。
第1讲 表单的概念
浏览器处理表单的过程一般是： 1. 用户在表单中输入数据，然后提交 表单 2. 浏览器根据表单体中的设置处理用 户输入的数据
Dreamweaver 网页设计 第7章 制作表单页面
本章内容
了解表单的工作原理 制作表单 插入各种表单元素
第1讲 表单的概念
表单的作用就是收集用户的信息 用于调查、注册、定购等 在使用搜索引擎查找信息时，查找 的关键字也是通过表单提交到服务器 上
利用表单，可以帮助Internet服务 器从用户处收集信息
练习思考
简答 3. 表单提交有哪两种方法？
答：两种方法是Post和Get。 Post表单信息将以文件的形式提交 Get将浏览者提供的信息附加在URL 地址的后面提交到服务器
练习思考
选择 4. 如果需要获取登录的用户输入的密
码，在表单文本字段的“属性”面板
上应选择（
）。
A
B
C
D
答：B
制作 如右 图所 示的 表单 页面
所有的表单元素要放到表单域中 才有效。
第2讲 插入各种表单元素
7.2.1 动作：用于设置处理表单的服务器端 插入 脚本的文件路径。 表单
第2讲 插入各种表单元素
7.2.1 方法：表单提交的方法 插入 Post 表单信息将以文件的形式提交 表单 ，一般建议使用Post方式提交表单。
Get 将浏览者提供的信息附加在URL 地址的后面提交到服务器，为默认提 交方式，但不能超过8192个字符，且 不具有保密性。
表单 位地处理用户输入的数据，但占用服
数据 务器的资源
处理 的优 缺点
客户端方式：优点是不占用服务器 资源，反馈结果快，但只能对用户输 入的数据进行有限的处理。
第2讲 插入各种表单元素
7.2.1 表单的组成： 插入 一个表单域 表单 若干个表单元素(文本框、单选按钮
、下拉菜单、多选按钮等)
符也会被传出。
第2讲 插入各种表单元素
7.2.5 复选框(checkbox)：可以提供浏览者进 插入 行多项选择的选择框。
复选
框
要点： 1. 插入：“快捷工具栏” →“表单”
→“单选按钮”
2. 名称(name)：在验证用户提交表单
或服务器脚本处理表单时用于区分复
选框内容。同一组复选框应使用统一
的名称。建议采用驼峰式命名方式。
第2讲 插入各种表单元素
7.2.2 要点：
插入 1. 插入：“快捷工具栏” →“表单”
单行 →“文本字段”
文本 域
2. 文本字段接受任何类型单字母、数 字、文本。 3. “表单名”应尽量使用英文，不应
含有空格(建议使用驼峰式的规范命名
方法)。文本域的名称是程序处理时的
依据，因此应尽量与收集内容一致。
域
第2讲 插入各种表单元素
7.2.8 要点： 插入 1. 插入： “快捷工具栏” →“表单 文件 ”→“文件域”
域 2. “文件域名称”：以英文命名，并
于文件域内容相关，建议使用驼峰式 命名方法。 3.“字符宽度”：设定文件域文本框的 宽度，单位是英文字符。 4. “最多字符数”：设定文件域文本 框中所能添加的最多字符数。
第1讲 表单的概念
表单 服务器端处理
的处
若表单指定通过服务器端的脚本
理方 程序进行处理，则该程序处理完毕后
式
将结果反馈给浏览器（即用户看到的 反馈结果）
客户端处理
若表单指定通过客户端（即用户
方）的脚本程序处理，则处理完毕后 也会将结果反馈给用户。
第1讲 表单的概念
两种 服务器端方式：主要优点是能全方
练习思考
简答 1. 简述表单的处理过程。
答：当用户填写了表单并单击“提交 ”按钮后，填写的信息会被发送到服 务器上，服务器端脚本或应用程序对 信息进行处理，并将成功结果反馈浏 览者，或执行某些特定的程序。
练习思考
简答 2. 制作表单页面的第一步是什么？
答：每个表单都是由一个表单域和若 干个表单元素组成的，所有的表单元 素要放到表单域中才会有效，因此， 制作表单页面的第一步是插入表单域 。
/ 单”或“列表”
菜单 3. “列表值”：项目标签是页面上显
示的内容，值是项目传递时的内容。
4. “选定范围”：“列表”可以设置
该参数，勾选“允许多项”以同时选
定多个选项。浏览者按Ctrl或Shift实现
多选.
第2讲 插入各种表单元素
7.2.8 文件域：实现将文件从客户端提交到 插入 服务器(网站)，文件域的外观由一个“ 文件 文本框”和一个“浏览按钮”构成。
完全一致。
第2讲 插入各种表单元素
7.2.4 多行文本域(textarea)：可输入多行文 插入 本的文本域，相当于一个属性为多行 多行 的单行文本域。 文本
域
第2讲 插入各种表单元素
7.2.4 要点：
插入 1. 插入：“快捷工具栏” →“表单”
多行 →“文本区域”
文本 域
2. 基本属性同单行文本框相同（“命 名”、“字符宽度”、“初始值”） 3. “行数(rows)”：文本域的行数。
无：单击无动作，可以通过脚本语言 赋予按钮的新功能。
第2讲 插入各种表单元素
7.2.10
使用默认的按钮形式往往让人觉
插入 得单调。网页可以使用插入图像按钮
图像 功能，创建和网页整体效果相统一的
域 图像提交按钮。
第2讲 插入各种表单元素
7.2.10 要点：
插入 1. 插入： “快捷工具栏” →“表单 图像 ”→“按钮”
第2讲 插入各种表单元素
7.2.9 按钮的作用： 插入 1. 激发提交表单的动作(表单域的动作) 按钮 2. 将表单恢复到初始状态
第2讲 插入各种表单元素
7.2.9 要点： 插入 1. 插入： “快捷工具栏” →“表单 按钮 ”→“按钮”
2. “动作”：设置单击按钮时触发的 动作。
提交表单：将动作提交到表单属性的 “动作”所指定的路径。 重置表单：清楚表单中现有的内容。
例如：txtUsername、txtPassword。
第2讲 插入各种表单元素
7.2.2 3. “字符宽度”：文本框显示在页面
插入 上的长度。长度单位为英文字符数(2
单行 个英文字符＝1个中文字符)。
文本 域
4. “最大字符数”：文本框内所能填 写的最多的字符数。长度单位为英文 字符数。
5. “初始值”：默认状态下填写在文
选项。
菜单：一种最节省空间的罗列选项的 方式，正常状态只能看到一个选项， 单击按钮打开才能看到全部选项。
第2讲 插入各种表单元素
7.2.7 插入 列表
/ 菜单
第2讲 插入各种表单元素
7.2.7 要点：
插入 列表
1. 插入：“快捷工具栏” →“表单” →“列表/菜单” 2. “类型”：在属性中选择使用“菜
本框的文字，即页面载入时显示在文
本框中的内容。
第2讲 插入各种表单元素
7.2.3 要点：
插入 1. 插入：“快捷工具栏” →“表单”
密码 →“文本字段”→类型选择“密码”
域
2. 用于填写秘密等机密内容时使用 3. 密码框中的内容将以特殊字符显示
，默认为“*”或“●”
4. 密码框的属性与单行文本框的属性
框 4. “初始状态”：页面载入时，单选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
7.2.7
列表和菜单可以将多个项目以特
插入 殊的方式罗列在网页上，但又节省了
列表 网页的空间。
/ 菜单
列表：可以显示一定数量的选项，如 果超出了这个数量，会自动出现滚动 条，浏览者可以拖动滚动条来观看各
第2讲 插入各种表单元素
7.2.5 3. “选定值”：复选框选项的值。复 插入 选框所提交的内容为复选框的值，而 复选 不是复选框的名称。
框 4. “初始状态”：页面载入时，复选
框的状态。可通过“已勾选”、“未 选中”来区分。
第2讲 插入各种表单元素
7.2.6 单选按钮：用于在多个选项中选择一
插入 个项目。
第2讲 插入各种表单元素
7.2.4 3. “换行(wrap)”：是否允许文字换
插入 行。
多行 关(off)：不允许使用换行
文本 域
虚拟(virtual)：当文本超过文本框宽度 时，自动换行，但传送数据时不会将 换行符传出。
实体(physical)：当文本超过文本框宽
度时，自动换行，当传送数据时换行
7.2.11 要点：
插入 1.插入： “快捷工具栏” →“表单 跳转 ”→“跳转菜单” 菜单
第2讲 插入各种表单元素
7.2.11 2. “文本”：显示在页面上的选项内
插入 容。 跳转 3. “选择时，转到URL”：选择文本 菜单 时，跳转到的地址。
4. “菜单之后插入前往按钮”：在页 面跳转菜单后插入一个“前往”按钮 ，浏览者选择项目后，需要点击“前 往”按钮进行跳转。
域 2. “替换”：设置替换文本。
当图像无法下载时，图像位置会插入 替换文本；当图像下载完整，鼠标移 至图像上方，替换文字会显示出来， 起到说明作用。
第2讲 插入各种表单元素
7.2.11
跳转菜单是创建链接的一种形式,
插入 但比真正的链接，跳转菜单可以节省