第5章 表格与表单（22）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 5 章 表格与表单 1 第 5 章　表格与表单 知识要点 （1）掌握构造表格和设置表格属性 （2）掌握使用CSS设置表格显示效果 （3）理解表单的概念 （4）掌握创建表单的过程 （5）掌握设置表单控件标签的方法 （6）掌握使用CSS对表单进行布局 本章目标 1 第 5 章　表格与表单 （1）使用表格 表格标记符table 表格标题 caption 表格行 tr （table row） 表格数据 td （table data） 表格表头 th （table heading） 1．表格的组成 1 第 5 章　表格与表单 （1）使用表格 在 th 或 td 标记符中使用 rowspan 属性进行行合并 在 th 或 td 标记符中使用 colspan 属性进行列合并 2．表格的构造 1 第 5 章　表格与表单 （1）使用表格 3．表格边框 <table frame=”” rules=”” border=””> CSS border 1 第 5 章　表格与表单 （1）使用表格 4．控制单元格空白 table {border-collapse: separate(默认值); border-spacing: 5px;} table {border-collapse: collapse; } cellspacing属性 td {padding:10px;} cellpadding属性 1 第 5 章　表格与表单 （1）使用表格 5．表格对齐 Part 1 表格的页面对齐<table align> Part 2 表格内容的对齐 水平对齐(align) (CSS: text-align) 垂直对齐(valign) (CSS: vertical-align) 1 第 5 章　表格与表单 （2）使用表单 表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。 例如： 注册表单 登录表单 1．什么是表单 1 第 5 章　表格与表单 （2）使用表单 2．表单的工作原理 1 第 5 章　表格与表单 （2）使用表单 3．form标记符 Part 1 action 属性 服务器端脚本程序（ASP、JSP、PHP、Perl等） mailto:mailbox@mailserver.com Part 2 method属性（get、post） Part 3 enctype属性 form包含所有表单内容： 1 第 5 章　表格与表单 （2）使用表单 5．表单控件的类型 表单控件 文本框 01 复选框 02 单选框 03 按钮 04 选项菜单 05 1 第 5 章　表格与表单 （2）使用表单 6．文本框 <input type="text" name="" value="" size="" maxlength="" placeholder="" /> 单行文本框 <input type="password" name="" value="" size="" maxlength="" placeholder="" /> 口令/密码框 1 第 5 章　表格与表单 （2）使用表单 7．复选框和单选框 <input type=“checkbox” checked=“checked”> 复选框 <input type=“radio” name=“...”checked=“checked”> 单选框 注意：单选框 name 属性相同者为一组！ 1 第 5 章　表格与表单 （2）使用表单 8．设置表单控件的标签 <label for=“controlID”>标签文本</label> <input id=“controlID” /> 1 第 5 章　表格与表单 （2）使用表单 9．按钮 提交按钮 <input type=“submit”> <input type=“image”> 重置按钮 <input type=“reset”> 自定义按钮 <input type=“button”> 1 第 5 章　表格与表单 （2）使用表单 10．选项菜单 PART 1 select标记符 size属性 multiple属性 PART 2 option标记符 1 第 5 章　表格与表单 （2）使用表单 11．表单控件分组 <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 for="doze">发呆</label></p> </fieldset> 1 第 5 章　表格与表单 （2）使用表单 12．表单的显示效果 <input type=“submit” value=“SUBMIT” style=“font-family:Impact, sans-serif; color:white; font-size:14px; background:black” /> <style> input.required{background:darkred; color:white}</style> <input class=“required” type=“text” size=“30” /> 使用 CSS 修饰表单控件 1 第 5 章　表格与表单 （3）综合实例 1 第 5 章　表格与表单 （3）综合实例 1 第 5 章　表格与表单 （3）综合实例 1 第 5 章　表格与表单 THANKS 1 第 5 章　表格与表单 $$