HTML中的表格和表单控件详解

---

前言

   html中经常会用到表格和表单控件，比如数据的显示，注册信息，登录信息等

---

表格和表单控件的作用？

   表格是为了将数据更加有条理的显示出来，用来对网页进行更加合理的规划和显示的
   表单是为了进行数据采集数据提交使用的控件。将用户输入的数据提交到服务器端。

一、表格控件的语法

1.tr标签和td标签

tr：表示表格的一行
td：表示表格中的一个单元格
th：也表示一个单元格，但是会自动居中，加粗（类似于表头）

<table>
	<tr>
		<th>单元格中要显示的内容</th>
	</tr>
	<tr>
		<td>单元格中要显示的内容</td>
	</tr>
</table>

2.表格的属性

属性名称	属性的含义
border	对表格的边框进行设置
windth	对表格的宽度进行设置
align	对表格的位置进行设置
cellspacing	表格边框的厚度设置
cellpadding	表格中的文字与边框的距离进行设置
rowspan	合并几行单元格 竖向合并
colspan	合并列单元格（单元格）横向合并

二、表单控件的用法

1.创建表单

   表单在html中就是使用一对form标签表示的  即：

<form action="html1.html" method="post" name="login">
	用户名：<input type="text" name="username" /><br/>
	密码：<input type="password" name="pswd"><br/>
		  <input type="submit" value="提交"><br/>
		  <input type="reset" value="重置"><br/>
</form>

2.表单的常用属性

属性名称	作用
action	表示表单信息要提交的位置
method	表示表单的提交方式，常用post和get方法提交，默认是get提交
method中的get方法	数据会显示在浏览器地址栏上，不安全，且提交数据的大小有限制
method中的post方法	数据不会显示在浏览器地址栏上，安全传输，且提交数据的大小没有限制

3.表单常用控件（input控件）

  input中的type属性的不同表示input控件的类型不同
input控件的属性即type属性值：

属性值	控制含义
text	文本框
password	密码框
radio	单选按钮
checkbox	复选按钮
file	上传按钮
submit	提交按钮
reset	重置按钮

要将表单中的数据提交到指定的位置，一定要给要提交的数据取一个名字，即要有input要有一个name属性

4.文本域标签

  文本域可以输入多行文本，多用于用户评论，用户备注等等
使用方法

<textarea rows="文本域显示的行数" cols="文本域一行的字符数"></textarea>

常用案例：

备注：<br/>
	<form method="get/post" action="html1.html"><br/>
		<textarea  rows="4" cols="10"></textarea><br/>
		<input type="submit" value="提交" /><br/>
		<input type="reset" value="重置" /><br/>
	</form>

---