1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>表单提交学习</title>
6 </head>
7 <body>
8 <!--表单form
9 action:表示表单请求的位置，可以使网站，也可以是请求处理地址；
10 method：post/get提交方式
11 get：可以在URL中看到提交的信息，不安全但高效
12 post：相对get来说比较安全，可以传输大文件
13
14 -->
15 <form action="图像标签.html" method="get">
16 <p>
17 <!--文本输入框input type="text"
18 placeholder="请输入姓名" 提示信息
19 -->
20 姓名：<input type="text" name="username" placeholder="请输入姓名"/>
21 </p>
22 <p>
23 密码：<input type="password" name="password"/>
24 </p>
25 <p>
26 <!--单选框标签
27 input type="radio"
28 value：单选框的值
29 name：单选框的组
30 -->
31 性别：
32 <input type="radio" value="boy" name="sex" checked/>男
33 <input type="radio" value="girl" name="sex"/>女
34 </p>
35 <p>
36 <!--多选框
37 input type="checkbox"
38 -->
39 爱好：
40 <input type="checkbox" value="sleep" name="hobby"/>睡觉
41 <input type="checkbox" value="movie" name="hobby"/>电影
42 <input type="checkbox" value="coding" name="hobby" checked/>代码
43 <input type="checkbox" value="game" name="hobby"/>游戏
44 <input type="checkbox" value="study" name="hobby"/>学习
45
46 </p>
47 <!--按钮
48
49 -->
50 <p>
51 <input type="button" value="点击一下" name="btn"/>
52 <br/>
53 <input type="image" src="../sources/img/ffdaa1be6c81800a5e8a7d61b83533fa838b47f1.jpg"/>
54 </p>
55 <!--下拉框，列表框-->
56 <p>
57 国家：
58 <select name="下拉框">
59 <option value="China" selected>中国</option>
60 <option value="Japan">日本</option>
61 <option value="USA">美国</option>
62 <option value="India">印度</option>
63 <option value="Russia">俄罗斯</option>
64 </select>
65 </p>
66 <!--文本域
67 多行文本
68 -->
69 <p>反馈：<br/>
70 <textarea name="textarea" id="xx" cols="30" rows="10"></textarea>
71 </p>
72 <!--文件域
73
74 -->
75 <p>
76 <input type="file" name="files">
77 <input type="button" name="btn" value="上传"/>
78 </p>
79 <!--邮箱-->
80 <p>
81 邮箱：
82 <input type="email" name="email"/>
83 </p>
84 <!--url
85 label for="mark" 鼠标增强应用
86 -->
87 <p>
88 <label for="mark">网址：</label>
89 <input type="url" name="url" id="mark"/>
90
91 </p>
92 <!--数字-->
93 <p>
94 数字：
95 <input type="number" name="num" max="100" min="0" step="1"/>
96 </p>
97 <!--滑块-->
98 <p>
99 音量：
100 <input type="range" name="voice" max="100" min="0" step="1"/>
101 </p>
102 <p>
103 <input type="submit" value="提交">
104 <input type="reset" value="重置">
105 </p>
106 </form>
107 </body>
108 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交学习</title>
</head>
<body>
<!--表单form
action:表示表单请求的位置，可以使网站，也可以是请求处理地址；
method：post/get提交方式
get：可以在URL中看到提交的信息，不安全但高效
post：相对get来说比较安全，可以传输大文件
-->
<form action="图像标签.html" method="get">
<p>
<!--文本输入框input type="text"
placeholder="请输入姓名" 提示信息
-->
姓名：<input type="text" name="username" placeholder="请输入姓名"/>
</p>
<p>
密码：<input type="password" name="password"/>
</p>
<p>
<!--单选框标签
input type="radio"
value：单选框的值
name：单选框的组
-->
性别：
<input type="radio" value="boy" name="sex" checked/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<!--多选框
input type="checkbox"
-->
爱好：
<input type="checkbox" value="sleep" name="hobby"/>睡觉
<input type="checkbox" value="movie" name="hobby"/>电影
<input type="checkbox" value="coding" name="hobby" checked/>代码
<input type="checkbox" value="game" name="hobby"/>游戏
<input type="checkbox" value="study" name="hobby"/>学习
</p>
<!--按钮
-->
<p>
<input type="button" value="点击一下" name="btn"/>
<br/>
<input type="image" src="../sources/img/ffdaa1be6c81800a5e8a7d61b83533fa838b47f1.jpg"/>
</p>
<!--下拉框，列表框-->
<p>
国家：
<select name="下拉框">
<option value="China" selected>中国</option>
<option value="Japan">日本</option>
<option value="USA">美国</option>
<option value="India">印度</option>
<option value="Russia">俄罗斯</option>
</select>
</p>
<!--文本域
多行文本
-->
<p>反馈：<br/>
<textarea name="textarea" id="xx" cols="30" rows="10"></textarea>
</p>
<!--文件域
-->
<p>
<input type="file" name="files">
<input type="button" name="btn" value="上传"/>
</p>
<!--邮箱-->
<p>
邮箱：
<input type="email" name="email"/>
</p>
<!--url
label for="mark" 鼠标增强应用
-->
<p>
<label for="mark">网址：</label>
<input type="url" name="url" id="mark"/>
</p>
<!--数字-->
<p>
数字：
<input type="number" name="num" max="100" min="0" step="1"/>
</p>
<!--滑块-->
<p>
音量：
<input type="range" name="voice" max="100" min="0" step="1"/>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>