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

详谈HTML表格和表单

程序员文章站 2022-05-25 07:50:51
...

Table(表格)元素

Table元素介绍

  • Table可以在HTML中生成表格

  • 由caption(标题) + thead（头部） + tbody(内容) + tfoot(脚部)组成，大致形式为

      

    1. <table>
      2. 

    2.     <caption></caption>
      3. 

    3.     <thead></thead>
      4. 

    4.     <tbody>
      5. 

    5.       <tr>
      6. 

    6.         <td></td>
      7. 

    7.       </tr>
      8. 

    8.     </tbody>
      9. 

    9.     <tfoot>
      10. 

    10.       <tr>
      11. 

    11.         <td></td>
      12. 

    12.       </tr>
      13. 

    13.     </tfoot>
      14. 

    14.   </table>
      15.

    Table元素实践

  • 用Table生成课程表，代码如下(这里引入了LayUI的css文件来做简单的美化)

      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="en">
      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.   <!-- 引入 layui.css -->
      9. 

    9.   <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
      10. 

      11. 

    11.   <!-- 引入 layui.js -->
      12. 

    12.   <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
      13. 

    13. </head>
      14. 

    14. <body>
      15. 

    15.   <table class="layui-table" lay-even style="width: 700px; height: 500px">
      16. 

    16.     <caption style="font-size: 20px">
      17. 

    17.       课程表
      18. 

    18.     </caption>
      19. 

    19.     <thead>
      20. 

    20.       <tr>
      21. 

    21.         <th colspan="2" style="text-align: center">时间</th>
      22. 

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

    23.         <th>周二</th>
      24. 

    24.         <th>周三</th>
      25. 

    25.         <th>周四</th>
      26. 

    26.         <th>周五</th>
      27. 

    27.       </tr>
      28. 

    28.     </thead>
      29. 

    29.     <tbody>
      30. 

    30.       <tr>
      31. 

    31.         <td rowspan="4" style="text-align: center">上午</td>
      32. 

    32.         <td>8:00-8:50</td>
      33. 

    33.         <td>数学</td>
      34. 

    34.         <td>语文</td>
      35. 

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

    36.         <td>体育</td>
      37. 

    37.         <td>音乐</td>
      38. 

    38.       </tr>
      39. 

    39.       <tr>
      40. 

    40.         <td>9:00-9:50</td>
      41. 

    41.         <td>数学</td>
      42. 

    42.         <td>语文</td>
      43. 

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

    44.         <td>体育</td>
      45. 

    45.         <td>音乐</td>
      46. 

    46.       </tr>
      47. 

    47.       <tr>
      48. 

    48.         <td>10:00-10:50</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>11:00-11:50</td>
      57. 

    57.         <td>数学</td>
      58. 

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

    59.         <td>英语</td>
      60. 

    60.         <td>体育</td>
      61. 

    61.         <td>音乐</td>
      62. 

    62.       </tr>
      63. 

    63.       <tr>
      64. 

    64.         <td colspan="7" style="text-align: center">中午</td>
      65. 

    65.       </tr>
      66. 

    66.       <tr>
      67. 

    67.         <td rowspan="3" style="text-align: center">下午</td>
      68. 

    68.         <td>14:00-14:50</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>15:00-15:50</td>
      77. 

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

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

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

    80.         <td>体育</td>
      81. 

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

    82.       </tr>
      83. 

    83.       <tr>
      84. 

    84.         <td>16:00-16:50</td>
      85. 

    85.         <td>数学</td>
      86. 

    86.         <td>语文</td>
      87. 

    87.         <td>英语</td>
      88. 

    88.         <td>体育</td>
      89. 

    89.         <td>音乐</td>
      90. 

    90.       </tr>
      91. 

    91.     </tbody>
      92. 

    92.     <tfoot>
      93. 

    93.       <tr>
      94. 

    94.         <td colspan="7" style="text-align: center">
      95. 

    95.           备注：体育课被数学老师占了
      96. 

    96.         </td>
      97. 

    97.       </tr>
      98. 

    98.     </tfoot>
      99. 

    99.   </table>
      100. 

    100. </body>
      101. 

    101. </html>
      102.

    页面展示

    详谈HTML表格和表单

Form(表单)元素

Form元素介绍

  • Form元素用来生成表单,常用于实现用户注册,等功能

  • 一般由action、input元素和button元素组成，action实现请求处理表单的程序，input实现向表单内添加数据，button实现提交数据。

  • 而input中同样存在很多属性，如name定义input中数据的名称，type定义数据类型，value用来设置数据的默认值等。

  • button中只有type为submit时才能实现提交。

  • 提交表单有两种请求Get和Post，Post相对于Get可以在URL中隐藏数据信息，更加安全。

    Form元素实践

  • 用Form生成一个表单,代码如下(这里同样引入了LayUI的css文件来做简单的美化)

      

    1. <!DOCTYPE html>
      2. 

    2. <html lang="en">
      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.   <!-- 引入 layui.css -->
      9. 

    9.   <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" />
      10. 

      11. 

    11.   <!-- 引入 layui.js -->
      12. 

    12.   <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
      13. 

    13. </head>
      14. 

    14. <body>
      15. 

    15.   <form action="" class="layui-form" style="width: 700px;height: 700px;">
      16. 

    16.     <div class="layui-form-item">
      17. 

    17.   <label class="layui-form-label">用户名</label>
      18. 

    18.   <div class="layui-input-block">
      19. 

    19.     <input type="text" name="userName" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
      20. 

    20.   </div>
      21. 

    21.    <div class="layui-form-item">
      22. 

    22.   <label class="layui-form-label">密码</label>
      23. 

    23.   <div class="layui-input-inline">
      24. 

    24.     <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
      25. 

    25.   </div>
      26. 

    26.   <div class="layui-form-item">
      27. 

    27.   <label class="layui-form-label">复选框</label>
      28. 

    28.   <div class="layui-input-block">
      29. 

    29.     <input type="checkbox" name="like[write]" title="写作">
      30. 

    30.     <input type="checkbox" name="like[read]" title="阅读" checked>
      31. 

    31.     <input type="checkbox" name="like[dai]" title="发呆">
      32. 

    32.   </div>
      33. 

    33. </div>
      34. 

    34. <div class="layui-form-item">
      35. 

    35.   <label class="layui-form-label">单选框</label>
      36. 

    36.   <div class="layui-input-block">
      37. 

    37.     <input type="radio" name="sex" value="男" title="男" checked>
      38. 

    38.     <input type="radio" name="sex" value="女" title="女">
      39. 

    39.   </div>
      40. 

    40. </div>
      41. 

    41. <div class="layui-form-item">
      42. 

    42.   <div class="layui-input-block">
      43. 

    43.     <button type="submit" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      44. 

    44.   </div>
      45. 

    45. </div>
      46. 

    46.   </form>
      47. 

    47. </body>
      48. 

    48. </html>
      49.

    页面展示

    详谈HTML表格和表单

上一篇： 媒体查询、定位与Flex布局

下一篇： Rem+vw布局及Grid属性和应用

推荐阅读