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

一个简易的课程表和注册表单

程序员文章站 2022-05-21 23:29:48
...

一个简易课程表和注册表单

  • 课程表代码
    

  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.     <style>
    9. 

  9.       table {
    10. 

  10.         color: green;
    11. 

  11.         text-align: center;
    12. 

  12.         font-size: 15px;
    13. 

  13.       }
    14. 

  14.       table caption {
    15. 

  15.         color: red;
    16. 

  16.         background-color: blue;
    17. 

  17.       }
    18. 

  18.     </style>
    19. 

  19.   </head>
    20. 

  20.   <body>
    21. 

  21.     <!-- table>caption+(thead>tr>th{x}*8)+(tbody>tr*8>td{x}*8)+(tfoot>tr>td{x}*8)>div -->
    22. 

  22.     <table
    23. 

  23.       border="20"
    24. 

  24.       width="450"
    25. 

  25.       cellspacing="0"
    26. 

  26.       cellpadding="5"
    27. 

  27.       align="center"
    28. 

  28.     >
    29. 

  29.       <caption>
    30. 

  30.         xxx小学课表
    31. 

  31.       </caption>
    32. 

  32.       <thead>
    33. 

  33.         <tr>
    34. 

  34.           <th>时间</th>
    35. 

  35.           <th>周一</th>
    36. 

  36.           <th>周二</th>
    37. 

  37.           <th>周三</th>
    38. 

  38.           <th>周四</th>
    39. 

  39.           <th>周五</th>
    40. 

  40.           <th>周六</th>
    41. 

  41.           <th>周日</th>
    42. 

  42.         </tr>
    43. 

  43.       </thead>
    44. 

  44.       <tbody>
    45. 

  45.         <tr>
    46. 

  46.           <td rowspan="4">上午</td>
    47. 

  47.           <td>数学</td>
    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>x</td> -->
    57. 

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

  58.           <td>法制</td>
    59. 

  59.           <td>科学</td>
    60. 

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

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

  62.           <td>假期</td>
    63. 

  63.           <td>假期</td>
    64. 

  64.         </tr>
    65. 

  65.         <tr>
    66. 

  66.           <!-- <td>x</td> -->
    67. 

  67.           <td>音乐</td>
    68. 

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

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

  70.           <td>电脑</td>
    71. 

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

  72.           <td>假期</td>
    73. 

  73.           <td>假期</td>
    74. 

  74.         </tr>
    75. 

  75.         <tr>
    76. 

  76.           <!-- <td>x</td> -->
    77. 

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

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

  79.           <td>语文</td>
    80. 

  80.           <td>语文</td>
    81. 

  81.           <td>音乐</td>
    82. 

  82.           <td>假期</td>
    83. 

  83.           <td>假期</td>
    84. 

  84.         </tr>
    85. 

  85.         <tr>
    86. 

  86.           <td colspan="8">中午休息</td>
    87. 

  87.           <!-- <td>x</td>
    88. 

  88.           <td>x</td>
    89. 

  89.           <td>x</td>
    90. 

  90.           <td>x</td>
    91. 

  91.           <td>x</td>
    92. 

  92.           <td>x</td>
    93. 

  93.           <td>x</td> -->
    94. 

  94.         </tr>
    95. 

  95.         <tr>
    96. 

  96.           <td rowspan="3">下午</td>
    97. 

  97.           <td>数学</td>
    98. 

  98.           <td>语文</td>
    99. 

  99.           <td>英语</td>
    100. 

  100.           <td>数学</td>
    101. 

  101.           <td>数学</td>
    102. 

  102.           <td>假期</td>
    103. 

  103.           <td>假期</td>
    104. 

  104.         </tr>
    105. 

  105.         <tr>
    106. 

  106.           <!-- <td>x</td> -->
    107. 

  107.           <td>数学</td>
    108. 

  108.           <td>数学</td>
    109. 

  109.           <td>数学</td>
    110. 

  110.           <td>数学</td>
    111. 

  111.           <td>数学</td>
    112. 

  112.           <td>假期</td>
    113. 

  113.           <td>假期</td>
    114. 

  114.         </tr>
    115. 

  115.         <tr>
    116. 

  116.           <!-- <td>x</td> -->
    117. 

  117.           <td>英语</td>
    118. 

  118.           <td>数学</td>
    119. 

  119.           <td>数学</td>
    120. 

  120.           <td>数学</td>
    121. 

  121.           <td>数学</td>
    122. 

  122.           <td>假期</td>
    123. 

  123.           <td>假期</td>
    124. 

  124.         </tr>
    125. 

  125.       </tbody>
    126. 

  126.       <tfoot>
    127. 

  127.         <tr>
    128. 

  128.           <td>备注：</td>
    129. 

  129.           <td colspan="7">每天下午15:30-17:30在学校写完作业才可以回家</td>
    130. 

  130.           <!-- <td>x</td>
    131. 

  131.           <td>x</td>
    132. 

  132.           <td>x</td>
    133. 

  133.           <td>x</td>
    134. 

  134.           <td>x</td>
    135. 

  135.           <td>x</td> -->
    136. 

  136.         </tr>
    137. 

  137.       </tfoot>
    138. 

  138.     </table>
    139. 

  139.   </body>
    140. 

  140. </html>
    141.

