第5章 表格与表单（22）.pptx

第5章表格与表单

知识要点（1）掌握构造表格和设置表格属性（2）掌握使用CSS设置表格显示效果（3）理解表单的概念（4）掌握创建表单的过程（5）掌握设置表单控件标签的方法（6）掌握使用CSS对表单进行布局本章目标

（1）使用表格表格标记符table表格标题caption表格行tr（tablerow）表格数据td（tabledata）表格表头th（tableheading）1．表格的组成

（1）使用表格在th或td标记符中使用rowspan属性进行行合并在th或td标记符中使用colspan属性进行列合并2．表格的构造

（1）使用表格3．表格边框tableframe=””rules=””border=””CSSborder

（1）使用表格4．控制单元格空白table{border-collapse:separate(默认值);border-spacing:5px;}table{border-collapse:collapse;}cellspacing属性td{padding:10px;}cellpadding属性

（1）使用表格5．表格对齐Part1表格的页面对齐tablealignPart2表格内容的对齐水平对齐(align)(CSS:text-align)垂直对齐(valign)(CSS:vertical-align)

（2）使用表单表单是用于实现网页浏览者与服务器之间信息交互的一种页面元素，它由表单控件和一般内容组成。例如：注册表单登录表单1．什么是表单

（2）使用表单2．表单的工作原理

（2）使用表单3．form标记符Part1action属性服务器端脚本程序（ASP、JSP、PHP、Perl等）mailto:mailbox@Part2method属性（get、post）Part3enctype属性form包含所有表单内容：

（2）使用表单5．表单控件的类型表单控件文本框01复选框02单选框03按钮04选项菜单05

（2）使用表单6．文本框inputtype=textname=value=size=maxlength=placeholder=/单行文本框inputtype=passwordname=value=size=maxlength=placeholder=/口令/密码框

（2）使用表单7．复选框和单选框inputtype=“checkbox”checked=“checked”复选框inputtype=“radio”name=“...”checked=“checked”单选框注意：单选框name属性相同者为一组！

（2）使用表单8．设置表单控件的标签labelfor=“controlID”标签文本/labelinputid=“controlID”/

（2）使用表单9．按钮提交按钮inputtype=“submit”inputtype=“image”重置按钮inputtype=“reset”自定义按钮inputtype=“button”

（2）使用表单10．选项菜单PART1select标记符size属性multiple属性PART2option标记符

（2）使用表单11．表单控件分组fieldsetlegendgroup1/legendpinputtype=radioid=sleepname=hobby2labelfor=sleep睡觉/label/ppinputtype=radioid=dozename=hobby2labelfor=doze发呆/label/p/fieldset

（2）使用表单12．表单的显示效果inputtype=“submit”value=“SUBMIT”style=“font-family:Impact,sans-serif;color:white;font-size:14px;background:black”/styleinput.required{background:darkred;color:white}/style

inputclass=“required”type=“text”size=“30”/使用CSS修饰表单控件

（3）综合实例

（3）综合实例

（3）综合实例

THANKS