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

[html] view plaincopy

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

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

[html] view plaincopy

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

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

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

比如

[html] view plaincopy

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

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

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

[html] view plaincopy

1. <select name="address">
2. <optgroup label="北京">
3. <option value="朝阳区">朝阳区</option>
4. <option value="东城区">东城区</option>
5. <option value="海淀区">海淀区</option>
6. </optgroup>

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

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

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

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

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

代码如下：

[html] view plaincopy

1. <table width="700" align="center">
2. <tr>
3. <td>
4. <form action="#" method="post">
5. <fieldset><legend>交友信息</legend>
6. <table border="1" cellpadding="10" width="600" align="center">
7. <caption>交友表单</caption>
8. <tr>
9. <td>用户名:</td>
10. <td><input type="text" name="username" value="请输入用户名" maxlength="20" size="10"/></td>
11. </tr>
12. <tr>
13. <td>密码:</td>
14. <td><input type="password" name="password" maslength="20" size="10"/></td>
15. </tr>
16. <tr>
17. <td>确认密码:</td>
18. <td><input type="password" name="password" maslength="20" size="10"/></td>
19. </tr>
20. <tr>
21. <td>年龄:</td>
22. <td><input type="text" name="password" maslength="4" size="4"/></td>
23. </tr>
24. <tr>
25. <td>国籍:</td>
26. <td>
27. <select name="guoji">
28. <option value="waiguo">外国</option>
29. <option value="waiguo" selected="selected">中国</option>
30. </select>
31. </td>
32. </tr>
33. <tr>
34. <td>性别：</td>
35. <td>
36. 男<input type="radio" name="sex" />
37. 女<input type="radio" name="sex" />
38. </td>
39. <tr>
40. <tr>
41. <td>性别(label)：</td>
42. <td>
43. <label for="man">男<input id="man" type="radio" name="sex" /></label>
44. <label for="woman">女<input id="woman" type="radio" name="sex"/></label>
45. </td>
46. <tr>
47. <tr>
48. <td>籍贯：</td>
49. <td>
50. <select name="city">
51. <optgroup selected="selected" label="河北">
52. <option value="shijiazhuang">石家庄</option>
53. <option value="shijiazhuang">石家庄</option>
54. <option value="shijiazhuang">石家庄</option>
55. </optgroup>
56. <optgroup label="河南">
57. <option value="shijiazhuang">石家庄</option>
58. <option value="shijiazhuang">石家庄</option>
59. <option value="shijiazhuang">石家庄</option>
60. </optgroup>
61. <optgroup label="河北">
62. <option value="shijiazhuang">石家庄</option>
63. <option value="shijiazhuang">石家庄</option>
64. <option value="shijiazhuang">石家庄</option>
65. </optgroup>
66. </select>
67. </td>
68. </tr>
69. <tr>
70. <td>爱好：</td>
71. <td>足球<input name="aihao" type="checkbox">
72. 音乐<input name="aihao" type="checkbox">
73. 艺术<input name="aihao" type="checkbox">
74. 足球<input name="aihao" type="checkbox">
75. 足球<input name="aihao" type="checkbox">
76. </td>
77. </tr>
78. <tr>
79. <td>上传照片：</td>
80. <td><input name="pic" type="file"></td>
81. </tr>
82. <tr>
83. <td>自我评价：</td>
84. <td><textarea rows="10" cols="30"></textarea></ins></td>
85. </tr>
86. <tr>
87. <td align="right" colspan="2">
88. <input type="submit" value="注册" />
89. <input type="reset" value="重置" />
90. <input type="button" value="点我"  onclick="alert(‘hello‘);" />
91. </td>
92. </tr>
93. </table>
94. </fieldset>
95. </form>
96. </td>
97. </tr>
98. </table>