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

前端之表格和表单的使用

程序员文章站 2022-04-28 22:38:03
...

表格

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    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>学军中学高二班课程表</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <table border="1" align="center" width="600">
    11. 

  11.       <!-- 表格标题  -->
    12. 

  12.       <caption>
    13. 

  13.         学军中学高二班课程表
    14. 

  14.       </caption>
    15. 

  15.       <thead>
    16. 

  16.         <tr>
    17. 

  17.           <th>时间</th>
    18. 

  18.           <th>周一</th>
    19. 

  19.           <th>周二</th>
    20. 

  20.           <th>周三</th>
    21. 

  21.           <th>周四</th>
    22. 

  22.           <th>周五</th>
    23. 

  23.         </tr>
    24. 

  24.       </thead>
    25. 

  25.       <tbody align="center">
    26. 

  26.         <tr>
    27. 

  27.           <td rowspan="4" bgcolor="lightblue">上午</td>
    28. 

  28.           <td>语文</td>
    29. 

  29.           <td>数学</td>
    30. 

  30.           <td>英语</td>
    31. 

  31.           <td>编程</td>
    32. 

  32.           <td>体育</td>
    33. 

  33.         </tr>
    34. 

  34.         <tr>
    35. 

  35.           <td>数学</td>
    36. 

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

  37.           <td>编程</td>
    38. 

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

  39.           <td>语文</td>
    40. 

  40.         </tr>
    41. 

  41.         <tr>
    42. 

  42.           <td>音乐</td>
    43. 

  43.           <td>英语</td>
    44. 

  44.           <td>语文</td>
    45. 

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

  46.           <td>编程</td>
    47. 

  47.         </tr>
    48. 

  48.         <tr>
    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 colspan="6" align="center" bgcolor="red">中午午休时间，12:00-14:00，禁止外出嬉戏！</td>
    57. 

  57.         </tr>
    58. 

  58.         <tr>
    59. 

  59.           <td rowspan="3" bgcolor="lightblue">下午</td>
    60. 

  60.           <td>数学</td>
    61. 

  61.           <td>编程</td>
    62. 

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

  63.           <td>体育</td>
    64. 

  64.           <td>英语</td>
    65. 

  65.         </tr>
    66. 

  66.         <tr>
    67. 

  67.           <td>语文</td>
    68. 

  68.           <td>英语</td>
    69. 

  69.           <td>编程</td>
    70. 

  70.           <td>数学</td>
    71. 

  71.           <td>美术</td>
    72. 

  72.         </tr>
    73. 

  73.         <tr>
    74. 

  74.           <td>编程</td>
    75. 

  75.           <td>音乐</td>
    76. 

  76.           <td>语文</td>
    77. 

  77.           <td>英语</td>
    78. 

  78.           <td>数学</td>
    79. 

  79.         </tr>
    80. 

  80.       </tbody>
    81. 

  81.       <tfoot align="center">
    82. 

  82.         <tr>
    83. 

  83.           <td bgcolor="lightgrey">备注</td>
    84. 

  84.           <td colspan="5" bgcolor="lightgrey">每天下午15:30-17:30在校写完作业才可以回家</td>
    85. 

  85.         </tr>
    86. 

  86.       </tfoot>
    87. 

  87.     </table>
    88. 

  88.   </body>
    89. 

  89. </html>
    90.

前端之表格和表单的使用

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="zh-CN">
    3. 

  3.   <head>
    4. 

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

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

  6.     <meta
    7. 

  7.       name="viewport"
    8. 

  8.       content="width=
    9. 

  9.     , initial-scale=1.0"
    10. 

  10.     />
    11. 

  11.     <title>注册账号</title>
    12. 

  12.   </head>
    13. 

  13.   <body>
    14. 

  14.     <form action="verify.php" method="post" style="display: grid; gap: 10px">
    15. 

  15.       <div>
    16. 

  16.         <label for="username">用户名：</label>
    17. 

  17.         <input type="text" name="username" id="username" placeholder="输入用户名" required />
    18. 

  18.       </div>
    19. 

  19.       <div>
    20. 

  20.         <label for="password">密码：</label>
    21. 

  21.         <input type="password" name="password" id="password" placeholder="请输入密码" />
    22. 

  22.       </div>
    23. 

  23.       <div>
    24. 

  24.         <label for="email">邮箱：</label>
    25. 

  25.         <input type="email" name="email" id="email" />
    26. 

  26.       </div>
    27. 

  27.       <div>
    28. 

  28.         <label for="secret">性别：</label>
    29. 

  29.         <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
    30. 

  30.         <input type="radio" name="gender" id="female" value="female" /><label for="female">女</label>
    31. 

  31.       </div>
    32. 

  32.       <div>
    33. 

  33.         <label for="">爱好：</label>
    34. 

  34.         <input type="checkbox" name="hobby[]" id="game" value="game" /><label for="game">游戏</label>
    35. 

  35.         <input type="checkbox" name="hobby[]" id="book" value="book" /><label for="book">读书</label>
    36. 

  36.         <input type="checkbox" name="hobby[]" id="movie" value="movie" /><label for="movie">影视</label>
    37. 

  37.       </div>
    38. 

  38.       <div>
    39. 

  39.         <button type="submit">注册</button>
    40. 

  40.         <button type="reset">重置</button>
    41. 

  41.       </div>
    42. 

  42.     </form>
    43. 

  43.   </body>
    44. 

  44. </html>
    45.

前端之表格和表单的使用

上一篇： PHP异步调用的实现方式

下一篇： centos修改root密码的方法

推荐阅读