博客列表 >前端之表格和表单的使用

前端之表格和表单的使用

星辰的博客
星辰的博客原创
2021年12月23日 14:03:45368浏览

表格

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>学军中学高二班课程表</title>
  8. </head>
  9. <body>
  10. <table border="1" align="center" width="600">
  11. <!-- 表格标题 -->
  12. <caption>
  13. 学军中学高二班课程表
  14. </caption>
  15. <thead>
  16. <tr>
  17. <th>时间</th>
  18. <th>周一</th>
  19. <th>周二</th>
  20. <th>周三</th>
  21. <th>周四</th>
  22. <th>周五</th>
  23. </tr>
  24. </thead>
  25. <tbody align="center">
  26. <tr>
  27. <td rowspan="4" bgcolor="lightblue">上午</td>
  28. <td>语文</td>
  29. <td>数学</td>
  30. <td>英语</td>
  31. <td>编程</td>
  32. <td>体育</td>
  33. </tr>
  34. <tr>
  35. <td>数学</td>
  36. <td>英语</td>
  37. <td>编程</td>
  38. <td>体育</td>
  39. <td>语文</td>
  40. </tr>
  41. <tr>
  42. <td>音乐</td>
  43. <td>英语</td>
  44. <td>语文</td>
  45. <td>数学</td>
  46. <td>编程</td>
  47. </tr>
  48. <tr>
  49. <td>编程</td>
  50. <td>美术</td>
  51. <td>语文</td>
  52. <td>英语</td>
  53. <td>数学</td>
  54. </tr>
  55. <tr>
  56. <td colspan="6" align="center" bgcolor="red">中午午休时间,12:00-14:00,禁止外出嬉戏!</td>
  57. </tr>
  58. <tr>
  59. <td rowspan="3" bgcolor="lightblue">下午</td>
  60. <td>数学</td>
  61. <td>编程</td>
  62. <td>语文</td>
  63. <td>体育</td>
  64. <td>英语</td>
  65. </tr>
  66. <tr>
  67. <td>语文</td>
  68. <td>英语</td>
  69. <td>编程</td>
  70. <td>数学</td>
  71. <td>美术</td>
  72. </tr>
  73. <tr>
  74. <td>编程</td>
  75. <td>音乐</td>
  76. <td>语文</td>
  77. <td>英语</td>
  78. <td>数学</td>
  79. </tr>
  80. </tbody>
  81. <tfoot align="center">
  82. <tr>
  83. <td bgcolor="lightgrey">备注</td>
  84. <td colspan="5" bgcolor="lightgrey">每天下午15:30-17:30在校写完作业才可以回家</td>
  85. </tr>
  86. </tfoot>
  87. </table>
  88. </body>
  89. </html>

课程表效果演示

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta
  7. name="viewport"
  8. content="width=
  9. , initial-scale=1.0"
  10. />
  11. <title>注册账号</title>
  12. </head>
  13. <body>
  14. <form action="verify.php" method="post" style="display: grid; gap: 10px">
  15. <div>
  16. <label for="username">用户名:</label>
  17. <input type="text" name="username" id="username" placeholder="输入用户名" required />
  18. </div>
  19. <div>
  20. <label for="password">密码:</label>
  21. <input type="password" name="password" id="password" placeholder="请输入密码" />
  22. </div>
  23. <div>
  24. <label for="email">邮箱:</label>
  25. <input type="email" name="email" id="email" />
  26. </div>
  27. <div>
  28. <label for="secret">性别:</label>
  29. <input type="radio" name="gender" id="male" value="male" /><label for="male"></label>
  30. <input type="radio" name="gender" id="female" value="female" /><label for="female"></label>
  31. </div>
  32. <div>
  33. <label for="">爱好:</label>
  34. <input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">游戏</label>
  35. <input type="checkbox" name="hobby[]" id="book" value="book" /><label for="book">读书</label>
  36. <input type="checkbox" name="hobby[]" id="movie" value="movie" /><label for="movie">影视</label>
  37. </div>
  38. <div>
  39. <button type="submit">注册</button>
  40. <button type="reset">重置</button>
  41. </div>
  42. </form>
  43. </body>
  44. </html>

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议