Blogger Information
Blog 20
fans 0
comment 0
visits 11675
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
课时表格+用户注册表单
愿情的博客
Original
620 people have browsed it

一.表格

表格

  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. width="80%"
  13. align="center"
  14. cellspacing="0"
  15. cellpadding="5"
  16. >
  17. <caption style="font-weight: bolder; margin-bottom: 1em">
  18. 课时表
  19. </caption>
  20. <thead>
  21. <tr bgcolor="lightcyan">
  22. <th colspan="2">时间</th>
  23. <th>星期一</th>
  24. <!--td-->
  25. <th>星期二</th>
  26. <th>星期三</th>
  27. <th>星期四</th>
  28. <th>星期五</th>
  29. <!-- <th></th> -->
  30. </tr>
  31. </thead>
  32. <tbody>
  33. <tr>
  34. <th rowspan="3">上午</th>
  35. <th>9:00-9:40</th>
  36. <th>语文</th>
  37. <th>数学</th>
  38. <th>英语</th>
  39. <th>音乐</th>
  40. <th>体育</th>
  41. <!-- <th></th> -->
  42. </tr>
  43. <tr>
  44. <!-- <th></th> -->
  45. <th>9:55-10:35</th>
  46. <th>语文</th>
  47. <th>数学</th>
  48. <th>英语</th>
  49. <th>音乐</th>
  50. <th>体育</th>
  51. </tr>
  52. <tr>
  53. <!-- <th></th> -->
  54. <th>10:50-11:30</th>
  55. <th>语文</th>
  56. <th>英语</th>
  57. <th>数学</th>
  58. <th>音乐</th>
  59. <th>体育</th>
  60. </tr>
  61. <tr>
  62. <th colspan="7">午休(11:30-13:00)</th>
  63. <!-- <th></th>
  64. <th></th>
  65. <th></th>
  66. <th></th>
  67. <th></th>
  68. <th></th> -->
  69. </tr>
  70. <tr>
  71. <th
  72. rowspan="2
  73. "
  74. >
  75. 下午
  76. </th>
  77. <th>13:00-13:40</th>
  78. <th>语文</th>
  79. <th>英语</th>
  80. <th>数学</th>
  81. <th>音乐</th>
  82. <th>体育</th>
  83. </tr>
  84. <tr>
  85. <th>13:55-14:35</th>
  86. <th>数学</th>
  87. <th>英语</th>
  88. <th>语文</th>
  89. <th>体育</th>
  90. <th>音乐</th>
  91. <!-- <th></th> -->
  92. </tr>
  93. </tbody>
  94. <tfoot>
  95. <tr>
  96. <th>备注</th>
  97. <th colspan="6">每天16:00之前提交作业</th>
  98. <!-- <>> -->
  99. <!-- <th></th> -->
  100. <!-- <th></th> -->
  101. <!-- <th></th> -->
  102. <!-- <th></th> -->
  103. </tr>
  104. </tfoot>
  105. </table>
  106. </body>
  107. </html>


二.用户注册表单

用户表单注册

  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. <!-- get:数据在url地址中 -->
  11. <!-- post:数据在请求体中 -->
  12. <form action="" style="display: grid; gap: 0.5em" method="POST">
  13. <fieldset>
  14. <legend>必填项</legend>
  15. <!-- 文本输入框 -->
  16. <div>
  17. <label for="username">账号: </label>
  18. <input
  19. type="text"
  20. id="username"
  21. autofocus
  22. required
  23. placeholder="必须是6-8位"
  24. />
  25. <!-- <label>账号:<input type="text"></label> -->
  26. </div>
  27. <div>
  28. <label for="password">密码: </label>
  29. <input
  30. type="password"
  31. id="password"
  32. required
  33. placeholder="必须是字母+数字 "
  34. />
  35. </div>
  36. <div>
  37. <label for="email">邮箱</label>
  38. <input
  39. type="email"
  40. name="email"
  41. id="email"
  42. placeholder="demo@email.com"
  43. />
  44. </div>
  45. </fieldset>
  46. <div>
  47. <!-- 单选按钮:多选 -->
  48. <label for="secre">性别:</label>
  49. <input type="radio" name="gender" value="male" id="male" /><label
  50. for="male"
  51. ></label
  52. >
  53. <input type="radio" name="gender" value="female" id="female" /><label
  54. for="female"
  55. ></label
  56. >
  57. <input
  58. type="radio"
  59. name="gender"
  60. value="secre"
  61. id="secre"
  62. checked
  63. /><label for="secret">保密</label>
  64. </div>
  65. <div>
  66. <!-- 复选框 -->
  67. <label>爱好:</label>
  68. <!-- 因为允许同时提交多个值,所以name属性要写成数组格式 -->
  69. <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  70. for="programmer"
  71. >编程</label
  72. >
  73. <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  74. >旅游</label
  75. >
  76. <input
  77. type="checkbox"
  78. name="hobby[]"
  79. id="play basketball"
  80. checked
  81. /><label for="play basketball">打篮球</label>
  82. <input type="checkbox" name="hobby[]" id="shot" /><label for="shot"
  83. >摄影</label
  84. >
  85. <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  86. >游戏</label
  87. >
  88. <input type="checkbox" name="hobby[]" id="listen to music" /><label
  89. for="listen to music"
  90. >听音乐</label
  91. >
  92. </div>
  93. <!-- 下拉列表 -->
  94. <select name="level" id="">
  95. <option value="1">铜牌会员</option>
  96. <option value="2">银牌会员</option>
  97. <option value="3" selected>金牌会员</option>
  98. <option value="4">钻石会员</option>
  99. </select>
  100. <!-- datalist -->
  101. <!-- 相当于输入框+下拉列表-->
  102. <!-- input+select -->
  103. <div>
  104. <label for="">关键字</label>
  105. <input type="search" name="search" id="" list="my-key" />
  106. <datalist id="my-key">
  107. <option value="html"></option>
  108. <option value="css"></option>
  109. <option value="javacript"></option>
  110. </datalist>
  111. </div>
  112. <div>
  113. <button type="submit">提交</button>
  114. </div>
  115. <!-- <div><button>提交</button></div> -->
  116. </form>
  117. </body>
  118. </html>
Correcting teacher:天蓬老师天蓬老师

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post