【HTML】06表单标签

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7 </head>
 8 <body>
 9     <!--
10         form 表单标签
11             action 定义数据的提交地址
12                 1 url
13                 2 相对路径
14                 3 绝对路径
15             
16             method 定义数据的提交方式
17                 GET 
18                     1 参数会以键值的形式放在url后提交  url?key=value&key=value&key=value
19                     2 数值直接暴露在地址栏上不安全
20                     3 浏览器地址栏长度是有限制的，所以提交数据量不大
21                     4 提交在地址栏上，只能是字符，不能提交文件
22                     5 相比于post效率稍微高一些
23                 POST
24                     1 参数默认不放到url后面
25                     2 数据不会直接暴露在地址栏上，相对安全
26                     3 数据是单独打包，通过请求体发送，提交的数据量比较大
27                     4 请求体中，可以是字符，也可以是字节数据，可以提交文件
28                     5 相比于get效率略低一些
29 
30         表单项标签
31         一定要定义name属性，该属性用于明确提交时的参数名
32         一定要定义value属性，该属性用于明确提交时的实参
33         input
34             type 输入信息的表单项类型
35                 text 单行普通文本框
36                 password 密码框
37                 submit 提交按钮
38                 reset 重置按钮
39                 radio 单选框，多个单选框使用相同的name属性值，则会有互斥效果
40                 checkbox 复选框，多个选项，可以选多个
41                 hidden 隐藏域 不显示在页面上，提交时会携带（希望提交特定信息，但是考虑安全文艺或用户操作问题，不希望该数据发生改变）
42                 file 文件上传框
43         textarea 文本域 多行文本框
44         select 下拉框
45             option 选项
46     -->
47 
48     <form action="welcome.html" method="get">
49         <!--添加表单项标签 用户输入信息的标签-->
50         <input type="hidden" name="id" value="123"> <br>
51         <input type="text" name="pid" value="456" readonly> <br> <!--readonly 只读，提交时携带-->
52         <input type="text" name="tid" value="789" disabled> <br> <!--disabled 不可用，提交时不携带-->
53         用户名：<input type="text" name="userName"/> <br>
54         密码：<input type="password" name="userPwd"/> <br>
55         性别:
56             <input type="radio" name="gender" value="1" checked="true"> 男
57             <input type="radio" name="gender"value="0"> 女
58             <br>
59         爱好：
60             <input type="checkbox" name="hobby" value="1" checked="true"> 篮球
61             <input type="checkbox" name="hobby" value="2"> 足球
62             <input type="checkbox" name="hobby" value="3"> 排球
63             <input type="checkbox" name="hobby" value="4"> 乒乓球
64             <br>
65         个人简介：
66             <textarea name="intro" style="width: 300px;height: 100px;">
67                 必填
68             </textarea> <br>
69         籍贯：
70             <select name="pro">
71                 <option value="1">京</option>
72                 <option value="2">津</option>
73                 <option value="3">冀</option>
74                 <option value="0" selected="selected">-请选择-</option>
75             </select> <br>
76         选择头像：
77             <input type="file">
78             <br>
79         <input type="submit" value="登录"/>
80         <input type="reset" value="清空"/>
81     </form>
82 
83     <!--
84     <form action="welcome.html" method="post">
85          用户名：<input type="text" name="userName"/> <br/>
86          密码：<input type="password" name="userPwd"/> <br/>
87          <input type="submit" value="登录"/>
88          <input type="reset" value="清空"/>
89     </form>
90     -->
91 
92 </body>
93 </html>
复制代码

 

posted @   白茶花约  阅读(6)  评论(0)  编辑  收藏  举报
点击右上角即可分享
微信分享提示