5、HTML表单标签

表单标签：

表单标签主要用于HTML页面中针对相关信息的采集提交、比对验证等与用户进行交互。

表单标签由三部分组成：表单域、提示信息、表单控件。

表单域：相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过表单域的url地址，将表单域中的数据提交到服务器。

特点：
	1、属于双标签
	2、容纳表单控件、提示信息、文本域相关标签
	3、可将表单域中的相关数据提交到服务器
格式：
	<form action="url地址" method="提交方式" name="表单名称">
		各种表单标签
	</form>
常用属性：
	action : 用于指定接收并处理表单数据的服务器程序的url地址
	method : 用于设置表单数据的提交方式，起取值为get或post
	name : 用于指定表单的名称，以区分同一个页面中的多个表单

	<form action="xxx.html" method="post" name="fm1">
		...				//存放input、label、textarea、select相关标签
	</form>

表单控件：常用的 input控件、textarea控件、select控件，用作于信息的输入，选择等。

input标签：

特点：
	1、属于单标签
	2、可通过指定其类型属性，定义为不同的input控件
格式：
	<input type="控件类型"/>
常用属性：
	type : 输入控件的类型
			text		单行文本输入框
			password		密码输入框(输入内容以*或·代替)
			radio			单选按钮
			checkbox		复选框
			button			普通按钮
			submit			提交按钮
			reset			重置按钮
			image			图像形式的提交按钮
			file				文件域
	name ： 自定义控件名称
	value ： 控件中默认的文本值
	size ： 控件在页面中显示的宽高值
	checked ： 选择控件默认被选中的项
	maxlength ： 控件允许输入的最多字符数

	<form action="xxx.html" method="post" name="fm1">
		<input type="text"/>			//文本输入标签
		<input type="button"/>			//按钮输入标签
		...
	</form>

textarea控件：文本域，可创建一个多行文本输入框。

特点：
	1、属于双标签
格式：
	<textarea cols="每行中的字符数" rows="显示的行数">
	</textarea>
常用属性：
	cols ： 允许对应的textarea文本输入框一行能够显示多少个字符
	rows ： 允许对应的textarea文本输入框能够显示多少行字符

	<form action="xxx.html" method="post" name="fm1">
		<textarea cols="10" rows="5"></textarea>		//该文本域控件每行只能显示10个字符，能显示5行
		...
	</form>

select控件：下拉选择菜单。

特点：
	1、属于双标签
	2、使用select为下拉菜单的根标签
	3、在select标签中，只能嵌套option标签，并且至少有一对option标签存在
格式：
	<select>
		<option> 选项1 </option>
		<option> 选项2 </option>
		<option> 选项3 </option>
		...
	</select>
常用属性：
	option的selectd属性，表示选项默认选中

	<form action="xxx.html" method="post" name="fm1">
		<select>
			<option selected="selected"> 北京 </option>
			<option> 上海 </option>
			<option> 广州 </option>
			<option> 深圳 </option>
			<option> 重庆 </option>
		</select>
		...
	</form>

label标签：用于绑定一个表单元素，当点击label标签时，被绑定表单元素将获得输入焦点。

特点：
	1、属于双标签
格式：
	<label> 文本内容 </label>
常用属性：
	for : 该元素的文本 和 表单元素的id保持一致，实现绑定

	<form action="xxx.html" method="post" name="fm1">
		<label for="username"> 姓名： </label>
		<input type="text" id="username"/>
		...
	</form>