表单介绍
表单主要是用于搜集一系列的用户输入信息，我们可以简单地理解为，就像你在填写一张信息采集表一样，HTML中的表单的作用就是这样一个功能，用于搜集不同类型的用户输入，收集用户录入的信息。
表单标签 -<from>及表单域
被<form>标签包裹起来就是一个表单 ，它是一个包含表单元素的区域
常用属性：
- action 表单信息提交地址
- method 提交方式 —get/post，但是表单提交一般用post
表单元素(或者是表单控件)
位于表单标签内，是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
常用的表单元素：
| 标签名称 | 解释及用法 |
|---|---|
| <input> | 输入类型标签，定义输入域 |
| <textarea> | 定义文本域 （一个多行的输入控件） |
| <label> | 定义一个可以控制的标签 |
| fieldset | 定义域 |
| select | 第一个下拉选择列表 |
| option | 定义下拉列表中的选项 |
| button | 顶一个按钮 |
- input 标签
看字面意思，输入的意思，<input>标签是单标签，它的常用属性如下：
| 属性 | 属性值 | 描述 |
|---|---|---|
| type | text password radio checkbox button submit reset image file |
单行的文本输入框 密码输入框 单选按钮 复选框 普通的按钮 提交按钮 重置按钮 带图片的提交按钮 选择文件的按钮叫文件域 |
| name | 用户自定义 | 控件的名称，及当前input标签它的名称 |
| value | 用户自定义 | input控件中默认展示的文字内容 |
| size | 正整数 | input控件在页面中的宽度 |
| checked | checked | 定义选择控件默认被选中的项 |
| maxlength | 正整数 | 控件允许输入的最大字符数 |
- type 属性的作用是说明input是哪一种输入的形式
type属性的值特殊说明- radio 单选按钮，既然是选择的肯定不止一个按钮，我们必须要给这一组单选按钮命名相同的name值，否则的话不会被控制为单选，可以通过 checked属性设置默认选中的按钮，CheckBox跟radio是类似的。
-
textarea 标签
input标签只支持一行文本，如果想要写多行的文本就要使用textarea，textarea是一个双标签。 -
label 标签
用于绑定一个表单元素，当点击label标签的时候，被绑定的表单元素就后会获取焦点，绑定通过label的for属性，绑定到表单元素的id值。如下所示
<label for="username"> 我是label点我试一下 </label>
用户名：<input type="text" id="username"/>
- select 下拉列表控件
一个选择列表，列表项的值通过option标签来指定如下所示
<select name="" id="">
<option>白羊座</option>
<option>金牛座</option>
<option>双子座</option>
<option>巨蟹座</option>
<option>狮子座</option>
<option>处女座</option>
<option>天秤座</option>
<option>天蝎座</option>
<option>射手座</option>
<option>摩羯座</option>
<option>水瓶座</option>
<option>双鱼座</option>
</select>
实例代码与演示效果
根据上面的表单标签和表单元素，咱们可以做出如下的实例，先看代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>arvin</title>
</head>
<body>
<h1 >welcom to arvin's blog！</h1>
<form>
<table border="0" width="600" align="center" cellspacing="0" cellpadding="10">
<caption><h2>welcom to arvin's blog！</h2></caption><!-- caption 标题的意思 标提标签 用来定义一个表格的标题 -->
<tr>
<td>姓名</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" checked="checked"/> 男
<input type="radio" name="sex" /> 女
</td>
</tr>
<tr>
<td>星座</td>
<td>
<select name="" id="">
<option>白羊座</option>
<option>金牛座</option>
<option>双子座</option>
<option>巨蟹座</option>
<option>狮子座</option>
<option>处女座</option>
<option>天秤座</option>
<option>天蝎座</option>
<option>射手座</option>
<option>摩羯座</option>
<option>水瓶座</option>
<option>双鱼座</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" checked="checked"/>足球
<input type="checkbox" name="hobby"/>看书
<input type="checkbox" name="hobby"/>唱歌
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="" id="">
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
</td>
</tr>
<tr>
<td>照片</td>
<td><input type="file"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" maxlength="16"/></td>
</tr>
<tr>
<td><input type="button" value="普通按钮"/></td>
<td><input type="submit" value="提交"/></td>
<td><input type="image" src="images/image_button.jpg"/></td>
</tr>
</table>
</form>
</body>
</html>
效果图如下
因为现在只是在界面的搭建阶段，所以牵扯到数据验证、提交与数据交互上的处理需要等到js学习的时候再回过头来讲解。
