CSS——表单和input标签

表单：收集用户信息

	<div>
		<h3>欢迎注册本站</h3>
		<form>
			<p>
				请输入您的姓名：
				<input type="text" />
			</p>
		</form>
	</div>

form标签里有action属性和method属性，action属性表示表单将提交到哪里，method属性表示用什么HTTP方法提交， 有get、post两种。

文本框：一个自封闭标签，< input type=“text”/>
input表示“输入”，type表示“类型”，text表示“文本”。
value表示“值”，value属性就是默认值。< input type=“text” value=“默认值”/>
如：< input type=“name” value=“mayday”/>

密码框：< input type=“password” value=“weiyuxuan”/>
input标签是文本框还是密码框，由type属性来决定，如type="text"则文本框，如type="password"则密码框。

单选按钮：只能选一个，术语叫“互斥”。
< input type=“radio” name=“xingbie” />男
< input type=“radio” name=“xingbie” />女
input type的值，如果是radio，则为单选按钮。单选按钮天生不是互斥的，如果互斥，则需要有相同的name属性。
如果是默认选项，应加上check=“checked”——< input type=“radio” name=“sex” checked=“checked”>

<div>
	<h3>欢迎注册本网站</h3>
	<form>
		<p>
			请输入您的姓名:
			<input type="text" value="mayday" />
		</p>
		<p>
			请输入您的密码：
			<input type="password" name="weiyuxuan" />
		</p>
		<p>
			请选择您的性别：
			<input type="radio" name="sex" />男
			<input type="radio" name="sex" checked="checked">女
		</p>
		<p>
			请输入您的喜好：
			<input type="radio" name="hobby" />Mayday
			<input type="radio" name="hobby" />May day
			<input type="radio" name="hobby" />mayday
			<input type="radio" name="hobby"  checked="checked">Mayday
		</p>
	</form>
</div>

复选框：也是input标签的一种，type是checkbox，需要相同的"name"。

<div>
	<h3>欢迎注册本网站</h3>
		<form>
			<p>
				请选择你的爱好：
				<input type="checkbox" name="hobby"/> 睡觉
				<input type="checkbox" name="hobby"/> 奶茶
				<input type="checkbox" name="hobby"/> 火锅
			</p>
			<p>
				请选择你的技能：
				<input type="checkbox" name="skill"/> HTML
				<input type="checkbox" name="skill"/> CSS
				<input type="checkbox" name="skill"/> Javascript
			</p>
			<p>
				请选择你喜欢的颜色：
				<input type="color" />
			</p>
			<p>
				请选择你的生日：
				<input type="date" />
			</p>
		</form>
</div>

下拉列表——select：选择；option：选项。
select标签和ul、ol、dl一样，都是组标签。

<select>
	<option>阿信</option>
	<option>怪兽</option>
	<option>石头</option>
	<option>玛莎</option>
	<option>冠佑</option>
</select>

在option中默认选中：selected=“selected”

多行文本框（文本域）——text：文本；area：区域。
标签对：< textarea cols=“30” rows=“10”>< /textarea>
标签对里可以不写东西，如果写的话，就是这个框的默认文字。
cols属性：columns“列”，rows属性：“行”。

三种按钮：
1.普通按钮：
< input type=“button” value=“普通按钮”/>
2.提交按钮：
< input type=“submit”/>
这个按钮不需要写上value，自动有“提交”文字，点击之后便是真的提交。此按钮会被提交到form标签的action属性的页面中去。
3.重置按钮：
< input type=“reset”/>

在HTML5中input还有很多类型，比如date和color，但是都不兼容。
除了以上三种按钮之外，通用的就是以下四种常用类型：
< input type=“text” /> 文本框
< input type="password "/> 密码框
< input type=“radio” /> 单选按钮
< input type=“checkbox” /> 复选框

label标签：
< input type=“radio” name=“sex” />男
< input type=“radio” name=“sex”/>女
本质上讲，“男”和“女”两个汉字和input元素没有关系，而label标签：
< input type=“radio” name=“sex” id=“nan” />< label for=“nan”>男< /label>
< input type=“radio” name=“sex” id=“nv” />< label for=“nv”>女< /label>
input元素要有一个id，label标签要有一个for属性，与id相同，即可形成绑定关系。
复选框也存在label标签：
< input type=“checkedbox” id=“mayday” />
< lable for=“mayday”>10天内免登录< /label>