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.有风险的操作,都应当有的确认提示:比如重置按钮,有可能用户是误点。

posted @ 2020-09-21 12:05  威武的大萝卜  阅读(1001)  评论(0编辑  收藏  举报