表单、表格

表单新增属性

1、表单字段集:

<fieldset></fieldset> 对表单中的元素进行分组

2、字段集标题 fieldset>legend字段集标题(必须作为表单字段集的第一个子元素)[align控制它在fieldset的某一个位置]

3、label提示信息标签

​ [for] 关联到id名所在的表单元素
若用于单选框或多选框,一般都是直接将文字及表单元素包含在label里面。

4、type属性值

​ 1.input[type=”file”]上传文件 [multiple多选]

2. input[type="image"] 图像提交按钮 [src图片路径]

表格新增属性

表格布局元素

表格 描述

定义表格

定义表格标题

定义表格列标题

定义表格的行

定义表格单元

定义表格的页眉

定义表格的主体

定义表格的页脚

定义表格列的分组

定义表格列的分组

  1. th标题行单元格,加粗居中

  2. caption 表格标题(作为table的第一个子元素)

  3. 行分组 thead表头 tbody表体 tfoot表尾

    ​ thead>tr>th tbody>tr>td tfoot>tr>td

    书写顺序:thead、tfoot、tbody,这样子保证在数据加载完毕前,先呈现表头跟表尾。
    如果要使用 thead、tfoot 以及 tbody 元素,就必须使用全部的元素。(如果没有表尾,就省略tfoot)
    
  4. 列分组colgroup[span表示每个列分组占据的列数]

table的html属性

1)colspan=”value” 合并列2)rowspan=“value” 合并行

[rules 添加分隔线]:cols列分隔线 rows行分隔线
all 行与行、列与列都存在分隔线 none没有 groups组分隔线
[align] 整个表格在其父元素的水平对齐方式

表格的css属性

1.(table)border-spacing 单元格与单元格之间的间距,不可取负值
2.(table)border-collapse 合并单元格边框
属性值:separate默认分离 collapse合并
3.(td)empty-cells 无内容时单元格边框的设置
属性值:show默认出现 hide隐藏
4.(caption)caption-side:top/right/bottom/left

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

html5新表单

html表单标签

1.拥有输入功能的下拉列表 input[list]+datalist[id]
2.输出output,配合着form[oninput]使用。

表单类型type

1.color 拾色器
2.email 邮箱(正则验证)
3.number 数字
4.tel 电话号码
5.url 网址(正则验证)
6.search 搜索
7.range 特定范围内的数值选择器,min最小值、max最大值、step( 步数 )、value当前值

8.date 用于应该包含日期的输入字段。 日期选择器

表单html属性

1.autofocus 自动聚焦
2.placeholder 占位符
3.required 必填项
4.pattern 正则