表单标签
我们经常在网站使用的登陆注册等功能就是用表单写成的，如下图这样的：
一般情况下，一个表单都三部分构成：
① 表单域：表单域相当于一个控件，用来容纳整个表单部分，如果没有表单域，表单中的数据就无法与后台服务器交互。
② 表单控件：控件是指表单的各种功能项，比如文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
③ 提示信息：是指一些提示性的文字说明，方便用户的使用。
对于上图中表单，我们将其划分成3 个部分，如下图所示：
下面来看一些常用的表单控件。
input 控件
input 控件用<input /> 标签表示，它是一个单标签，input 标签有很多属性，如下图所示：
其中最为重要的是type 属性，用于指定不同的控件类型，下面我们一一来看，代码中有注释说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单input 控件演示</title>
</head>
<!-- type=text 这是一个文本框
size 属性是文本框的长度
value 是文本框中的默认值 -->
用户名：<input type="text" size="20" value="abc" /> <br /> <br />
<!-- type=password 这是一个密码框
maxlength 是文本框中能输入的字符的最大长度-->
密 码：<input type="password" size="21" value="123" maxlength="6" /> <br /> <br />
<!-- input 控件的下面这种写法实际上两组控件，
这种情况下男女两个选框可以同时选择，这一般不是我们想要的效果 -->
性别1：<input type="radio" /> 男
<input type="radio" /> 女 <br /> <br />
<!-- 为了使得男女两个选框只能选择其中一个，我们需要将这两个input 控件变成一组控件，可以使用name 属性。
如下面这种写法，下面的两个input 控件的name 属性的值都是 sex，
这时这两个控件就是同一组控件，男女两个选框就只能选择一个 -->
性别2：<input type="radio" name="sex" checked /> 男 <!-- checked 属性表示默认选中的组件，这里默认选中“男” -->
<input type="radio" name="sex" /> 女 <br /> <br />
<!-- type=checkbox 是复选框，可以同时选择多个 -->
爱 好：<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 唱歌
<input type="checkbox" name="hobby"> 踢球 <br /> <br />
<!-- type=button 是一个搜索按钮，可以用鼠标点击
value 是按钮上显示的文字-->
这是一个搜索按钮：<input type="button" value="我是搜索按钮" /> <br /> <br />
<!-- type=submit 是一个提交按钮，可以用鼠标点击 -->
这是一个提交按钮：<input type="submit" value="我是提交按钮" /> <br /> <br />
<!-- type=reset 是一个重置按钮，可以用鼠标点击 -->
这是一个重置按钮：<input type="reset" value="我是重置按钮" /> <br /> <br />
<!-- type=image 是一个图片按钮，可以用鼠标点击，用src 属性设置图片的地址 -->
这是一个图片按钮：<input type="image" src="https://www.baidu.com/img/baidu_jgylogo3.gif" /> <br /> <br />
<!-- type=file 用于上传文件 -->
这个用于上传文件：<input type="file" /> <br />
</body>
</html>
下面通过图片将代码与效果对应起来，看起来更方便：
label 标签
label 标签通常与 input 标签配合使用，能够起到的作用是，当点击某个input 框旁边的文字时，也能像点击input 输入框一样，锁定输入框。下面通过例子说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lable 标签演示</title>
</head>
<!-- 用label 标签将文字说明和input 标签都包住，这时，
当点击“用户名” 三个字时也就相当于点击了input 框 -->
<label>
用户名：<input type="text" />
</label>
<br />
<!-- 可以通过label 标签中的for 属性，与input 标签中的id 属性配合使用，
来将label 标签与 input 标签绑定起来，下面代码的效果与上面的效果是一样的 -->
<label for="aname">
用户名：<input type="text" id="aname" />
</label>
</body>
</html>
效果如下：
textarea 控件
textarea 控件是一块文本域，就像下图一样，可以输入多行文字：
下面通过代码简单演示一下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>textarea 标签演示</title>
</head>
<body>
这是一个留言板：
<textarea>输入留言</textarea>
</body>
</html>
效果如下
下拉菜单
下拉菜单使用<select></select> 标签表示，其语法格式如下：
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
下面通过代码举例说明：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>下拉菜单演示</title>
</head>
<body>
你在北京哪个区：
<select>
<option>选择所在北京的区</option>
<option>海淀区</option>
<option>朝阳区</option>
<option selected>昌平区</option> <!-- 可以通过select 属性来选择默认的显示 -->
<option>大兴区</option>
<option>通州区</option>
</select>
</body>
</html>
效果如下：
表单域
表单域用form 标签表示，其控制一个表单的范围，每个表单都应该放在表单域中，被包在form 标签中的表单标签都可以提交到后台。上面我们讲到的所有的表单标签都可以放在form 标签中，从而提交到后台服务器。
form 标签的语法格式如下所示：
<body>
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>
</body>
form 标签常用的属性有action，method 和 name 属性，下面依次说明：
① action：用于指定将表单信息提交到的URL 地址。
② method：用于指定提交表单数据的方式，有get 和post 两种。
③ name：用于指定form 表单的名字，以区分同一个页面中的不同表单。