H5-表格、表单

一、表格

　　1、表格标签

　　　　a、table　　表格

　　　　b、thead　　表格头

　　　　c、tbody　　表格主体

　　　　d、tr　　表格行

　　　　e、th　　元素定义表头

　　　　f、td　　元素定义表格单元

　　2、表格样式重置

　　　　a、table{border-collapse：collapse；}单元格间隙合并（默认：separate分隔）

　　　　b、th,td{padding：0；}重置单元格默认填充

　　3、单元格合并

　　　　a、colspan属性规定单元格可横跨的列数。

　　　　　　<td colspan="2"></td>

　　　　

　　　　b、a、colspan属性规定单元格可横跨的列数。

　　　　　　<td rowspan="2"></td>

　　　　　　

　　4、纵向合并不要跨主体标签进行合并。比如从thead到tbody；给表格添加背景颜色，优先考虑给tr/td

二、表单

　　1、form　　表单（action=“”　　method=“”　　post   get  delete    put）(<form action="https://www.baidu.com/s">)

　　2、表单元素：<input type="类型" name="" value=""/>

　　　　a、text　　文本框　　　　（outline:none;光标移入效果去掉。）

　　　　b、password　　密码

　　　　c、radio　　单选

　　　　d、checkbox　　复选

　　　　e、submit　　提交

　　　　f、reset　　重置

　　　　g、button　　按钮

　　　　h、image　　图片作为提交按钮<input type="image" src="图片地址" value="后台提交的文字">显示的文字

　　　　i、file　　上传

　　　　j、hidden　　隐藏　　<input type="hidden">(<input type="hidden" name="marriage" value="未婚">)

　　　　k、date　　日期选择框　　（H5新增类型，不兼容）

　　　　l、time　　时间选择框　　（H5新增类型，不兼容）

　　3、IE6下 input 背景图兼容

　　　　input 的背景图片会跟随文字一起被挤走。
      解决办法：不给input加背景，而是用一个额外的标签包含input，然后给这个标签加背景，并将input的背景、边框等设置为none。

　　

　　4、input属性：

　　　　a、label标签为input元素定义标注

　　　　<input type="checkbox" name="" id="a">

　　　　<lable for="a">········</lable>

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

　　　　<input type="checkbox" name=""checked/>

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

　　　　<input type="checkbox" name="" disabled/>

　　5、select/option下拉选框

　　　　对高度的支持不兼容；

　　6、textarea文本域

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

　　　　css3新增resize调整尺寸样式属性；

　　7、outline轮廓线；

　　　　A标签轮廓线去除方法：

　　　　　　a、<a herf="#" onfocus="this.blur();">······</a>

　　　　　　b、<a herf="#"hidefocus>····</a>

　　8、表单提交数据的方式：method

　　　　a、.get    默认值
    　　　　通过地址栏讲师局传输给后端服务器
  　　　　get  方式可以提交的最大数据是1024字节。
         　　　　只能提交文本信息

　　　　b、post
  　　　　通过浏览器后台隐藏提交数据给后端服务器
 　　　　post方式本身提交的数据是没有任何限制的，但是会受网络链接超时，或者服务器最大允许提交文件大小的限制
     　　　　可以提交各种类型的数据。

　　9、 表单布局注意事项

　　　　1.不要挑战用户的习惯：比如像注册，重置等按钮，用户已经习惯这些按钮的顺序和位置，我们在开发过程中，不要轻易改变这些按钮的顺序和位置。
　　　　2.有风险的操作，都应当有的确认提示：比如重置按钮，有可能用户是误点。