Blogger Information
Blog 30
fans 1
comment 0
visits 16320
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML中的table,form元素初体验
moon
Original
584 people have browsed it

table元素

table元素介绍

  • table标签在html中用于生成表格,等重要功能
  • table元素一般由5部分组成<!-- table + caption(标题) + thead(头部) + tbody(内容) + tfoot(脚部) -->
  • 如何用table生成如下表格呢

课程表

  • 实例代码如下
  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 border="1" width=500>
  11. <caption>宁德一种课程表
  12. <thead>
  13. <tr>
  14. <th>时间</th>
  15. <th>周一</th>
  16. <th>周二</th>
  17. <th>周三</th>
  18. <th>周四</th>
  19. <th>周五</th>
  20. <tboday>
  21. <tr>
  22. <td rowspan="4">上午</td>
  23. <td>数学</td>
  24. <td>地理</td>
  25. <td>自然</td>
  26. <td>体育</td>
  27. <td>美术</td>
  28. </tr>
  29. <tr>
  30. <!-- <td>语文</td> -->
  31. <td>数学</td>
  32. <td>地理</td>
  33. <td>自然</td>
  34. <td>体育</td>
  35. <td>美术</td>
  36. </tr>
  37. <tr>
  38. <!-- <td>语文</td> -->
  39. <td>数学</td>
  40. <td>地理</td>
  41. <td>自然</td>
  42. <td>体育</td>
  43. <td>美术</td>
  44. </tr>
  45. <tr>
  46. <!-- <td>语文</td> -->
  47. <td>数学</td>
  48. <td>地理</td>
  49. <td>自然</td>
  50. <td>体育</td>
  51. <td>美术</td>
  52. </tr>
  53. <tr>
  54. <td colspan="6" style="text-align: center;">中 午 休 息</td>
  55. <!-- <td>数学</td> -->
  56. <!-- <td>地理</td> -->
  57. <!-- <td>自然</td> -->
  58. <!-- <td>体育</td> -->
  59. <!-- <td>美术</td> -->
  60. </tr>
  61. <tr>
  62. <td rowspan="4">下午</td>
  63. <td>数学</td>
  64. <td>地理</td>
  65. <td>自然</td>
  66. <td>体育</td>
  67. <td>美术</td>
  68. </tr>
  69. <tr>
  70. <!-- <td>语文</td> -->
  71. <td>数学</td>
  72. <td>地理</td>
  73. <td>自然</td>
  74. <td>体育</td>
  75. <td>美术</td>
  76. </tr>
  77. <tr>
  78. <!-- <td>语文</td> -->
  79. <td>数学</td>
  80. <td>地理</td>
  81. <td>自然</td>
  82. <td>体育</td>
  83. <td>美术</td>
  84. </tr>
  85. <tr>
  86. <!-- <td>语文</td> -->
  87. <td>数学</td>
  88. <td>地理</td>
  89. <td>自然</td>
  90. <td>体育</td>
  91. <td>美术</td>
  92. </tr>
  93. </tboday>
  94. <tboot>
  95. <tr>
  96. <td>备注</td>
  97. <td colspan="5">每天下午15:30-17:30在学校做完作业才可回家</td>
  98. <!-- <td>地理</td> -->
  99. <!-- <td>自然</td> -->
  100. <!-- <td>体育</td> -->
  101. <!-- <td>美术</td> -->
  102. </tr>
  103. </tboot>
  104. </tr>
  105. </thead>
  106. </caption>
  107. </table>
  108. </body>
  109. </html>

form元素

form元素介绍

  • form元素用来生成表单,常用于实现用户注册,等功能
  • form表单一般由<!— form + input(选择输入信息) + select + button(提交表单)+action(指定处理表单程序)部分组成
  • 提交表单有2种请求,get请求和post请求,考虑用户数据安全得情况下一般使用post请求
  • 如何实现如下简单注册呢
    用户注册
  • 实例代码如下
  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. <h2>用户注册</h2>
  11. <form action="verify.php" method="post" style="display: grid; gap: 10px">
  12. <div>
  13. <labal for="username">用户账户</labal>
  14. <input value="admin" type="text" name="username" id="username" required placeholder="至少8位">
  15. </div>
  16. <div>
  17. <label for="passwor">用户密码</label>
  18. <input
  19. type="password"
  20. name="password"
  21. id="password"
  22. placeholder="数字+字母最少6位"
  23. required
  24. >
  25. </div>
  26. <div><label for="mail">用户邮箱</label>
  27. <input require type="email" name="mail" id="mail" placeholder="@mail">
  28. </div>
  29. <div>
  30. <label for="phone">用户手机</label>
  31. <input type="text" pattern="[0-9]" required placeholder="输入11位手机号码">
  32. </div>
  33. <div>
  34. <label for="male">性别</label>
  35. <input checked type="radio" name="gender" id="male" valve="male"><label for="male"></label>
  36. <input type="radio" name="gender" id="female" valve="female"><label for="female"></label>
  37. </div>
  38. <div>
  39. <label for=""></label>
  40. <input type="checkbox" name="select[]" id="game" value="game"><label for="game">游戏</label>
  41. <input type="checkbox" name="select[]" id="music" value="music" ><label for="music">音乐</label>
  42. <input type="checkbox" name="select[]" id="run" value="run"><label for="run">跑步</label>
  43. <input type="checkbox" name="select[]" id="travel" value="travel"><label for="travel">旅游</label>
  44. </div>
  45. <button type="submit" style="width:60px">提交</button>
  46. </form>
  47. </body>
  48. </html>
Correcting teacher:PHPzPHPz

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