HTML表格、表单

表格

在现实生活中经常需要表格来表示一些格式化数据网页中我们也需要使用表格，我们通过table标签来创建一个表格，表格也可用于页面布局。

表格的定义

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

表格基本结构

在 table 中使用 tr 表示表格中的一行 有几个 tr 就有几行，tr 中使用 th 表示头部单元格， td 表示一个单元格，有几个 td 就有几个单元格。一个表格中也可以加上 thead 和 tbody 标签，th标签会自动将内容字体加黑变粗。

    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>21</td>
            </tr>
        </tbody>
    </table>

如果表格中没有使用tbody而是直接使用tr那么浏览器会自动生成一个tbody，并且将tr全部收到tbody，tr不是table的子元素。

表格常用属性

width：表格的宽度
height：表格的高度
text-align：文本水平方向对齐方式
vertical-align:垂直方向对齐方式
border：边框线宽度 边框线体 边框线颜色 
border-spacing：指定边框之间的距离
border-collapse:collapse 设置边框的合计
cellspacing：单元格之间的间距
cellpadding：内容和单元格边框间距离
background-color：表格颜色

td th换行属性

colspan:夸列(左右关系的合并)
rowspan:跨行(上下关系的合并)

表单

在现实生活中表单用于提交数据，在网页中也可使用表单，网页中的表单用于将本地的数据提交给远程的服务器使用form标签创建表单，用于收集用户信息，实现用户和网页之间的对话。

表单的结构

• 提示信息：说明性文字，提示用户如何进行操作
• 表单控件：是具体的功能项
• 表单域：包含了提示信息和表单控件

<form action="服务器的地址" method="提交方式" name="表单名称">
	      提示信息、表单控件
</form>

action：指定接收表单数据的服务器的地址
method：表单数据的提交方式，常用的方式是get或post
name：表单名称，用于多个表单的区分

提示信息：<label> 提示信息 </label>

表单控件

input控件

单行文本框：<input type="text" name="名称" placeholder="提示信息" maxlength="最大输入长度" value="值"/>
密码框：<input type="password" name="名称" placeholder="提示信息" maxlength="最大输入长度" value="值"/>
单选按钮：<input type="radio" value="值" name="名称" checked/>选项内容
多选按钮：<input type="checkbox" name="名称" value="值">选项内容
日期、时间输入框：<input type="date" name="名称" >
数字输入框：<input type="number" name="名称" value="值" max="最大值" min="最小值">
颜色选择框：<input type="color" name="名称">
图像控件：<input type="image" name="名称">
文件控件：<input type="file" name="名称">
隐藏控件：在页面上不显示，但是可以向服务器传递值
<input type="hidden" name="名称" value="值">

按钮

按钮：		 
(a)提交按钮：单击该按钮后，会将表单信息(表单域中所有控件的值)提交给服务器(action指定的服务器)
<input type="submit" value="按钮上的文字">
(b)重置按钮：单击该按钮后，会将表单信息(表单域中所有控件的值)回复到初始状态
<input type="reset" value="按钮上的文字">
(c)普通按钮：单击该按钮时没有任何操作
<input type="button" value="按钮上的文字">

按钮也可以通过设置button标签实现

            <button type="submit">注册</button>
            <button type="button">按钮</button>
            <button type="reset">重置</button>

下拉层可以设置select标签实现

<select name="名称">
            <option value="i">选项一</option>
            <option value="ii" selected>选项二</option>
            <option value="iii">选项三</option>
        </select>

textarea控件

<textarea name="名称" cols="列数" rows="行数"></textarea>

表单常用属性

• autocomplete关闭自动补全
• readonly将表单设置为只读 只读数据会提交
• disabled将表单设置为禁用 数据不会提交
• autofocus设置表单项自动获取焦点，光标自动会在设置的那个框里