No.004 表单form及其元素

（以下所有内容仅用以记录学习过程中的个人理解，如有错误欢迎指出）

1. 表单form

<form>标签用于创建供用户输入的 HTML 表单。简单实例就像这样：

<form method="post"（规定用于发送表单数据的HTTP方法） 
action="xxxx.html"（规定当提交表单时向何处发送表单数据）>
	<p>用户名 <input name="name" type="text"></p>
	<p>密码 <input name="pass" type="password"></p>
	<p><input type="submit" name="Button" value="提交"/></p>
</form>

2. 表单元素格式

2.1 < input >标签

一般需要以下属性，根据元素类型会有改变：

<input type="（元素类型）" name="（元素名称）" value="（元素默认值）"/>

2.2 文本框、密码框

密码框也是文本框，只不过输入内容不可见。

<form>
	<p>用户名 <input type="text" name="(文本框名称)" value="我是默认用户名"/></p>
	<p>密码 <input type="password" name="(密码框的名称)" size="(密码框长度)" value="我是默认密码"/></p>
</form>

2.3 单选框、复选框

一组单选框如果不指定相同的name属性，则无法保持单选。

<form>
	<p>
		<input type="radio" name="gender" value="male" checked="checked"(默认选中)/>男
		<input type="radio" name="gender" value="female"/>女
	</p>
	<p>
		<input type="checkbox" name="sports" value="zq"/>足球
		<input type="checkbox" name="sports" value="lq" checked="checked"(默认选中)/>篮球
		<input type="checkbox" name="sports" value="wq" checked="checked"(默认选中)/>网球
	</p>
</form>

2.4 下拉列表

下拉列表的name属性指定给<select>，value属性指定给<option>。

<optgroup>用来给选项分组，其中用label属性指定每个分组的名字。

<form>
	<select name="(列表名称)" size="(一次显示行数)" multiple="(是否多选)">
		<optgroup label="单数">
			<option value="(选项值)">选项1</option>
			<option value="(选项值)">选项3</option>
		</optgroup>
		<optgroup label="偶数">
			<option value="(选项值)" selected="selected"(默认选中)>选项2</option>
			<option value="(选项值)">选项4</option>
		</optgroup>
	</select>
</form>

2.5 按钮

<button>也可以创建按钮，比表单的按钮使用更加灵活。

<form>
	<input type="button"(普通按钮) name="Button" value="按钮"/>
	<input type="reset" (重置按钮) name="Reset"  value="重置"(按钮上的文字)>
	<input type="submit"(提交按钮) name="Submit" value="提交">
</form>

2.6 标记< label >

当用label标签将文本与表单控件绑定之后，可以通过点击label内文本，触发绑定控件。

绑定方式：< label >的for属性与绑定控件的id属性保持一致。

<form>
	<label for="user">用户名 </label><input id="user" name="name" type="text">
	<label for="pwd">密码 </label><input id="pwd" name="pass" type="password">
</form>

2.7 < fieldset >、< legend >

< fieldset >可用来给表单项分组，< legend >则用来给分组命名。

<form>
	<fieldset>
		<legend>健康信息</legend>
		身高 <input type="text"/>
		体重 <input type="text"/>
	</fieldset>
	<fieldset>
		<legend>用户登录</legend>
		账号 <input type="text"/>
		密码 <input type="text"/>
	</fieldset>
</form>