欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

表格和表单的应用

程序员文章站 2022-06-02 19:29:30
...

表格

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>Document</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <table
    11. 

  11.       border="1"
    12. 

  12.       align="center"
    13. 

  13.       width="450"
    14. 

  14.       cellspacing="0"
    15. 

  15.       cellpadding="5"
    16. 

  16.     >
    17. 

  17.       <caption>
    18. 

  18.         <h3>小学六年级课程表</h3>
    19. 

  19.       </caption>
    20. 

  20.       <thead>
    21. 

  21.         <tr bgcolor="#e5e5e5">
    22. 

  22.           <th>时间</th>
    23. 

  23.           <th>周一</th>
    24. 

  24.           <th>周二</th>
    25. 

  25.           <th>周三</th>
    26. 

  26.           <th>周四</th>
    27. 

  27.           <th>周五</th>
    28. 

  28.         </tr>
    29. 

  29.       </thead>
    30. 

  30.       <tbody>
    31. 

  31.         <tr>
    32. 

  32.           <td rowspan="4" bgcolor="#e7f7f7">上午</td>
    33. 

  33.           <td>数学</td>
    34. 

  34.           <td>语文</td>
    35. 

  35.           <td>语文</td>
    36. 

  36.           <td>英语</td>
    37. 

  37.           <td>体育</td>
    38. 

  38.         </tr>
    39. 

  39.         <tr>
    40. 

  40.           <!-- <td></td> -->
    41. 

  41.           <td>语文</td>
    42. 

  42.           <td>法制</td>
    43. 

  43.           <td>科学</td>
    44. 

  44.           <td>数学</td>
    45. 

  45.           <td>数学</td>
    46. 

  46.         </tr>
    47. 

  47.         <tr>
    48. 

  48.           <!-- <td></td> -->
    49. 

  49.           <td>音乐</td>
    50. 

  50.           <td>语文</td>
    51. 

  51.           <td>英语</td>
    52. 

  52.           <td>电脑</td>
    53. 

  53.           <td>数学</td>
    54. 

  54.         </tr>
    55. 

  55.         <tr>
    56. 

  56.           <!-- <td></td> -->
    57. 

  57.           <td>语文</td>
    58. 

  58.           <td>语文</td>
    59. 

  59.           <td>语文</td>
    60. 

  60.           <td>语文</td>
    61. 

  61.           <td>语文</td>
    62. 

  62.         </tr>
    63. 

  63.         <tr>
    64. 

  64.           <td colspan="6" align="center">中午休息</td>
    65. 

  65.           <!-- <td></td>
    66. 

  66.           <td></td>
    67. 

  67.           <td></td>
    68. 

  68.           <td></td>
    69. 

  69.           <td></td> -->
    70. 

  70.         </tr>
    71. 

  71.         <tr>
    72. 

  72.           <td rowspan="3" bgcolor="#e7f7f7">下午</td>
    73. 

  73.           <td>电脑</td>
    74. 

  74.           <td>电脑</td>
    75. 

  75.           <td>电脑</td>
    76. 

  76.           <td>电脑</td>
    77. 

  77.           <td>电脑</td>
    78. 

  78.         </tr>
    79. 

  79.         <tr>
    80. 

  80.           <!-- <td></td> -->
    81. 

  81.           <td>电脑</td>
    82. 

  82.           <td>电脑</td>
    83. 

  83.           <td>电脑</td>
    84. 

  84.           <td>电脑</td>
    85. 

  85.           <td>电脑</td>
    86. 

  86.         </tr>
    87. 

  87.         <tr>
    88. 

  88.           <!-- <td></td> -->
    89. 

  89.           <td>电脑</td>
    90. 

  90.           <td>电脑</td>
    91. 

  91.           <td>电脑</td>
    92. 

  92.           <td>电脑</td>
    93. 

  93.           <td>电脑</td>
    94. 

  94.         </tr>
    95. 

  95.       </tbody>
    96. 

  96.       <tfoot>
    97. 

  97.         <tr bgcolor="#e5e5e5">
    98. 

  98.           <td>备注：</td>
    99. 

  99.           <td colspan="5" align="center">哈哈哈哈</td>
    100. 

  100.           <!-- <td></td>
    101. 

  101.           <td></td>
    102. 

  102.           <td></td>
    103. 

  103.           <td></td> -->
    104. 

  104.         </tr>
    105. 

  105.       </tfoot>
    106. 

  106.     </table>
    107. 

  107.   </body>
    108. 

  108. </html>
    109.