预览图：一个简易的课程表和注册表单

  • 注册表单
    

  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>form</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <form action="verify.php" method="post">
    11. 

  11.       <fieldest class="group">
    12. 

  12.         <legend>用户注册：</legend>
    13. 

  13.         <div>
    14. 

  14.           <label for="username">username:</label
    15. 

  15.           ><input
    16. 

  16.             type="text"
    17. 

  17.             name="username"
    18. 

  18.             id="username"
    19. 

  19.             value=""
    20. 

  20.             placeholder="please input username"
    21. 

  21.             required
    22. 

  22.             autofocus
    23. 

  23.           />
    24. 

  24.         </div>
    25. 

  25.         <div>
    26. 

  26.           <label for="password">password:</label
    27. 

  27.           ><input
    28. 

  28.             type="password"
    29. 

  29.             name="password"
    30. 

  30.             id="password"
    31. 

  31.             value=""
    32. 

  32.             placeholder="please input password"
    33. 

  33.             required
    34. 

  34.           />
    35. 

  35.         </div>
    36. 

  36.         <div>
    37. 

  37.           <label for="email">email</label
    38. 

  38.           ><input
    39. 

  39.             type="email"
    40. 

  40.             name="email"
    41. 

  41.             id="email"
    42. 

  42.             value="xxxxxx@php.cn"
    43. 

  43.             placeholder="please input email"
    44. 

  44.             required
    45. 

  45.           />
    46. 

  46.         </div>
    47. 

  47.         <div>
    48. 

  48.           <label for="secret">请选择性别：</label>
    49. 

  49.           <input type="radio" name="gender" id="male" value="male" /><label
    50. 

  50.             for="male"
    51. 

  51.             >男</label
    52. 

  52.           >
    53. 

  53.           <input type="radio" name="gender" id="female" value="female" /><label
    54. 

  54.             for="female"
    55. 

  55.             >女</label
    56. 

  56.           >
    57. 

  57.           <input
    58. 

  58.             type="radio"
    59. 

  59.             name="gender"
    60. 

  60.             id="secret"
    61. 

  61.             value="secret"
    62. 

  62.             checked
    63. 

  63.           /><label for="secret">保密</label>
    64. 

  64.         </div>
    65. 

  65.         <div>
    66. 

  66.           <label for="">爱好：</label>
    67. 

    68. 

  68.           <input
    69. 

  69.             type="checkbox"
    70. 

  70.             name="hobby[]"
    71. 

  71.             id="game"
    72. 

  72.             value="game"
    73. 

  73.             checked
    74. 

  74.           />
    75. 

  75.           <label for="game">游戏</label>
    76. 

  76.           <input
    77. 

  77.             type="checkbox"
    78. 

  78.             name="hobby[]"
    79. 

  79.             id="travel"
    80. 

  80.             value="travel"
    81. 

  81.             checked
    82. 

  82.           />
    83. 

  83.           <label for="travel">旅游</label>
    84. 

  84.           <input
    85. 

  85.             type="checkbox"
    86. 

  86.             name="hobby[]"
    87. 

  87.             id="shoot"
    88. 

  88.             value="shoot"
    89. 

  89.             checked
    90. 

  90.           />
    91. 

  91.           <label for="shoot">摄影</label>
    92. 

  92.         </div>
    93. 

  93.         <div>
    94. 

  94.           <label for="vip">请选择要开通的等级：</label>
    95. 

  95.           <select name="vip" id="vip">
    96. 

  96.             <option value="1">vip</option>
    97. 

  97.             <option value="2">svip</option>
    98. 

  98.             <option value="3" selected>life time vip</option>
    99. 

  99.           </select>
    100. 

  100.         </div>
    101. 

  101.         <button type="submit">提交</button>
    102. 

  102.       </fieldest>
    103. 

  103.     </form>
    104. 

  104.   </body>
    105. 

  105. </html>
    106.

预览图：一个简易的课程表和注册表单

上一篇： 一个FFMPEG视频转换的PHP类

下一篇： js闭包/类创建/解构赋值

推荐阅读