HTML标签之表格和表单元素

HTML标签之表格和表单元素

1.表格标签

• 表格由<table>标签来定义；
• 每个表格均有若干行（由 <tr> 标签定义）
• 每行被分割为若干单元格（由 <td> 标签定义）
• 字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等

表格Table

• HTML表格表头: 表格的表头使用标签进行定义；大多数浏览器会把表头显示为粗体居中的文本。
• 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）
• 密码字段
• 单选按钮（Radio Buttons）
• 复选框（Checkboxes）
• 提交按钮(Submit Button)
• 重置按钮(Reset Button)
• Button按钮(Button类型)

label标签

• 标签为 input 元素定义标注（标记）
• 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`

4.表格实例

• 可以自己找个表单写一下