Web 前端开发案例与实战单元5 表格和表单.pptxVIP

单元5表格和表单知识入门循序渐进5.1表格5.2表单5.3HTML5表单新元素知识拓展

知识入门1.表格2.表单3.表单域

循序渐进知识入门循序渐进5.1表格5.2表单5.3HTML5表单新元素知识拓展

5.1表格5.1.1创建基础表格5.1.2表格的其它标签5.1.3CSS修饰表格5.1.4CSS控制表格内容

5.1.1创建基础表格tabletrthHead1/ththHead2/th/trtrtd第1列第1个单元格/tdtd第1列第2个单元格/td/tr……trtd第2列第1个单元格/tdtd第2列第2个单元格/td/tr…………/table

5.1.2表格的其它标签1.表格标题tablecaption表格的名字/caption…2.拆分表格thead标签用于定义表格的头部，在该标签内必须包含tr标签。tfoot标签用于定义表格页脚，一般用于统计数据。tbody标签用于定义表格的主体部分。

5.1.3CSS修饰表格1.修饰表格的边框boder:border-widthborder-styleborder-color;2.合并表格边框和单元格边框border-collapse:属性值;

5.1.4CSS控制表格内容1.设置单元格的宽度table-layout:属性值;2.设置单元格文本样式CSS中控制文本的属性对其样式进行设置。

【任务5-1】制作校运会积分表【任务描述】（1）制作校运会大学足球联赛表格。（2）设置表格只显示下边框并且不同部分有不同背景色。（3）当鼠标为与对应行时修改对应行的样式。

5.2表单5.2.1创建表单5.2.2input元素5.2.3select元素5.2.4textarea元素5.2.5button元素5.2.6使用CSS修饰表单元素

5.2.1创建表单form表单元素/form

5.2.2input元素inputtype=输入框类型name=值value=值accept=值readonly=值size=值maxlength=值disabled=值src=值/属性值功能text单行的文本框password将文本替换为“*”的文本框checkbox只能做二选一的是或否选择radio从多个选项中确定的一个的文本框submit确定命令文本框hidden设定不可被浏览用户修改的数据image用图片表示的确定符号file设置文件上传button用来配合客户端脚本reset定义重置按钮。重置按钮会清除表单中的所有数据。

5.2.3select元素selectoption选项1/optionoption选项2/option……option选项n/option/select

label属性optgroup标签配合label属性来给选项分类selectoptgrouplabel=分组1option选项1/optionoption选项2/option/optgroup……optgrouplabel=分组noption选项1/optionoption选项2/option/optgroup/select

5.2.4textarea元素textarea文本内容/textarea

5.2.5button元素buttontype=button元素内容/button

5.2.6使用CSS修饰表单元素input元素的type属性设置。input[type=类型值]

【任务5-2】创建学生建议表单【任务描述】（1）添加学生信息以及建议输入框。（2）设置输入框的样式。

5.3HTML5表单新元素5.3.1input元素新增属性和类型5.3.2datalist元素5.3.3keygen元素5.3.4output元素

5.3.1input元素新增属性和类型属性值功能autocompleteon、off规定是否使用输入字段的自动完成功能autofocusautofocus规定输入字段在页面加载时是否获得焦点formformname规定输入字段所属的一个或多个表单formactionURL覆盖表单的action属性formenctypeapplication/x-www-form-urlencoded、multipart/form-data、text/plain覆盖表单的enctype属性formmethodget、post覆盖表单的method属性formnovalidateformnovalidate覆盖表单的novalidate属性，如果使用该属性，则提交表单时不进行验证formtarget_blank、_self、_parent