表单—输入框、单选框、下拉列表、多选下拉列表、多行文本框、隐藏表单域以及HTML5 新标签 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <!--表单form，所有的表单组件都必须书写在form标记以内
 9     action属性：指明用户输入的数据提交到哪里取处理
10     method属性：指明数据提交的方式：get/post
11                 GET提交：1、数据不安全，提交的用户数据是附加在URL地址后面，以？形式分割
12                            http://127.0.0.1:8080/login.do?name=zhangshan&password=123456
13                         2、只能提交普通文本，提交的数据大小最多是255KB
14                 POST提交：1、数据安全，提交的用户数据是放在http请求协议的消息部分作加密传输
15                          2、即可提交普通文本，还可以提交二进制数据，提交的数据大小没有显示
16      enctype属性：指明用户输入的参数的编码方式。如果有文件上传组件，必须设置此属性
17         enctype="multipart/form-data"
18          multipart/form-data：既可以上传文件等二进制数据，也可以上传表单键值对，只是最后会转化为一条信息；
19          x-www-form-urlencoded：只能上传键值对，并且键值对都是间隔分开的。
20 
21        input 选择默认是：checked
22         下拉表 默认是：selected、
23         单行下拉selected 加属性 ：multiple多选下拉
24         readonly文本框只读
25         required：必须要填写
26 -->
27     <form action="login.do" method="get" enctype="multipart/form-data">
28      <!--<label for="username">用户名：</label><input type="text"id="username"  name="username" placeholder="请输入用户名"-->
29                                               <!--accesskey="A" required="required"><br><br>-->
30         用户名：<input type="text"id="username"  name="username" placeholder="请输入用户名"
31                                               accesskey="A" required="required"><br><br>
32      密码：<input type="password" name="pwd" placeholder="请输入密码" value="12344" readonly="readonly" size="200"><br><br>
33         上传头像：<input type="file" name="www"><br><br>
34         <!--使用单选框的时候，那么属性的值必须设置为一样的
35             必须要写value属性
36             -->
37         性别：<label for="nam">男</label><input type="radio" id="nam" name="sex" value="male" checked="checked">
38               <label for="girl">女</label><input type="radio" id="girl" name="sex" value="famale"><br><br>
39 
40         爱好：体育<input type="checkbox" name="hobby" value="sport" checked="checked">体育
41               音乐<input type="checkbox" name="hobby" value="music">
42               电影<input type="checkbox" name="hobby" value="film"><br><br>
43         <!--HTML5 新标签-->
44         生日：<input type="date" name="brithday"><br><br>
45         邮箱：<input type="email" name="email"><br><br>
46         滑动条数字：<input type="range" name="test" max="20" mix="1"><br><br>
47         数字：<input type="number" name="numl" max="10" min="1" size="100"><br><br>
48 
49         <!--下拉列表-->
50         城市： <select name="city">
51                     <option value="chengdu">成都</option>
52                     <option value="bejing" selected="selected">北京</option>
53                     <option value="shanghai">上海</option>
54 
55                 </select><br><br>
56         <!--下拉列表（多选）-->
57         你喜欢的明星是：<select name="star" multiple="multiple" style="width: 100px;height: 200px">
58                                 <option value="cxk">蔡徐坤</option>
59                                 <option value="lh">鹿晗</option>
60                                 <option value="zyx">张艺兴</option>
61                                 <option value="zxy" selected="selected">张学友</option>
62                                 <option value="bkhm" selected="selected">贝克汉姆</option>
63 
64                          </select><br><br>
65 
66         <!--多行文本框-->
67         个人简介：
68             <textarea name="introduceMyself" cols="50" rows="20" style="resize: none">
69               请简单介绍以下自己
70 
71             </textarea><br><br>
72         <!--隐藏表单域
73                     作用：即不改变页面样式，但又可以隐性传值到服务器端
74             -->
75         <input type="hidden" name="qq" value="91828272">
76         <input type="submit" value="提交">
77         <input type="button" value="普通按钮">
78         <input type="reset" value="取消">
79         <input type="image" name="图片按钮" src="img/1.jpg" width="100" height="100">
80     </form>
81 </body>
82 </html>

 

posted @ 2019-10-21 23:23  谢世林  阅读(1163)  评论(0)    收藏  举报