1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单</title> 6 </head> 7 <body> 8 <!-- form --> 9 <!-- 作用:将前台用户数据通过get或post请求方式提交给后台,并在新页面标签中接收后台相应 --> 10 <!-- 请求方式: --> 11 <!-- get:将数据以url链接拼接方式提交给后台,速度快,但安全性低,且有数据大小限制 --> 12 <!-- post:将数据以数据包方式提交给后台,速度较慢,但安全性高,且无数据大小限制 --> 13 <!-- 前后台交换数据的依据为:表单元素的name与value,name为key,value为value --> 14 15 <!-- action:提交的后台接口(请求的服务器指定路径) --> 16 <!-- method:请求方式 --> 17 <form action="" method="get"> 18 <div> 19 <!-- 提交给后台的就是表单元素的name=value --> 20 <label>用户名:</label><input type="text" name="usr" value="hehe" /> 21 </div> 22 <div> 23 <!-- placeholder:文本占位符 --> 24 <label>密码:</label><input type="password" name="ps" placeholder="请输入密码" /> 25 </div> 26 <div> 27 <button type="submit">提交</button> 28 </div> 29 </form> 30 31 <!-- 常用表单元素 --> 32 <form> 33 <!-- 明文输入框 --> 34 <input type="text" name="username" placeholder="请输入用户名" size="10" maxlength="15"> 35 36 <!-- 密文输入框 --> 37 <input type="password" name="pwd" placeholder="请输入密码" maxlength="12"> 38 39 <!-- 单选框:name必须相同,value需要提前规定 --> 40 <input type="radio" name="sex" value="male" checked>男 41 <input type="radio" name="sex" value="female">女 42 43 <!-- 复选框:name必须相同,checked(boolean类型属性) --> 44 <input type="checkbox" name="hobby" value="basketball"> 篮球 45 <input type="checkbox" name="hobby" value="football" checked"> 足球 46 <input type="checkbox" name="hobby" value="ping-pong" checked="checked"> 乒乓球 47 <input type="checkbox" name="hobby" value="baseball"> 棒球 48 49 <!-- 单选下拉框:name由select设置,value由option提供,selected默认项 --> 50 <select name="major"> 51 <option value="computer">计算机</option> 52 <option value="archaeology">考古学</option> 53 <option value="medicine" selected>医学</option> 54 <option value="Architecture">建筑学</option> 55 <option value="Biology">生物学</option> 56 </select> 57 <!-- 多选下拉框 --> 58 <select name="major" multiple> 59 <option value="computer">计算机</option> 60 <option value="archaeology">考古学</option> 61 <option value="medicine">医学</option> 62 <option value="Architecture">建筑学</option> 63 <option value="Biology">生物学</option> 64 </select> 65 66 <!-- 多行文本 --> 67 <textarea name="content" cols="30" rows="10"></textarea> 68 69 <!-- 全局属性设置 --> 70 <!-- required:value不能为空 --> 71 <input type="text" name="usr" required /> 72 <input type="text" name="name" pattern="d" /> 73 74 <!-- 按钮 --> 75 <!-- 重置 --> 76 <input type="reset" value="自定义重置" /> 77 <!-- 提交 --> 78 <input type="submit" value="请求"> 79 <!-- 普通按钮 --> 80 <input type="button" value="普通按钮" onclick="alert('你丫真帅')"> 81 </form> 82 83 <style type="text/css"> 84 .box { 85 width: 200px; 86 height: 0; 87 background-color: red; 88 /*display: none;*/ 89 transition: .5s; 90 } 91 92 .usr:focus + .box { 93 /*display: block;*/ 94 height: 200px; 95 } 96 </style> 97 <form> 98 <input id="usr" class="usr" type="text" name="usr"> 99 <div class="box"></div> 100 </form> 101 </body> 102 </html>