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