html--表单

html表单

表单用于搜集不同类型的用户输入，表单由不同类型的标签组成，实现一个特定功能的表单区域（比如：注册），首先应该用<form>标签来定义表单区域整体，在此标签中再使用不同的表单控件来实现不同类型的信息输入，具体实现及注释可参照以下代码：

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport"
 6           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>表单</title>
 9 </head>
10 <body>
11 <h3>用户注册</h3>
12 
13 <!-- name和value联合使用，get方式提交表单。表单填写和选择相关信息后，点击提交，url如下：“http://localhost:63342/imooc/htmlTest/testDir/test006.html?username=user&pwd=123456&gender=0&like=0&like=1&like=2&city=1&person_pic=&descript=haha”-->
14 <!-- name和value联合使用，也可post方式提交表单。-->
15 
16 <!-- form定义一个表单区域,action属性定义表单数据提交的地址，method属性定义提交的方式。   -->
17 <form action="http://www.itcast.cn/" method="get">
18     <div>
19         <!-- for和id联合使用，点击“用户名”这几个字的位置，可以将输入框置为填写状态-->
20 
21         <!-- label标签定义表单控件的文字标注，input类型为text定义了一个单行文本输入框  -->
22         <label for="user">用户名:</label>
23         <input type="text" name="username" id="user">
24     </div>
25     <br>
26     <div>
27         <!-- input类型为password定义了一个密码输入框  -->
28         <label>密码：</label>
29         <input type="password" name="pwd">
30     </div>
31     <br>
32     <div>
33         <!-- input类型为radio定义了单选框  -->
34         <label>性别：</label>
35         <input type="radio" name="gender" id="man" value="0"> <label for="man">男</label>
36         <input type="radio" name="gender" id="woman" value="1"> <label for="woman">女</label>
37     </div>
38     <br>
39     <div>
40         <!-- input类型为checkbox定义了单选框  -->
41         <label>爱好：</label>
42         <input type="checkbox" name="like" value="0"> 逛街
43         <input type="checkbox" name="like" value="1"> 吃饭
44         <input type="checkbox" name="like" value="2"> 游戏
45     </div>
46     <br>
47     <div>
48         <!-- select定义下拉列表选择  -->
49         <label>籍贯：</label>
50         <select name="city">
51             <option value="0">北京 </option>
52             <option value="1">上海</option>
53             <option value="2">深圳</option>
54             <option value="3">广州</option>
55         </select>
56     </div>
57     <br>
58     <div>
59         <!-- input类型为file定义上传照片或文件等资源  -->
60         <label>照片：</label>
61         <input type="file" name="person_pic">
62     </div>
63     <br>
64     <div>
65         <!-- textarea定义多行文本输入  -->
66         <label>描述：</label>
67         <textarea name="descript"></textarea>
68     </div>
69     <br>
70     <div>
71         <!-- input类型为submit定义提交按钮 -->
72         <input type="submit" name="" value="提交">
73         <!-- input类型为reset定义重置按钮  -->
74         <input type="reset" name="" value="重置">
75         <!-- 单纯的点击-->
76         <input type="button" name="" value="按钮">
77         <!-- 页面隐藏这个字段值，但是该字段值还是会传输的-->
78         <input type="hidden" name="hid" value="1000">
79     </div>
80     <br>
81 
82 </form>
83 </body>
84 </html>

 

get请求j结果：

 

post请求结果：

 

posted on 2019-10-30 21:01  cherry_ning  阅读(111)  评论(0)    收藏  举报

导航