表格(table)表单(form)(课堂总结、练习总结)

1.表格标签:

table 表格

thead 表格头

th 元素定义表头

tbody 表格主体

tr 表格行

td 元素定义表格单元

2.colspan  属性规定单元格可横跨的列数。

3.表格样式重置

table{border-collapse:collapse;} 单元格间隙合并

th,td{padding:0;}重置单元格默认填充

4.rowspan  属性规定单元格可横跨的行数。

5.form   表单

action数据提交的地址

method提交类型

GET   POST

所有的表单控件都需要被form包裹

form可以包裹多个表单控件

text 文本框

password 密码

radio 单选

将同类型的radio设置同一个name就能达到互斥效果

checkbox 复选(多选)

submit 提交

reset  重置

button 按钮

file  上传

hidden  隐藏

键值对

name属性,提交数据时显示的字段(参数)

value属性

设置表单控件的值(页面加载就会展示)

提交数据时具体的值

6.abel  标签为 input 元素定义标注

checked  在页面加载时默认选定的 input 元素。

disabled  属性规定应该禁用 input 元素。

7.select/option 下拉选框

对高度的支持不兼容;

所设置的宽度是包含边框的大小

textarea      文本域

各个浏览器下的默认滚动条显示不兼容

今日练习

1.表格练习(图一)

出现问题:表格后两行tr应该和上边的有个空白的距离,没有做出来。

解决办法:明天老师上课讲解,认真听讲。重新再做一遍,巩固一下

表格(table)表单(form)(课堂总结、练习总结)_第1张图片
图一

1.表单练习(图三)

出现问题:整个页面都是迷迷糊糊地打出来的。还是有好多问题,表单应用的不懂得,input里边可以加div吗,或者input外边可以加div吗?等等,还是有点迷迷糊糊地,不敢用表单,不敢下手写代码

解决办法:明天老师上课讲解,认真听讲。重新再做一遍,巩固一下。

表格(table)表单(form)(课堂总结、练习总结)_第2张图片
图三

你可能感兴趣的:(表格(table)表单(form)(课堂总结、练习总结))