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

表格和表单的应用

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

表格

  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>
  91. <input type="radio" name="sex" id="male" value="male" />
  92. <label for="male"></label>
  93. <input type="radio" name="sex" id="female" value="female" />
  94. <label for="female"></label>
  95. <input
  96. type="radio"
  97. type="radio"
  98. name="sex"
  99. id="secret"
  100. value="secret"
  101. checked
  102. /><label for="secret">保密</label>
  103. </div>
  104. <br />
  105. <div>
  106. <label for="">爱好:</label>
  107. <input type="checkbox" name="hobby[]" id="game" value="game" checked />
  108. <label for="game">游戏</label>
  109. <input type="checkbox" name="hobby[]" id="trave" value="trave" />
  110. <label for="trave">旅游</label>
  111. <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
  112. <label for="shoot">摄影</label>
  113. <input type="checkbox" name="hobby[]" id="other" value="other" />
  114. <label for="other">其他</label>
  115. </div>
  116. <br />
  117. <div>
  118. <label for="">LOL等级:</label>
  119. <select name="level" id="">
  120. <option value="1">黑铁</option>
  121. <option value="2" selected>青铜</option>
  122. <option value="3">白银</option>
  123. </select>
  124. </div>
  125. <br />
  126. <div>
  127. <button type="submit" class="button">提交</button>
  128. <button type="reset" class="reset">重置</button>
  129. <!-- <button type="button">按钮</button> -->
  130. </div>
  131. </form>
  132. <script>
  133. function showPassword(btn, ele) {
  134. if (ele.type === "password") {
  135. ele.type = "text";
  136. btn.textContent = "隐藏";
  137. } else {
  138. ele.type = "password";
  139. btn.textContent = "显示";
  140. }
  141. }
  142. </script>
  143. </body>
  144. </html>