WEB前端开发学习----3.HTML表单form标签

什么是表单？

表单就是用来搜集不同类型的用户输入。比如我们登录时输入的登录名，密码。再比如我们点击登录按钮，删除按钮等等都算是表单。

表单是一个包含表单元素的区域，包括文本域，下拉菜单，复选框，单选框等等。

在html文档中，我们使用<form></form>标签来包含表单元素。

form标签有两个属性需要注意下，一个是action， 另一个是method。

action ="目的地"   表示将用户输入的数据将被传送到指定位置。比如一个网页。

method="get/post"  表示传送方法，get为默认值，数据比较少时选择它。post一般用在大量数据，比如博客，空间日志之类的。但如果有密码等需要保护的数据，则应该使用post，否则数据将会显示在浏览器地址栏中。

经常使用的表单标签

1.输入标签<input type="" name="" /> 。

其中type 和 name 属性是必须的。type决定输入类型，比如是复选框，单选框，还是文本域。而name是控制表单元素的，一定要记得加上，否则无法将数据传给后端服务器。

比如<input type="text" name="username">表示输入类型为文本，且将用户的所输入的数据以username的名字提交给后台。如果没有name,虽然看起来没有错，但用户所输入的数据没有任何意义。

<input type="radio" name="sex" checked="checked" value="man" >男
<input type="radio" name="sex" value="woman" >女</td>

下面的例子表示单选按钮，由于name均为sex，所以只能选择一个。但是需要注意，用户必须点击原点才可以选中，点击文字无用。为了提高用户体验，推荐使用label，比如将上例改为:

<input type="radio" name="sex2" id="man" >
<span style="white-space:pre">	</span><label for="man">男</label>
<input type="radio" name="sex2" id="woman" >
	<label for="woman">女</td>

for 用来和input关联。但for 的值必须与id值相同。

2.选择标签<select name=""><option></option>.

比如

<select name="city">
<span style="white-space:pre">	</span><option value="beijing">北京</option>
	<option value="shanghai">上海</option>
	<option value="chengdu">成都</option>
	<option value="tianjin" selected="selected">天津</option>
</select>

将出现一个下拉选框，选项为北京上海成都天津，天津卫默认选项。

也可以给这些选项分组，比如

<select name="address">
	<optgroup label="北京">
	<option value="朝阳区">朝阳区</option>
	<option value="东城区">东城区</option>
	<option value="海淀区">海淀区</option>
	</optgroup>

multiple属性可以将其变为可以按ctrl/shift键盘复选的多选框。

3.文本域标签<textarea rows="" cols=""></textarea>多行文本框

cols为每行显示的字符数，rows为显示的行数。

4.为你的表单加上边框<fieldset><legend>健康信息</legend></fieldset>

下面通过一个案例来实现一个交友信息的表单:

代码如下：

<table width="700" align="center">
<tr>
<td>
	<form action="#" method="post">
		<fieldset><legend>交友信息</legend>
		<table border="1" cellpadding="10" width="600" align="center">
		<caption>交友表单</caption>
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="username" value="请输入用户名" maxlength="20" size="10"/></td>
			</tr>
			<tr>
				<td>密码:</td>
				<td><input type="password" name="password" maslength="20" size="10"/></td>
			</tr>	
			<tr>
				<td>确认密码:</td>
				<td><input type="password" name="password" maslength="20" size="10"/></td>
			</tr>
			<tr>
				<td>年龄:</td>
				<td><input type="text" name="password" maslength="4" size="4"/></td>
			</tr>
			<tr>
				<td>国籍:</td>
				<td>
					<select name="guoji">
						<option value="waiguo">外国</option>
						<option value="waiguo" selected="selected">中国</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>性别：</td>
				<td>
				男<input type="radio" name="sex" />
				女<input type="radio" name="sex" />
				</td>
			<tr>
			<tr>
				<td>性别(label)：</td>
				<td>
				<label for="man">男<input id="man" type="radio" name="sex" /></label>
				<label for="woman">女<input id="woman" type="radio" name="sex"/></label>
				</td>
			<tr>
			<tr>
				<td>籍贯：</td>
				<td>
					<select name="city">
						<optgroup selected="selected" label="河北">
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
						</optgroup>
						<optgroup label="河南">
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
						</optgroup>
						<optgroup label="河北">
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
							<option value="shijiazhuang">石家庄</option>
						</optgroup>
					</select>
			    </td>
			</tr>
			<tr>
				<td>爱好：</td>
				<td>足球<input name="aihao" type="checkbox">
					音乐<input name="aihao" type="checkbox">
					艺术<input name="aihao" type="checkbox">
					足球<input name="aihao" type="checkbox">
					足球<input name="aihao" type="checkbox">
				</td>
			</tr>
			<tr>
				<td>上传照片：</td>
				<td><input name="pic" type="file"></td>
			</tr>
			<tr>
				<td>自我评价：</td>
				<td><textarea rows="10" cols="30"></textarea></ins></td>
			</tr>
			<tr>
				<td align="right" colspan="2">
					<input type="submit" value="注册" />
					<input type="reset" value="重置" />
					<input type="button" value="点我"  οnclick="alert('hello');" />
				</td>
			</tr>
		</table>
		</fieldset>
	</form> 
</td>
</tr>
</table>