html表单字段,HTML的表单元素

表单

表单控件 ：

method - 提交方式

action - url地址

文本

密码

空按钮

提交

重置

复选按钮

单选

隐藏

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

下拉选项1

下拉选项2

表单多行文本域

语法:

说明:

多行文本。rows属性和cols属性用来设置文本输入窗口的高度和宽度，单位是字符。

阻止浏览器对窗口的拖动设置:{resize:none;}(css属性)

表单字段集

语法:

说明:

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

字段级标题

语法:

说明:

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

提示信息标签

语法:

说明:

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

上传文件框

语法:

说明:

type属性值新增的类型有：file文件类型，可进行文件的选择

表格

基本结构

列标题

语法：

说明：

th标记表示表格内的表头单元格,是单元格标题；

表格标题

语法：

caption-side:top/right/bottom/left

说明：

定义表格的caption对象放于表格的哪个位置，与caption对象一起使用；

top为默认值；

left,right位置只有火狐识别，

top,bottom IE6以上版本支持，IE6以下版本不支持其它属性值，只识别top;

数据行分组

语法

表头

表体表尾

提示

在默认情况下这些元素不会影响到表格的布局。不过，可以使用 CSS 使这些元素改变表格的外观。

详细描述： thead、tfoot 以及 tbody 元素使我们有能力对表格中的行进行分组。

当创建某个表格时，也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。

数据列分组

语法

双标签单标签

说明：

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

说明:

自动表格布局：列的宽度是由列单元格中没有折行的最宽的内容设定的。

缺点：较慢(因为它需要在确定最终的布局前访问表格中的所有内容)。

优点：灵活 固定表格布局 优点：加快运行的速度,允许浏览器更快的对表格进行布局。 缺点:不太灵活

标签：单元格,表格,元素,表单,语法,HTML,边框,属性

来源： https://www.cnblogs.com/yiniantt/p/14240714.html