html(五) -- 表单标签
表单标签: 表单标签的作用是用于提交数据给服务器的。
表单标签的根标签是<form>标签
常用的属性:
action: 该属性是用于指定提交数据的地址。
method: 指定表单的提交方式。
get : 默认使用的提交方式。 提交的数据会显示在地址栏上。
post : 提交的数据不会显示在地址栏上。
注意: 表单项的数据如果需要提交到服务器上面,那么表单项必须要有name的属性值。
代码示例:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单标签</title> 6 </head> 7 <body> 8 9 <form action="http://www.baidu.com" method="get"> 10 <table border="1" width="400" height="300"> 11 <tr> 12 <td>用户名</td> 13 <!-- 文本输入框 单行--> 14 <td><input name="userName" type="text"/></td> 15 </tr> 16 <tr> 17 <td>密码</td> 18 <!-- 密码框 --> 19 <td><input name="password" type="password"/></td> 20 </tr> 21 <tr> 22 <td>性别</td> 23 <!-- 单选框 --> 24 <td>男<input checked="true" value="man" name="sex" type="radio"/> 女<input name="sex" value="woman" type="radio"/></td> 25 </tr> 26 <tr> 27 <td>兴趣爱好</td> 28 <!-- 复选框 同一组的复选框name的属性值要一致 --> 29 <td>java <input value="java" name="hobit" checked="checked" type="checkbox" />javascript <input type="checkbox" value="javascript" name="hobit" />android <input value="android" name="hobit" type="checkbox" /></td> 30 </tr> 31 <tr> 32 <td>城市</td> 33 <!-- 下拉框 --> 34 <td><select name="city"> 35 <option value="BJ">北京</option> 36 <option value="SH">上海</option> 37 <option value="GZ">广州</option> 38 <option value="SZ">深圳</option> 39 </select> 40 </td> 41 </tr> 42 <tr> 43 <td>大头照</td> 44 <!-- 文件上传框 --> 45 <td><input name="image" type="file" /></td> 46 </tr> 47 <tr> 48 <td>个人简介</td> 49 <!-- 文本域 --> 50 <td><textarea name="intro" rows="10" cols="30"></textarea></td> 51 </tr> 52 <tr> 53 54 <td colspan="2" align="center"> 55 <!-- 提交按钮 --> 56 <input type="submit" value="注册"/> 57 <!-- 重置按钮 --> 58 <input type="reset" value="重置"/> 59 </td> 60 </tr> 61 </table> 62 </form> 63 64 </body> 65 </html>