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>