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=“垂直对齐” top\bottom\middle
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

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

posted @ 2021-01-06 13:59  一念天堂tt  阅读(175)  评论(0编辑  收藏  举报