表单

  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>