Dev_Nick

导航

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>

 

posted on 2017-01-13 22:38  Dev_Nick  阅读(495)  评论(0编辑  收藏  举报