在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。
表单控件： 包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。
提示信息： 一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。
表单域： 他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。
input 控件
在上面的语法中，input /标签为单标签，type属性为其最基本的属性，其取值有多种，用于指定不同的控件类型。除了type属性之外，input /标签还可以定义很多其他的属性，其常用属性如下表所示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<!-- <input /> 我们的input是一个单标签 br hr img base input -->
用户名: <input type="text" value="派克钢笔" /> <!-- 这是一个文本框 --> <br />
密 码: <input type="password" maxlength="6" /> <br /> <!-- 这是一个密码框 ctrl+ / 注释的快捷键 -->
性 别:
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" checked="checked"/> 人妖
<input type="radio" name="sex1"/> 未知
<br />
<!-- 单选框 如果是一组，我们通过相同的name值 来实现-->
爱 好:
<input type="checkbox" name="hobby" checked="checked" /> 足球
<input type="checkbox" name="hobby"/> 篮球
<input type="checkbox" name="hobby"/> 乒乓球
<!-- 复选框 可以同时选择多个 --><br />
搜索： <input type="button" value="搜索啥"/> <!-- 普通按钮 --><br />
<input type="submit" value="提交表单" /><!-- 提交按钮 -->
<input type="reset" value="重置表单" /><!-- 重置按钮 --><br />
<input type="image" src="im.jpg" /><!-- 图像按钮 --><br />
上传头像:
<input type="file" /> <!-- 文件按钮 -->
</body>
</html> 运行结果如下:
label标签
label 标签为 input 元素定义标注（标签）。
作用： 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点如何绑定元素呢？for 属性规定 label 与哪个表单元素绑定。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<h3>label(table) 标签的使用 </h3>
<label> 输入账号: <input type="text" /> </label> <br />
<label for="two"> 输入账号: <input type="text" /> <input type="text" id="two"/></label>
<hr />
1. 用lalbe 直接进行包裹input 就可以了
2. 如果label里面有多个表单，想定位到某个 可以通过for id 的格式来进行
</body>
</html>运行结果如下:
textarea控件(文本域)
如果需要输入大量的信息，就需要用到<textarea></textarea>标签。通过textarea控件可以轻松地创建多行文本输入框，其基本语法格式如下：
<textarea cols="每行中的字符数" rows="显示的行数">
文本内容
</textarea><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
留言板:
<textarea> 请输入留言 </textarea>
</body>
</html>运行结果如下:
下拉菜单
使用select控件定义下拉菜单的基本语法格式如下
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
籍贯:
<select>
<option>点击选择您的籍贯</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option selected="selected">星星</option>
</select>
<select>
<option>点击选择您的城市</option>
<option>海淀</option>
<option>昌平</option>
<option>通州</option>
<option>大兴</option>
</select>
</body>
</html>运行结果如下:
注意：<select></select>中至少应包含一对<option></option>。在option 中定义selected =" selected "时，当前项即为默认选中项。
表单域
在HTML中，form标签被用于定义表单域，即创建一个表单，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。创建表单的基本语法格式如下：
<form action="url地址" method="提交方式" name="表单名称">
各种表单控件
</form>常用属性：
1.Action
在表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务器程序的url地址。
2.method
用于设置表单数据的提交方式，其取值为get或post。
3.name
用于指定表单的名称，以区分同一个页面中的多个表单。
注意： 每个表单都应该有自己表单域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<form action="xxx.php" method="get" name="userMessage">
<!-- <input /> 我们的input是一个单标签 br hr img base input -->
用户名: <input type="text" value="派克钢笔" /> <!-- 这是一个文本框 --> <br />
密 码: <input type="password" maxlength="6" /> <br /> <!-- 这是一个密码框 ctrl+ / 注释的快捷键 -->
性 别:
<input type="radio" name="sex" /> 女
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" checked="checked"/> 人妖
<input type="radio" name="sex1"/> 未知
<br />
<!-- 单选框 如果是一组，我们通过相同的name值 来实现-->
爱 好:
<input type="checkbox" name="hobby" checked="checked" /> 足球
<input type="checkbox" name="hobby"/> 篮球
<input type="checkbox" name="hobby"/> 乒乓球
<!-- 复选框 可以同时选择多个 --><br />
搜索： <input type="button" value="搜索啥"/> <!-- 普通按钮 --><br />
<input type="submit" value="提交表单" /><!-- 提交按钮 -->
<input type="reset" value="重置表单" /><!-- 重置按钮 --><br />
<input type="image" src="im.jpg" /><!-- 图像按钮 --><br />
上传头像:
<input type="file" /> <!-- 文件按钮 -->
</form>
</body>
</html>运行结果如下:
