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

浏览数：34 / 时间：2015年06月09日

什么是表单？

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

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

在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,虽然看起来没有错，但用户所输入的数据没有任何意义。

[html] view plain copy

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

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

[html] view plain copy

<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>.

比如

[html] view plain copy

<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>

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

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

[html] view plain copy

<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>

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

技术分享

代码如下：

[html] view plain copy

<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="点我" onclick="alert(‘hello‘);" />
</td>
</tr>
</table>
</fieldset>
</form>
</td>
</tr>
</table>