9.表单说明

1.form表单(了解)
这个标签，并不会在页面上显示。如果我们填写的数据需要被提交到服务器，
那么这些收集数据的元素就必须放到form表单元素中。 这是个容器.
form表单属性:
action:提交到服务器的url
method:提交数据的方式 get/post 等

2.input元素(重点)
text文本输入框
让用户输入文本的文本框.

清除边框:
border:none;

清除外轮廓或叫高亮线:
outline:none;

占位符:写提示字体
placeholder

	写法

<input type="text" placeholder="输入关键字">

例子:

	<form action="regist.php" method="get">
			用户名: <input type="text">
		</form>

password密码输入框
输入的数据都是以密文的形式展示.
例子:

<form action="regist.php" method="get">
			登录密码: <input type="password"  name="pwd1"> <br>
			确认密码: <input type="password"  name="pwd2"> <br>
		</form>

submit提交按钮
会将用户输入的数据提交到服务器.
例子:

<form action="regist.php" method="get">
			<input type="submit">
		</form>

button普通按钮
value属性设置按钮的文本.
例子:

<input type="button" value="注册为会员">

radio单选按钮
为他们设置1个name属性，取值要一样.就可以互斥选项.
属性:
checked属性设置默认选中.
例子:

		<form action="regist.php" method="get">
    		性别: 
			<input type="radio" name="gender" id="gender_male">
			<label for="gender_male">男</label>    <!--for的内容为input中id的值-->
			<input type="radio" name="gender" id="gender_female">
			<label for="gender_female">女</label> <br>
		</form>

checkbox复选按钮
控制行内块元素与文字的对齐方式
vertical-align:middle; middle是中线对齐
属性:
checked默认选中
例子:

	<form action="regist.php" method="get">
			爱好:  
			<input type="checkbox" name="ah_program">编程 
			<input type="checkbox" name="ah_study">学习 
			<input type="checkbox" name="ah_noSleep">熬夜<br>
		</form>

label标签(理解)
将文本和输入元素进行关联.
先使用label标签将文本包围.
为要关联的元素设置1个id属性 值任意 只要不是以数字开头.
为label标签设置for属性 值为要关联的元素的id属性的值.
例子:

		<form action="regist.php" method="get">
			//复选按钮
			<input type="checkbox" name="ah_program" id="idProgram"> 
			//关联id
			<label for="idProgram">编程</label>
		</form>

reset重置按钮
用户输入的数据都会被还原为初始状态.
例子:

	<input type="reset">

image提交按钮
是1个提交按钮. 这个按钮可以设置为1个图片.
例子:

<input type="image" src="images/button-sure.png">

file文件域
上传文件选择的按钮
例子:

<input type="file" name="photo">

hidden隐藏域（了解)
需要藏一些数据在客户端 但是又不想被客户看到.
例子:

	<input type="hidden" name="xid" value="11901">

3.select下拉列表
最外层，是1个select标签.
每一个下拉项使用 option 标签包围.
selected默认选中
multiple多选
因为下拉框默认为单选，所以给一个multiple就能变成多选的形式

例子:

	<select>
		<option>广东</option>
		<option>黑龙江</option>
		<option>江西</option>
		<option>四川</option>
		<option>香港</option>
		<option>内蒙古</option>
	</select>

下拉项分组
例子:

	<select>
	<optgroup label="北方">
		<option>黑龙江</option>
		<option>吉林</option>
		<option>辽宁</option>
		<option>内蒙古</option>
	</optgroup>
	<optgroup label="南方">
	  	<option>广东</option>
		<option>江西</option>
     		<option>四川</option>
    		<option>香港</option>
	</optgroup>
	</select>

4.textarea 文本域
cols属性文本域的列数.
rows属性文本域的行数.
resize: none; 禁止拖拽
例子:

<textarea  cols="30" rows="5">这里是文本域，可以输入多行文本!</textarea>

5. 文本框属性
   value : 设置文本框的默认值.
   readonly: 文本框是否只读.
   这个属性无论给什么值，都代表文本框只读.
   规范要求为这个属性赋值为 readonly
   size: 修改文本框的宽度
   maxlength: 允许文本框输入的最大的字符数.