search

博客列表 >表格和表单的应用

表格和表单的应用

　
　原创
2021年12月25日 17:42:46491浏览

表格

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.   </head>
  9.   <body>
  10.     <table
  11.       border="1"
  12.       align="center"
  13.       width="450"
  14.       cellspacing="0"
  15.       cellpadding="5"
  16.     >
  17.       <caption>
  18.         <h3>小学六年级课程表</h3>
  19.       </caption>
  20.       <thead>
  21.         <tr bgcolor="#e5e5e5">
  22.           <th>时间</th>
  23.           <th>周一</th>
  24.           <th>周二</th>
  25.           <th>周三</th>
  26.           <th>周四</th>
  27.           <th>周五</th>
  28.         </tr>
  29.       </thead>
  30.       <tbody>
  31.         <tr>
  32.           <td rowspan="4" bgcolor="#e7f7f7">上午</td>
  33.           <td>数学</td>
  34.           <td>语文</td>
  35.           <td>语文</td>
  36.           <td>英语</td>
  37.           <td>体育</td>
  38.         </tr>
  39.         <tr>
  40.           <!-- <td></td> -->
  41.           <td>语文</td>
  42.           <td>法制</td>
  43.           <td>科学</td>
  44.           <td>数学</td>
  45.           <td>数学</td>
  46.         </tr>
  47.         <tr>
  48.           <!-- <td></td> -->
  49.           <td>音乐</td>
  50.           <td>语文</td>
  51.           <td>英语</td>
  52.           <td>电脑</td>
  53.           <td>数学</td>
  54.         </tr>
  55.         <tr>
  56.           <!-- <td></td> -->
  57.           <td>语文</td>
  58.           <td>语文</td>
  59.           <td>语文</td>
  60.           <td>语文</td>
  61.           <td>语文</td>
  62.         </tr>
  63.         <tr>
  64.           <td colspan="6" align="center">中午休息</td>
  65.           <!-- <td></td>
  66.           <td></td>
  67.           <td></td>
  68.           <td></td>
  69.           <td></td> -->
  70.         </tr>
  71.         <tr>
  72.           <td rowspan="3" bgcolor="#e7f7f7">下午</td>
  73.           <td>电脑</td>
  74.           <td>电脑</td>
  75.           <td>电脑</td>
  76.           <td>电脑</td>
  77.           <td>电脑</td>
  78.         </tr>
  79.         <tr>
  80.           <!-- <td></td> -->
  81.           <td>电脑</td>
  82.           <td>电脑</td>
  83.           <td>电脑</td>
  84.           <td>电脑</td>
  85.           <td>电脑</td>
  86.         </tr>
  87.         <tr>
  88.           <!-- <td></td> -->
  89.           <td>电脑</td>
  90.           <td>电脑</td>
  91.           <td>电脑</td>
  92.           <td>电脑</td>
  93.           <td>电脑</td>
  94.         </tr>
  95.       </tbody>
  96.       <tfoot>
  97.         <tr bgcolor="#e5e5e5">
  98.           <td>备注：</td>
  99.           <td colspan="5" align="center">哈哈哈哈</td>
  100.           <!-- <td></td>
  101.           <td></td>
  102.           <td></td>
  103.           <td></td> -->
  104.         </tr>
  105.       </tfoot>
  106.     </table>
  107.   </body>
  108. </html>

表单

  1. <html lang="en">
  2.   <head>
  3.     <meta charset="UTF-8" />
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       body {
  9.         text-align: center;
  10.         background-color: #efe;
  11.       }
  12.       .login {
  13.         display: inline-block;
  14.         margin-top: 2em;
  15.       }
  16.       .login h2 {
  17.         padding: 0.5em 1.5em;
  18.         background-color: lightgreen;
  19.         box-shadow: 3px 3px 3px #888;
  20.         border-top-left-radius: 1em;
  21.         border-bottom-right-radius: 1em;
  22.       }
  23.       .login input {
  24.         border: none;
  25.         border-bottom: 1px solid;
  26.         background-color: lightblue;
  27.         outline: none;
  28.       }
  29.       .login .button {
  30.         border: none;
  31.         outline: none;
  32.         background-color: seagreen;
  33.         color: white;
  34.         width: 20%;
  35.         height: 2.2em;
  36.         margin-top: 1em;
  37.         margin-left: auto;
  38.       }
  39.       .login .reset {
  40.         width: 20%;
  41.         height: 2.2em;
  42.         border: none;
  43.         outline: none;
  44.         margin-top: 1em;
  45.         margin-left: auto;
  46.         background-color: seagreen;
  47.         color: white;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <form action="" method="get" class="login">
  53.       <h2>用户注册</h2>
  54.       <div>
  55.         <label for="username">用户名：</label
  56.         ><input
  57.           type="text"
  58.           name="username"
  59.           value=""
  60.           id="username"
  61.           placeholder="不能为空"
  62.           required
  63.         />
  64.       </div>
  65.       <br />
  66.       <div>
  67.         <label for="password">密码：</label>
  68.         <input
  69.           type="text"
  70.           name="password"
  71.           value=""
  72.           placeholder="不能为空"
  73.           required
  74.         />
  75.         <button onclick="showPassword(this,this.form.password)">查看</button>
  76.       </div>
  77.       <br />
  78.       <div>
  79.         <label for="email">邮箱：</label>
  80.         <input
  81.           type="email"
  82.           name="email"
  83.           id="email"
  84.           placeholder="不能为空"
  85.           required
  86.         />
  87.       </div>
  88.       <br />
  89.       <div>
  90.         <label for="secret">性别：</label>
  92.         <input type="radio" name="sex" id="male" value="male" />
  93.         <label for="male">男</label>
  95.         <input type="radio" name="sex" id="female" value="female" />
  96.         <label for="female">女</label>
  98.         <input
  99.           type="radio"
  100.           type="radio"
  101.           name="sex"
  102.           id="secret"
  103.           value="secret"
  104.           checked
  105.         /><label for="secret">保密</label>
  106.       </div>
  107.       <br />
  108.       <div>
  109.         <label for="">爱好：</label>
  110.         <input type="checkbox" name="hobby[]" id="game" value="game" checked />
  111.         <label for="game">游戏</label>
  113.         <input type="checkbox" name="hobby[]" id="trave" value="trave" />
  114.         <label for="trave">旅游</label>
  116.         <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
  117.         <label for="shoot">摄影</label>
  119.         <input type="checkbox" name="hobby[]" id="other" value="other" />
  120.         <label for="other">其他</label>
  121.       </div>
  122.       <br />
  123.       <div>
  124.         <label for="">LOL等级：</label>
  125.         <select name="level" id="">
  126.           <option value="1">黑铁</option>
  127.           <option value="2" selected>青铜</option>
  128.           <option value="3">白银</option>
  129.         </select>
  130.       </div>
  131.       <br />
  132.       <div>
  133.         <button type="submit" class="button">提交</button>
  134.         <button type="reset" class="reset">重置</button>
  135.         <!-- <button type="button">按钮</button> -->
  136.       </div>
  137.     </form>
  138.     <script>
  139.       function showPassword(btn, ele) {
  140.         if (ele.type === "password") {
  141.           ele.type = "text";
  142.           btn.textContent = "隐藏";
  143.         } else {
  144.           ele.type = "password";
  145.           btn.textContent = "显示";
  146.         }
  147.       }
  148.     </script>
  149.   </body>
  150. </html>
上一条：用HTML标签写常见的注册页面下一条：第18期 第一课作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多