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 colspan="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  文本框

    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方式本身提交的数据是没有任何限制的,但是会受网络链接超时,或者服务器最大允许提交文件大小的限制
         可以提交各种类型的数据。

时间: 2024-10-10 16:22:41

H5-表格、表单的相关文章

Bootstrap框架(基础篇)之列表,表格,表单

继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇 除了HTML提供的三种基本列表样式: 无序列表 <ul> <li>…</li> </ul> 有序列表 <ol> <li>…</li> </ol> 定义列表 <dl> <dt>…</dt> <dd>…</dd> </dl> Bootst

HTML表格表单综合——用户注册表

今天学习了表格和表单知识,我综合了他们添加了一些拓展知识做了一个用户注册表,以下面代码来整理表格和表单知识: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml&quo

网站前端_Bootstrap.基础入门.0002.排版/列表/表格/表单/按钮/图像?

通用技能: # 文档类型 <!DOCTYPE html> <html lang="zh-cn">     <!-- Html Code --> </html> 说明: 由于BootStrap基于HTML5,所以所有的HTML文件都需要在其顶部引用HTML5的DOCTYPE属性. # 移动先行 <meta name="viewport" content="width=device-width, initi

【2】HTML表格表单

单元格中数据的对齐方式 Align = left Align = center Align = right Valign = top Valign = middle Valign = bottom 合并单元格 水平合并在 或 标记中使用 COLSPAN 属性,可以设置单元格所跨的列数,例如COLSPAN=3表示跨3列. 垂直合并在 或 标记中使用 ROWSPAN 属性,可以设置单元格所跨的行数,例如ROWSPAN=3表示跨3行. 表格总结 表格的基本结构 表格标记table的属性 border/

页面的组成-列表/表格/表单/视频音频

回顾 CSS属性 边框属性 border:border-styleborder-colorborder-width border-left: border-rightborder-bottomborder-top border-style-leftborder-style-rightborder-style-topborder-style-bottom border-*-left/top/right/bottom 内边距 pading / padding-left/right/top/botto

表格 表单总结

HTML表格table <table>标签表示这是一个表格,构成元素有<tr>.<td>.<th> HTML表单 **form** <form>标签表示这是一个表单,它的属性有action. method,action表示提交到的地址, method表示提交的方式,有post和get **input** <input>标签表示输入控件,它的属性有type,type的有: text 表示文本框 radio 表示单选框 checkbox

CSS3-animation,表格表单的格式化

animation 1.与transition一样,animation在IE9之前都不支持,不仅如此,还需要大量的供应商前缀 2.定义关键帧:@内容中需要大量的前缀 @keyframes  fadeIn(animationName) from{ } 50%{ } to{ } /*from起始关键帧,to结束关键帧,也可以用0%,100%分别表示起始与结束*/ oparity的值为0表示不可见,为1的时候表示完全可见 3.在元素中应用: .b{ animation-name:fadeIn: ani

angular js h5关于表单验证的例子

angular js表单验证 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script src="angular.min.js"></script> <link rel="stylesheet" href="

表格表单及样式重置、特性

1.表格 用table标签,标签 table的标签基本特性是 display:table; <thead> 表格头部 <tbody> 表格主体 <tfoot> 表格尾部 <tr>行 <th>表格标题 <td>单元格 一般只用<tbody> colspan 属性规定单元格可横跨的列数 只能放在th,td标签中<th colspan='2'> rowspan 属性规定单元格可横跨的行数 只能放在td标签中<t

DOM针对表格表单以及CSS

1.表格操作(只针对表格) -创建 tableElement.insertRow(position) - 新增一行 rowElement.insertCell(position) - 新增一个单元格 (这里需要注意的是:position从0开始) -删除 tableElement.deleteRow(position) rowElement.deleteCell(position) -访问 tableElement.rows - 表格中的行 rowElement.cells - 行中的列2.表单