表单

    

  1. <html lang="en">
    2. 

  2.   <head>
    3. 

  3.     <meta charset="UTF-8" />
    4. 

  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    5. 

  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6. 

  6.     <title>Document</title>
    7. 

  7.     <style>
    8. 

  8.       body {
    9. 

  9.         text-align: center;
    10. 

  10.         background-color: #efe;
    11. 

  11.       }
    12. 

  12.       .login {
    13. 

  13.         display: inline-block;
    14. 

  14.         margin-top: 2em;
    15. 

  15.       }
    16. 

  16.       .login h2 {
    17. 

  17.         padding: 0.5em 1.5em;
    18. 

  18.         background-color: lightgreen;
    19. 

  19.         box-shadow: 3px 3px 3px #888;
    20. 

  20.         border-top-left-radius: 1em;
    21. 

  21.         border-bottom-right-radius: 1em;
    22. 

  22.       }
    23. 

  23.       .login input {
    24. 

  24.         border: none;
    25. 

  25.         border-bottom: 1px solid;
    26. 

  26.         background-color: lightblue;
    27. 

  27.         outline: none;
    28. 

  28.       }
    29. 

  29.       .login .button {
    30. 

  30.         border: none;
    31. 

  31.         outline: none;
    32. 

  32.         background-color: seagreen;
    33. 

  33.         color: white;
    34. 

  34.         width: 20%;
    35. 

  35.         height: 2.2em;
    36. 

  36.         margin-top: 1em;
    37. 

  37.         margin-left: auto;
    38. 

  38.       }
    39. 

  39.       .login .reset {
    40. 

  40.         width: 20%;
    41. 

  41.         height: 2.2em;
    42. 

  42.         border: none;
    43. 

  43.         outline: none;
    44. 

  44.         margin-top: 1em;
    45. 

  45.         margin-left: auto;
    46. 

  46.         background-color: seagreen;
    47. 

  47.         color: white;
    48. 

  48.       }
    49. 

  49.     </style>
    50. 

  50.   </head>
    51. 

  51.   <body>
    52. 

  52.     <form action="" method="get" class="login">
    53. 

  53.       <h2>用户注册</h2>
    54. 

  54.       <div>
    55. 

  55.         <label for="username">用户名：</label
    56. 

  56.         ><input
    57. 

  57.           type="text"
    58. 

  58.           name="username"
    59. 

  59.           value=""
    60. 

  60.           id="username"
    61. 

  61.           placeholder="不能为空"
    62. 

  62.           required
    63. 

  63.         />
    64. 

  64.       </div>
    65. 

  65.       <br />
    66. 

  66.       <div>
    67. 

  67.         <label for="password">密码：</label>
    68. 

  68.         <input
    69. 

  69.           type="text"
    70. 

  70.           name="password"
    71. 

  71.           value=""
    72. 

  72.           placeholder="不能为空"
    73. 

  73.           required
    74. 

  74.         />
    75. 

  75.         <button onclick="showPassword(this,this.form.password)">查看</button>
    76. 

  76.       </div>
    77. 

  77.       <br />
    78. 

  78.       <div>
    79. 

  79.         <label for="email">邮箱：</label>
    80. 

  80.         <input
    81. 

  81.           type="email"
    82. 

  82.           name="email"
    83. 

  83.           id="email"
    84. 

  84.           placeholder="不能为空"
    85. 

  85.           required
    86. 

  86.         />
    87. 

  87.       </div>
    88. 

  88.       <br />
    89. 

  89.       <div>
    90. 

  90.         <label for="secret">性别：</label>
    91. 

    92. 

  92.         <input type="radio" name="sex" id="male" value="male" />
    93. 

  93.         <label for="male">男</label>
    94. 

    95. 

  95.         <input type="radio" name="sex" id="female" value="female" />
    96. 

  96.         <label for="female">女</label>
    97. 

    98. 

  98.         <input
    99. 

  99.           type="radio"
    100. 

  100.           type="radio"
    101. 

  101.           name="sex"
    102. 

  102.           id="secret"
    103. 

  103.           value="secret"
    104. 

  104.           checked
    105. 

  105.         /><label for="secret">保密</label>
    106. 

  106.       </div>
    107. 

  107.       <br />
    108. 

  108.       <div>
    109. 

  109.         <label for="">爱好：</label>
    110. 

  110.         <input type="checkbox" name="hobby[]" id="game" value="game" checked />
    111. 

  111.         <label for="game">游戏</label>
    112. 

    113. 

  113.         <input type="checkbox" name="hobby[]" id="trave" value="trave" />
    114. 

  114.         <label for="trave">旅游</label>
    115. 

    116. 

  116.         <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
    117. 

  117.         <label for="shoot">摄影</label>
    118. 

    119. 

  119.         <input type="checkbox" name="hobby[]" id="other" value="other" />
    120. 

  120.         <label for="other">其他</label>
    121. 

  121.       </div>
    122. 

  122.       <br />
    123. 

  123.       <div>
    124. 

  124.         <label for="">LOL等级：</label>
    125. 

  125.         <select name="level" id="">
    126. 

  126.           <option value="1">黑铁</option>
    127. 

  127.           <option value="2" selected>青铜</option>
    128. 

  128.           <option value="3">白银</option>
    129. 

  129.         </select>
    130. 

  130.       </div>
    131. 

  131.       <br />
    132. 

  132.       <div>
    133. 

  133.         <button type="submit" class="button">提交</button>
    134. 

  134.         <button type="reset" class="reset">重置</button>
    135. 

  135.         <!-- <button type="button">按钮</button> -->
    136. 

  136.       </div>
    137. 

  137.     </form>
    138. 

  138.     <script>
    139. 

  139.       function showPassword(btn, ele) {
    140. 

  140.         if (ele.type === "password") {
    141. 

  141.           ele.type = "text";
    142. 

  142.           btn.textContent = "隐藏";
    143. 

  143.         } else {
    144. 

  144.           ele.type = "password";
    145. 

  145.           btn.textContent = "显示";
    146. 

  146.         }
    147. 

  147.       }
    148. 

  148.     </script>
    149. 

  149.   </body>
    150. 

  150. </html>
    151.

上一篇： Nginx+Lua+Redis构建高并发Web应用

下一篇： 由数据库的HWM想起的对ArcSDE数据库的性能优化

推荐阅读