表格，表单元素详解

前端开发工程师在整个工作流中所处的位置

• PM、PD - 产品经理 

• UE - 设计UI/用户体验研究 

• RD - 前端开发工程师 

• QA - 质量保障工程师 

• OP - 运维（开发）工程师

1.表格标签

• 表格由<table>标签来定义；

• 每个表格均有若干行（由 <tr> 标签定义）

• 每行被分割为若干单元格（由 <td> 标签定义）

• 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

表格Table

• HTML表格表头: 表格的表头使用<th>标签进行定义；大多数浏览器会把表头显示为粗体居中的文本。

• HTML带有标题的表格: 表格的标题用caption表示

• colspan 属性规定单元格可横跨的列数

• rowspan 属性规定单元格可横跨的行数

• 单元格边距(Cell padding) : cellpadding

• 单元格间距(Cell spacing):  cellspacing

 表格样式重置

• table{ border-collapse：collapse} 单元格间隙合并

• th，td{ padding: 0} 重置单元格默认填充

2.表格属性

table-layout:

• 设置或检索表格的布局算法

• auto： 默认的自动算法。布局将基于各单元格的内容，换言之，可能你给某个单元格定义宽度为100px，但结果可能并不是100px。表格在每一单元格读取计算之后才会显示出来，速度很慢;

• fixed： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。也就是说，内容可能被裁切;

border-collapse：

• 设置或检索表格的行和单元格的边是合并还是独立

• separate： 边框独立

• collapse： 相邻边被合并

• 注意: 只有当表格边框独立(即border-collapse属性等于separate时，border-spacing属性才起作用)

border-spacing：

• 设置或检索当表格边框独立时，行和单元格的边框在横向和纵向上的间距

• 该属性作用等同于标签属性cellspacing(单元格边距)。border-spacing:0等同于cellspacing=”0”

• 只有当表格边框独立（即 border-collapse 属性等于separate时）此属性才起作用。

• 如果提供全部两个length值时，第一个作用于横向间距，第二个作用于纵向间距。

• 如果只提供一个length值时，这个值将作用于横向和纵向上的间距。

caption-side：

• 设置或检索表格的caption对象是在表格的那一边

• top：指定caption在表格上边

• bottom： 指定caption在表格下边

empty-cells:

• 设置或检索当表格的单元格无内容时，是否显示该单元格的边框

• hide:  指定当表格的单元格无内容时，隐藏该单元格的边框

• show: 指定当表格的单元格无内容时，显示该单元格的边框

• IE7及以下浏览器只默认隐藏无内容的单元格边框，要想使其获得与show参数值相同的效果，可以变相给该空单元格加个占位且不可见的元素，例如全角空格或&nbsp等等

2.表单标签

HTML 表单用于搜集不同类型的用户输入;

• 表单是一个包含表单元素的区域。

• 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。

• 表单使用表单标签 <form> 来设置

input标签

input> 标签规定了用户可以在其中输入数据的输入字段。 <input> 元素在 <form> 元素中使用，用来声明允许用户输入数据的 input 控件。

输入类型是由类型属性（type）定义的;

•  文本域（Text Fields）<input type="text">

•  密码字段 <input type="password">

•  单选按钮（Radio Buttons）<input type="radio">

•  复选框（Checkboxes） <input type="checkbox">

•  提交按钮(Submit Button) <input type="submit"> 

•  重置按钮(Reset Button) <input type="reset"> 

•  Button按钮(Button类型) <input type="button"> 

label标签

• <label> 标签为 input 元素定义标注（标记）

•  label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上;-

• <label> 标签的 for 属性应当与相关元素的 id 属性相同; 

提示: for 属性可把 label 绑定到另外一个元素。请把 for 属性的值设置为相关元素的 id 属性的值

select下拉列表

• select 元素定义下拉列表 

• option 元素定义待选择的选项, 列表通常会把首个选项显示为被选选项

textarea文本域

• textarea 元素定义多行输入字段（文本域）; 

• rows 规定文本区域内可见的行数; 

• cols 规定文本区域内可见的宽度;

button可点击按钮

• button 元素定义可点击的按钮

3.表单属性

value属性:

• value属性规定输入字段的初始值

readonly属性：

• readonly 属性规定输入字段为只读（不能修改）

disabled属性:

• disabled 属性规定输入字段是禁用的。 被禁用的元素是不可用和不可点击的。 被禁用的元素不会被提交

size属性:

• size 属性规定输入字段的尺寸（以字符计）

maxlength属性

• maxlength 属性规定输入字段允许的最大长度

autofocus属性

• autofocus是布尔属性。 如果设置，则规定当页面加载时 <input> 元素应该自动获得焦点

placeholder属性

• placeholder 属性规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。 

• 该提示会在用户输入值之前显示在输入字段中。 

• placeholder 属性适用于以下输入类型：text、search、url、tel、email 以及 password'

required属性

• required 属性是布尔属性。 

• 如果设置，则规定在提交表单之前必须填写输入字段。 

• required 属性适用于以下输入类型：text、search、url、tel、email、password、date pickers、number、checkbox、radio、and file