zoukankan      html  css  js  c++  java
  • HTML的表单元素

    表单

    表单控件 :

    method - 提交方式
    action - url地址

    <input type="text" value=""/>		文本
    <input type="password" value=""/>	密码
    <input type="button" value=""/>		空按钮
    <input type="submit" value=""/>		提交
    <input type="reset" value=""/>		重置
    <input type="checkbox" checked="checked" disabled="disabled"/>	复选按钮
    <input type="radio" name="rel"/>	单选
    <input type="hidden" name="rel"/>	隐藏
    

    内联可置换元素 - 下拉菜单

    <select >  
         <option>下拉选项1</option>
         <option>下拉选项2</option>  
    </select>
    

    表单多行文本域

    语法:

    <textarea  name=""  cols=""  rows="" > </textarea>
    

    说明:
    多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度,单位是字符。
    阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)

    表单字段集

    语法:

    <fieldset></fieldset>
    

    说明:
    相当于一个方框,在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。 fieldset元素可以嵌套,在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用;

    字段级标题

    语法:

    <legend align="left/right/center"></legend>
    

    说明:
    legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素

    提示信息标签

    语法:

    <label for="绑定的id名字"></label>
    

    说明:
    label元素用来定义标签,为页面上的其他元素指定提示信息。要将label元素绑定到其他的控件上,可以将label元素的for属性设置为与该控件的id属性值相同。

    上传文件框

    语法:

    <input type="file"/>
    

    说明:
    type属性值新增的类型有:file文件类型,可进行文件的选择

    表格

    基本结构

    <table>
         <tr>
             <td></td> 
         </tr>
    </table>
    

    列标题

    语法

    <th></th>
    

    说明
    th标记表示表格内的表头单元格,是单元格标题;

    表格标题

    语法

    <caption></caption>
    caption-side:top/right/bottom/left
    

    说明
    定义表格的caption对象放于表格的哪个位置,与caption对象一起使用;
    top为默认值;
    left,right位置只有火狐识别,
    top,bottom IE6以上版本支持,IE6以下版本不支持其它属性值,只识别top;

    数据行分组

    语法

    <thead></thead>表头
    <tbody></tbody>表体
    <tfoot></tfoot>表尾
    

    提示
    在默认情况下这些元素不会影响到表格的布局。不过,可以使用 CSS 使这些元素改变表格的外观。
    详细描述: thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。
    当创建某个表格时,也许希望拥有一个标题行,一些带有数据的行,以及位于底部的一个总计行。

    数据列分组

    语法

    <colgroup span="value"></colgroup>双标签
    <col span="value" />单标签
    

    说明
    1.col和colgroup元素会根据从左到右的顺序依次对数据表格进行分组。
    2.span属性显示指定相邻几列组成一组,span属性值默认为1,默认时仅定义一列为一组。
    Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性
    3.可以通过给table添加rules="groups"属性来给分组列添加组的分割线。

    表格设置

    1、cellspacing="单元格与单元格之间的间距"
    2、cellpadding=“单元格与内容之间的距离"
    3、align="表格水平对齐方式" 取值:left、right、center、 valign=“垂直对齐” topottommiddle
    4、合并单元格属性:(td) 合并列: colspan=“所要合并的单元格的列数" 合并行: rowspan=“所要合并单元格的行数”


    css设置

    单元格间距

    语法:

    border-spacing:value
    

    说明:
    单元格间距(该属性必须给table添加)
    表示单元格边框之间的距离
    不可取负值

    合并相邻单元格边框

    语法:

    border-collapse:separate/collapse;
    

    说明:
    作用:

    合并相邻单元格边框 (该属性必须给table添加)
    separate(边框分开)默认值;
    collapse(边框合并)

    无内容时单元格的设置

    语法:

    empty-cells:show/hide;
    

    说明:
    定义当单元格无内容时,是否显示该单元格的边框区域; show:显示 ;hide:隐藏;

    显示单元格行和列的算法(加快运行的速度):

    语法:

    table-layout:auto/fixed
    

    说明:
    自动表格布局:列的宽度是由列单元格中没有折行的最宽的内容设定的。
    缺点:较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。
    优点:灵活 固定表格布局 优点:加快运行的速度,允许浏览器更快的对表格进行布局。 缺点:不太灵活

  • 相关阅读:
    019_Mac实用的图像备份工具
    016_把普通用户免秘钥加入root用户的几种方式
    027_磁盘维护命令du等
    026_lsof命令经验总结
    004_wireshark专题
    029_mount bind挂载
    023_nginx跨域问题
    mysql-5.7 group commit 详解
    二段式提交协议
    mysql-5.7 密码过期详解
  • 原文地址:https://www.cnblogs.com/yiniantt/p/14240714.html
Copyright © 2011-2022 走看看