HTML的表格和表单.ppt

HTML的表格和表单 用 HTML 代码创建表格 创建表单 使用框架 表格 创建表格 表格的标题 表格的对齐方式 合并单元格(跨列) 合并单元格(跨行) 表格的背景色和尺寸设置 FORM action=“?” method=“?” 文本框 INPUT type＝“text” name＝“？” value＝“？” maxlength=“？ 密码框 INPUT type＝“password” name＝“？” value＝“” 文本域 textarea name=“？” clos=“？” rows=“？” /textarea 单选按钮INPUT TYPE=radio NAME=”？” VALUE=”？” 男性 复选框input type=Checkbox name=？ value=？ 酒井法子 总结 4-3 SELECT NAME =？ OPTION 选项1/OPTION OPTION选项2/OPTION OPTION.../OPTION /SELECT INPUT type=Submit value=提交 name=? INPUT type=reset value=重置 name=? / FORM 表单输入元素-1 HTML输入元素-5 框架 编写框架 FRAMESET标记有两个属性ROWS、COLS，分别用来说明将把浏览器窗口分成小窗口的数量和各个小窗口的大小。 COLS属性：纵向将窗口划分为若干窗框。 ROWS属性：横向将窗口划分为若干窗框。 例如： COLS=“ 120,* ”垂直切割页面,一次切成左右两个画面,左边那一栏强制定为 120点,右边则随视窗大小而变 .也可用百分比，也可切成两个以上的画面。 SRC=“a.html”设定此框架中要显示的网页路径，每个框架一定要对应一个网页 例如： ROWS=“ 120,* ”就是横向切割画面，也就是将画面上下分开，切法同COLS。 框架文件 提问：根据上述效果图，先抽选一名学员在白板上画出在网页中的显示效果， 其余学员在纸上上书写答案。教员巡视学员基本做完 ，集中评讲 ，给出如图所示的效果图。给予学员鼓励。 参见：TG5-Source文件夹中的“代码阅读”用例 提问： 1.我们前面学习过表单，请问表单有什么用途？ 引导回答： 1)在用户注册某种服务或活动时收集姓名、地址、电话号码、电子邮件地址和其他信息 2)在用户购买商品时收集信息 3)收集关于网站的反馈信息 2.表单使用哪个标签？有哪些属性？ 引导：学员可能回答不全，引出表单的属性讲解。 强调表格的几个重要组成部分： 1）行 2）列 3）单元格 4）列标题（一般位于第一行或第一列，粗体显示），可选 5）表格标题，可选 讲解要点： 1）表格一般都需要标题，说明表格的内容主题。表格的标题由标签CAPTION设置 设置标题位于表格上方： 　　CAPTION align=top 表格标题 /CAPTION 设置标题位于表格下方： 　　CAPTION align=bottom表格标题/CAPTION 2）同理，表格的第一行或第一列，一般需要加粗突出显示，作为行或列的标题。 设置行或列的标题： TH行或列标题/TH 演示：TG5-Source文件夹中的“表格标题”用例。 讲解要点： 1）为了美观大方，表格中的数据一般需要设置对齐方式。 2）设置表格、行或列的对齐方式，修改align属性为right（右对齐），center（居中）或left（左对齐）就可以了，默认为“左对齐”。 本例效果：设置表格居中显示，姓名列“左对齐”，性别列居中，分数列“右对齐”。 演示：TG5-Source文件夹中的“表格对齐”用例。 学习目标 行 列 列标题 在 HTML 文档中，广泛使用表格来存放网页上的文本和图像 单元格 表格标题 HTML HEAD TITLE使用表格/TITLE /HEAD BODY TABLE BORDER = 2 TR TD姓名/TD TD性别/TD TD分数/TD /TR TR TDRobert/TD TDM/TD TD80/TD /TR ....... /TABLE /BODY /HTML TABLE代表表格的开始，border=2表示边框尺寸为2 TR表示行，这是表格的第一行，有三列数据，TD代表列 表格的第二行，有三列数据 表格的第三行，也有三列数据 BODY TABLE BORDER = 2 CAPTION align=top学员档案信息/CAPTION TR TH姓名/TH TH性别