一文详细了解表格与表单标签

表格table标签

1.什么是表格

表格不是用来布局页面的，表格主要用于显示、展示数据。表格的表现形式为横行纵列多行多列为表格。如:

姓名	年龄	性别
张三	22	女
李四	23	男
王五	24	女

2.表格的基本语法

• table：定义一个表格
• tr：定义表格行，必须嵌套在 <table> </table> 标签中
• td：定义表格单元，必须嵌套在<tr></tr>标签中
  • 字母 td 指表格数据（table data），即数据单元格的内容

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

3.表头单元格标签

表头单元格也是单元格, 常用于表格第一行, 突出重要性, 表头单元格里面的文字会加粗居中显示。设置表头非常简单，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

4.表格属性

属性	值	描述
align	left、center、right	不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolor	rgb(x,x,x)、#xxxxxx 、colorname	不赞成使用。请使用样式代替。规定表格的背景颜色。
border	px	规定表格边框的宽度。默认为 border=“0” 不赞成使用
cellpadding	px、%	规定单元边沿与其内容之间的空白。
cellspacing	px、%	规定单元格之间的空白。
width	px、%	规定表格的宽度。

表格标签这部分属性我们实际开发常用的是border与cellspacing，并且后面通过 CSS 来设置。

5.表格结构标签

因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分。

<thead>标签表格的头部区域、<tbody>标签表格的主体区域、<tfoot>标签表格的尾部区域。这样可以更好的分清表格结构。

• <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
• <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
• <tfoot></tfoot>：用于定义表格的尾部。<tfoot> 内部必须拥有 <tr> 标签。 一般是位于最后一行。
• 以上标签都是放在 <table></table> 标签中。

6.合并单元格

• 跨行合并：rowspan=“合并单元格的个数”。最上侧写合并代码(即在需要多行合并的第一行上的元素写该属性)。并且要注意删除其他未加该属性但被合并后的剩余的td
• 跨列合并：colspan=“合并单元格的个数”。最上侧写合并代码。注意事项与跨行合并相同

示例:

tips:总结了一个步骤

1. 先确定是跨行还是跨列合并。
2. 找到目标单元格，写上合并方式 = 合并的单元格数量。比如：<td colspan="2"></td>。
3. 删除多余的单元格。

公式：合并单元格之前的数量-1 = 需要删除的单元格数量

7.表格标题标签:

caption 标签必须紧随 table 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。

from表单标签

1.什么是表单

表单就是用来收集用户的信息。

在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。

2.表单组成

在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和提示信息3个部分构成。

3.表单域

在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。<form> 会把它范围内的表单元素信息提交给服务器。

<form action="url地址" method="提交方式" name="表单域名称">
 各种表单元素控件
</form>

常用属性：

1. action：在表单收集到信息后，需要将信息传递给服务器进行处理，action 属性用于指定接收并处理表单数据的服务器程序的 url 地址。
2. method：用于设置表单数据的提交方式，其取值为 get 或 post。
3. name：
   • form 标签的 name 属性可以用来为表单设置一个独一无二的标识符，以便使用 JS 操作表单时可以区分各个表单。
   • 提交表单时 form 标签的 name 属性的值不会被发送给服务器，所以该属性的用处仅限于 JS（DOM） 中。

4.表单控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

4.1 input输入表单元素

<input> 标签用于收集用户信息。格式为:

<input type="属性值" />

其中 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
type 属性的属性值及其描述如下：

常用类型属性	描述	补充
text	单行文本输入框	明文
password	密码输入框	密文
radio	单选按钮	单选
file	输入字段和 "浏览"按钮，供文件上传。	multiple 属性可以开启多文件选择
checkbox	复选框	多选
submit	提交按钮	提交按钮会把表单数据发送到服务器
button	普通按钮	多数情况下，用于通过 js 联动
reset	重置按钮	重置按钮会清除表单中的所有数据
image	图像形式的提交按钮。	自定义按钮 用的少
hidden	隐藏的输入文本	输入不显示 防止窥屏

除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：

常用属性	属性值	描述
type	见下表	控制 input 的类型
name	自定义	控件名称 作为提交数据时的 key。 表单中的 input 标签必须设置 name 属性， 否则在提交表单时，用户在其中输入的数据不会被发送给服务器
value	自定义或输入	input 控件中的默认或用户输入的文本
size	正整数	input 在页面中的显示宽度
checked	checked	定义选择控件默认被选中的项
maxlength	正整数	规定控件容许输入的最大字符数
placeholder	文本	用户输入提示文本
multiple	multiple	文件上传可选多文件

其中：

• name 和value 是每个表单元素都有的属性值,主要给后台人员使用。
• name 表单元素的名字, 要求单选按钮和复选框要有相同的name值。
• checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素。
• maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用。

4.2 label标签

<label> 标签用于绑定一个表单元素, 当点击<label> 标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

<input type="radio" name="sex" id="sex" />

注意: label 标签的 for 属性应当与相关元素的 id 属性相同。不然无法将焦点转到对应的元素

4.3

select下拉表单
在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表。

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>

注意：

• <select> 中至少包含一对<option> 。
• 在<option> 中定义 selected="selected" 时，当前项即为默认选中项。

4.4 textarea 文本域元素

当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用 <textarea> 标签。在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。

语法：

<textarea rows="3" cols="20">
 文本内容
</textarea>

特点：

• 通过 <textarea> 标签可以轻松地创建多行文本输入框。
• cols=“每行中的字符数” ，rows=“显示的行数”，我们在实际开发中不会使用，都是用 CSS 来改变大小。