网页设计基础-表格与表单
dreamweaver网页制作 第7章 表单
第7章表单在制作动态网页时，要实现信息交互，常常用到表单。
常见的表单有搜索表单、用户登录注册表单、调查表单、留言簿表单等。
本章节将和大家一起探讨在表单的基本概念和各个元素，以及在Dreamweaver CS4中如何创建表单，并通过实例掌握表单制作的方法。
【学习目标】●了解Web服务器的作用。
●掌握IIS的安装和设置方法。
●掌握更改站点设置的方法。
●知道表单域的含义；熟练掌握各种表单栏目的插入与设置。
●能够综合使用各种表单栏目制作留言簿。
●知道发送表单结果的多种方法。
●掌握验证表单的方法。
7.1 关于表单表单是用来收集站点访问者信息的域集，可实现网页与浏览者间的交互，达到收集浏览者输入信息的目的。
表单是浏览网页的用户与网站管理者进行交互的主要窗口，Web管理者和用户之间可以通过表单进行信息交流。
表单内有多种可以与用户进行交互的表单元素，如文本框、单选框、复选框、提交按钮等元素。
在服务器端，信息处理由CGI （Common Gete Way Interface）、JSP （Javaserver Page）或ASP （Active Server Page）等应用程序处理。
下面是几个表单应用的例子，邮箱用户注册表单如图14.1所示，搜索引擎表单如图14.2所示，在线测试表单如图14.3所示。
7.2 表单元素表单域简单地说，表单就是用户可以在网页中填写信息的表格，其作用是接收用户信息并将其提交给Web服务器上特定的程序进行处理。
表单域，也称表单控件，是表单上的基本组成元素，用户通过表单中的表单域输入信息或选择项目。
在建立表单网页之前，首先就要建立一个表单域。
在7.1节中详细介绍了表单的基本概念，使用Dreamweaver CS4可以创建各种表单元素，如文本框、滚动文本框、单选框、复选框、按钮、下拉菜单等。
在“插入”工具栏的“表单”类别中列出了所有表单元素，如图14.4所示7.2.1 插入表单（1）将光标放在“编辑区”中要插入表单的位置；然后在“插入”工具栏的“表单”类别中，单击“表单”按钮；此时一个红色的虚线框出现在页面中，表示一个空表单，如图14.5所示（2）单击红色虚线，选中表单；在“属性检查器”中，“表单名称”文本框中输入表单名称，以便脚本语言Javascript通过名称对表单进行控制；在“方法”下拉列表框中，选择处理表单数据的传输方法，“Post”方法是在信息正文中发送表单数据，“Get”方法是将值附加到请求该页面的URL中；在“目标”下拉列表框选择服务器返回反馈数据的显示方式，这里选择“_blank”，即在新窗口打开；“MIME类型”下拉列表框指定提交服务器处理数据所使用MIME编码类型。
第6章 表格与表单
总结:间距cellspacing的作用
再设置填充为10
<table border="20" cellspacing="10 " cellpadding="10" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
可见：设置表格边框为0时，会使单元格边框也变为0象素， 而设置表格边框为其他数值时，不会影响单元格边框的宽
再设置背景颜色为玫瑰色
<table border="20" bgcolor="#9933CC" bordercolor="#0099FF"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table>
表格标记
表格是由<table>定义的，行由<tr>定义，单元格 由<td>定义，因此<table>、<tr>、<td>是表格中 三个最基本的标记，必须一起出现。 表格中的单元格<td>能容纳网页中的任何元素，如 图像，文本，列表，表单，表格等。
网页设计与制作使用教程第11章
注：插入单选钮的HTML代码为＜INPUT type="radio" name="..." value="..."＞ 选中该单选钮，在属性面板中进行相应的属性设置
单选按钮：该名称是存储该域的值（选定值）的变量 名，必须在该表单内唯一。要保证数据的准确采集， 单选钮都是以组为单位使用的，在同一组中的单选钮 必须用同一个名称。 选定值：定义该单选钮的值。当选中该单选钮时，此 “选定值”就随表单一起提交，作为该单选钮的当前 值。 初始状态：在浏览器中首次载入该表单时该单选钮的 状态。如果选择“已勾选”，则该单选钮一加载就是 选中状态
注：多个复选框可以共用一个名称，一个复选框名称变量也可以 拥有多个值（多个值在提交时用逗号隔开）。多个复选框可以共用一 个名称时，被选中的多个复选框的值将作为该复选框名称变量的当前 值提交到服务器
（4）单选钮 单选钮允许用户在待选项中选择唯一的答案。 在新建的表单内点击鼠标，确定插入位置，然后点击插入 面板上的按钮 ，插入一单选钮
注意：1. 如果要处理表单数据，我们需要在服务器端（
即放置网页的远程计算机上）编写程序（如ASP程序）， 这部分内容已经超出了本书的范围，有兴趣的同学可以 参考其他的动态网页编程的书籍，后面我们只是对多种 动态网页技术做个简单的介绍。
2．具体使用哪种数据发送方式取决于服务器类型，可以 询问管理员来决定。如果方式任意，默认是Get方法，大 部分HTML设计者偏好使用Post方法。
，所输入的文本被替换为星号或项目符号，以隐藏该文 本，保护这些信息不被看到。
当文本框的类型设置为“多行”时，属性面板发生变 化，即文本框从“文本字段”变为“文本区域” 其属性设置和“单行”类型相似，只是更新了2个属性
第3章 使用表格控制网页布局重点内容： 在页面中使用表格
第3章 使用表格控制网页布局
重点内容：
• 在页面中使用表格
• 设置表格和单元格格式
• 编辑表格和单元格
一、 在页面中使用单元格
1、在页面中插入表格 在Dreamweaver 8中， 用户可以选择“插 入”|“表格”命令，或在 “常用”工具栏中单击 “插入表格”按钮，使用 打开的“表格”对话框来 插入表格。
本章小结：
•掌握在页面中插入表格和添加表格内容的方法。 •掌握更改表格属性的方法。 •熟练进行表格的拆分与合并等操作。
三、编辑表格和单元格
3、拆分与合并单元格 用户可以选择“修改”|“表格”菜单中的子命令来拆分和 合并单元格。若要拆分某个单元格，可先选择需要拆分的单 元格，然后选择“修改”|“表格”|“拆分单元格”命令。 4、剪切、拷贝和粘贴单元格 若用户要剪切或拷贝单元格， 可选择一组连续的且形状为矩形的 单元格，然后选择“编辑”|“剪切” 命令或“编辑”|“拷贝”命令，剪 切或复制单元格。
二、设置表格和单元格格式
3、使用预制表格 在Dreamweaver 8中， 除了可以自行设计表格外， 还可以利用默认的表格格 式。用户可以通过选择 “命令”|“格式化表格” 命令，在打开的的“格式 化表格”对话框中，进行 相应的设置。
三、编辑表格和单元格
1、调整表格大小 用户在选择表格后表格上会出现3个控制点，并会显示表 格的宽度信息。用户可以通过调整这几个控制点来调整表格 的大小。 2、添加及删除行或列 用户可以使用“修改”|“表 格”菜单中的子命令来添加或 删除行和列。要添加行或列， 选择“修改”|“表格”|“插入行 或列”命令，在出现的对话框 中设置插入、行数和位置等参 数。
列表、表格、和表单
列表、表格、和表单列表1.容器⾥⾯装载着结构，样式⼀致的⽂字或图表的⼀种形式叫列表。
2.列表最⼤的特点就是整齐、整洁、有序，跟表格类似。
但列表的⾃由度更⾼。
3.列表分为有序列表、⽆序列表和⾃定义列表。
4.在前端开发中我们最常⽤的就是⽆序列表。
⽆序列表<ul><li></li></ul>有序列表<ol><li></li></ol>⾃定义列表<dl><dt></dt><dd></dd></dl>表格1.创建表格的基本语法<table><tr><td>单元格内的⽂字</td>...</tr>...</table>2.表格的主要⽬的是⽤来显⽰特殊数据的。
3.⼀个完整的表格有表格标签(table)，⾏标签(tr),单元格标签（td）组成，没有列的标签。
4.表格中的属性。
这⾥列举两个⽐较重要的cellspacing、cellpadding。
cellpadding设置单元格内容与单元格边框之间的空⽩间距。
默认为1像素cellspacing设置单元格与单元格边框之间的空⽩间距。
默认为2像素5.合并单元格。
两种⽅式rowspan和colspan，分别是跨⾏合并和跨列合并。
合并单元格的顺序按照先上、后下、先左、后右的顺序。
6.对于⽐较复杂的表格，表格的结构也就相对复杂。
所以⼜将表格分割成三个部分：表格头、正⽂和脚注。
这三个部分分别⽤thead、tbody、tfoot来标注，这样能更好的愤青表格的结构。
7.以上的所有标签都放到table标签中。
表单1.表单的⽬的是为了收集⽤户信息。
2.⼀个完整的表单通常由表单控件、提⽰信息和表单域三个部分组成。
表单控件包含了具体的表单功能项。
单⾏⽂本输⼊框、复选框、提交按钮等提⽰信⼀些说明性的⽂字，提⽰⽤户进⾏填写和操作息表单域容器。
网页设计与制作第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的消息正文中发送表单的值，并发送服务器
第5章 制作表格、表单
• • • • • • • 本章要点 · 创建表格、表单与框架的方法 · 设置表格以及单元格的属性 · 编辑表单以及处理表单 · 设置框架属性并制作框架网页 本章主要介绍了网页页面布局工具――表格和框架，以及作为收集信息使用的表单。 表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确 地定位文本、图像及其他网页中的元素是网页布局排版不可缺少的工具。 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，被广泛用于各种信息的 搜集和反馈。 框架网页是一种网页，当在浏览器中显示时，每个框架都可以显示不同的网页。框架网页本 身并不包括可见内容，它只是一个容器，用于指定要在框架中显示的其他网页以及显示方式。 5.1 表格 表格是网页中一种用途非常广泛的工具，它不仅可以有序地排列数据，还表现在它可以精确 地定位文本、图像及其他网页中的元素，这在网页版面布局方面是很重要的，所以表格是网 页布局排版不可缺少的工具。作为一个网页设计人员，表格运用得熟练与否直接影响作品外 观的好坏，这也是划分专业制作人士与业余爱好者的一种客观标准。 5.1.1表格的新建和编辑 1.创建新表格 将光标移到要插入表格的位置，然后可以通过下列四种方式中的任意一种，均可以弹出插入 表格对话框如图5-1所示：
• •
(3）如果想在现有的表格中添加多行或多列，操作是： 首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择 “表格→插入行或列”命令，弹出 “插入行或列”对话框。在图5-5所示对话框中进行相关的 设置。
• • • • • • • •
• 图5-5插入行或列对话框 (4）删除整行／整列，可以采用下列办法之一： • 先选择欲删除的整行或整列，直接按Del键，即可删除。 • 先将光标移到要删除的行或列中，选择“修改→表格→删除行”或“删除列”命令。 • 将光标移到要删除的行或列中，单击鼠标右键，在弹出的快捷菜单中选择“表格→删除行” 或“删除列”命令。 5.1.3设置表格和单元格属性 1.编辑表格 (1）设置表格高度 在创建表格时，可以通过表格对话框来设置表格的宽度，但无法设置表格的高度，如果要设 置表格的高度，则必须通过表格属性面板来确定。
第6章 表格与表单
注意: cellpadding类似于盒子模型的内边距padding，指的是单元格内部的距离 ，cellspacing则指的是外部单元格与单元格之间的距离。可以结合盒子 模型的内外边距理解cellpadding与cellspacing的不同。
6.1 表格标记
• 6.1.2 <table>标记的属性
4、width与height属性
设置单元格的背景图像 设置单元格横跨的列数（用于合并水平方向 的单元格） 设置单元格竖跨的行数（用于合并竖直方向 的单元格）
rowspan
正整数
6.1 表格标记
• 6.1.4 <td>标记的属性
注意:
让IT教学更简单，让IT学习更有效
1、在<td>标记的属性中，重点掌握colspan和rolspan，其他的属性了解 即可，不建议使用，均可用CSS样式属性替代。 2、当对某一个<td>标记应用width属性设置宽度时，该列中的所有单元 格均会以设置的宽度显示。 3、当对某一个<td>标记应用height属性设置高度时，该行中的所有单元 格均会以设置的高度显示。
6.2 CSS控制表格样式
• 6.2.2 CSS控制单元格边距
让IT教学更简单，让IT学习更有效
– 使用<table>标记的属性美化表格时，可以通过cellpadding和 cellspacing分别控制单元格内容与边框之间的距离以及相邻单元 格边框之间的距离。
注意: 行标记<tr>无内边距属性padding和外边距属性margin，本书不再做 具体的演示，初学者可以自己测试加深理解。
属性名 含义 常用属性值
height
align valign
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
• cellpadding属性
td {padding:10px;}
表格对齐
表格的页面对齐<table align> 表格内容的对齐
– <style> input.required{background:darkred; color:white}</style> <input class=“required” type=“text” size=“30” />
谢谢！
第5章 表格与表单
（3）综合实例
谢谢！
复选框和单选框
• 复选框
– <input type=“checkbox” checked=“checked”>
• 单选框
– <input type=“radio” name=“...” checked=“checked”> – 注意：单选框 name 属性相同者为一组！
设置表单控件的标签
• <label for=“controlID”>标签文本</label> • <input id=“controlID” />
选项菜单
表单控件分组
• <fieldset> • <legend>group1</legend> • <p><input type="radio" id="sleep" name="hobby2"><label
for="sleep">睡觉</label></p> • <p><input type="radio" id="doze" name="hobby2"><label
• ……
表单控件的类型
文本框
• 单行文本框
– <input type="text" name="" value="" size="" maxlength="" placeholder="" />
• 口令/密码框
– <input type="password" name="" value="" size="" maxlength="" placeholder="" />
表格的构造
• 在 th 或 td 标记符中使用 rowspan 属性进行行合并 • 在 th 或 td 标记符中使用 colspan 属性进行列合并
表格边框
• <table frame=”” rules=”” border=””> • CSS border
控制单元格空白
• cellspacing属性
按钮
• 提交按钮
– <input type=“submit”> – <input type=“image”>
• 重置按钮
– <input type=“reset”>
• 自定义按钮
– <input type=“button”>
• select标记符
– size属性 – multiple属性
• option标记符
– 注册表单 – 登录表单
表单的工作原理
form标记符
• form包含所有表单内容
– action 属性
• 服务器端脚本程序（ASP、JSP、PHP、Perl等） • mailto:mailbox@
– method属性（get、post） – enctype属性
• 文本框 • 复选框 • 单选框 • 按钮 • 选项菜单
– 水平对齐(align) (CSS: text-align) – 垂直对齐(valign) (CSS: vertical-align)
7/52
谢谢！
第5章 表格与表单
（2）使用表单
什么是表单
• 表单是用于实现网页浏览者与服务器之间信息交互的一种 页面元素，它由表单控件和一般内容组成。 例如：
第5章 表格与表单
（1）使用表格
本章目标
• 掌握构造表格和设置表格属性。 • 掌握使用CSS设置表格显示效果。 • 理解表单的概念。 • 掌握创建表单的过程。 • 掌握设置表单控件标签的方法。 • 掌握使用CSS对表单进行布局。
表格的组成
• 表格标记符table • 表格标题 caption • 表格行 tr （table row） • 表格数据 td （table data） • 表格表头 th （table heading）
for="doze">发呆</label></p> • </fieldset>
表单的显示效果
• 使用 CSS 修饰表单控件
– <input type=“submit” value=“SUBMIT” style=“fontfamily:Impact, sans-serif; color:white; font-size:14px; background:black” />