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

HTML中的table,form元素初体验

程序员文章站 2022-05-30 16:15:51
...

table元素

table元素介绍

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

HTML中的table,form元素初体验

  • 实例代码如下
  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请求
  • 如何实现如下简单注册呢
    HTML中的table,form元素初体验
  • 实例代码如下
  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>