Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML 表格表单实战练习小结
Blogger Information
Blog 14
fans 0
comment 2
visits 12655
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML 表格表单实战练习小结
JKY辉哥
Original
2409 people have browsed it

1.表格基础知识

  • 1.1数据标签:
序号 标签 描述
1 <table> 定义表格, 必选
2 <tr> 定义表格中的行, 必选
3 <th> 定义表格头部中的单元格, 必选
4 <td> 定义表格主体中的单元格, 必选
  • 1.2结构标签:
序号 标签 描述
1 <option> 定义表格标题, 可选
2 <thead> 定义表格头格, 只需定义一次, 可选
3 <tbody> 定义表格主体, 允许定义多次, 可选
4 <tfooter> 定义表格底, 只需定义一次, 可选
  • 1.3常用属性:
序号 属性 所属标签 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
2 cellspacing <table> 设置单元格边框间隙
2 align 不限 设置单元格内容水平居中
2 bgcolor 不限 设置背景色

2.表格制作购物车实战页面

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  <head>
  4.    <meta charset="UTF-8" />
  5.    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.    <title>表格实战：购物车</title>
  7.    <style>
  8.      /* 设置表格字体大小 */
  9.      table {
  10.        font-size: 14px;
  11.      }
  13.      /* 将单元格之间间隙去掉 */
  14.      table {
  15.        border-collapse: collapse;
  16.        width: 70%;
  17.        margin: auto;
  18.        color: #888;
  19.        font-size: larger;
  20.        text-align: center;
  21.      }
  23.      td,
  24.      th {
  25.        border-bottom: 1px solid #ccc;
  26.        padding: 10px;
  27.      }
  29.      /* 标题样式 */
  30.      table caption {
  31.        font-size: 1.5rem;
  32.        color: yellowgreen;
  33.        margin-bottom: 20px;
  34.      }
  36.      table th {
  37.        font-weight: bolder;
  38.        color: white;
  39.      }
  41.      table thead tr:first-of-type {
  42.        background-color: teal;
  43.      }
  44.      /* 隔行变色 */
  45.      table tbody tr:nth-of-type(even) {
  46.        background-color: yellowgreen;
  47.        color: white;
  48.      }
  49.      /* 鼠标悬停效果 */
  50.      table tbody tr:hover {
  51.        background-color: violet;
  52.        color: black;
  53.      }
  54.      /* 表格底部样式 */
  55.      table tfoot td {
  56.        border-bottom: none;
  57.        color: red;
  58.        font-size: 1.2rem;
  59.      }
  61.      /* 结算按钮 */
  62.      body div:last-of-type {
  63.        width: 70%;
  64.        margin: 10px auto;
  65.      }
  67.      body div:first-of-type button {
  68.        /* 右浮动，靠右 */
  69.        float: right;
  71.        width: 120px;
  72.        height: 32px;
  73.        background-color: seagreen;
  74.        color: white;
  75.        border: none;
  76.        /* 设置鼠标样式 */
  77.        cursor: pointer;
  78.      }
  79.      body div:first-of-type button:hover {
  80.        background-color: sandybrown;
  81.        font-size: 1.1rem;
  82.      }
  83.    </style>
  84.  </head>
  85.  <body>
  86.    <!-- 表格 -->
  87.    <table>
  88.      <!-- 标题 -->
  89.      <caption>
  90.        购物车
  91.      </caption>
  92.      <!-- 表格头部 -->
  93.      <thead>
  94.        <tr>
  95.          <th>ID</th>
  96.          <th>品名</th>
  97.          <th>单价/元</th>
  98.          <th>单位</th>
  99.          <th>数量</th>
  100.          <th>金额/元</th>
  101.        </tr>
  102.      </thead>
  103.      <!-- 表格主体 -->
  104.      <tbody>
  105.        <tr>
  106.          <td>SN-1010</td>
  107.          <td>MacBook Pro电脑</td>
  108.          <td>18999</td>
  109.          <td>台</td>
  110.          <td>1</td>
  111.          <td>18999</td>
  112.        </tr>
  113.        <tr>
  114.          <td>SN-1020</td>
  115.          <td>iPhone手机</td>
  116.          <td>4999</td>
  117.          <td>部</td>
  118.          <td>2</td>
  119.          <td>9998</td>
  120.        </tr>
  121.        <tr>
  122.          <td>SN-1030</td>
  123.          <td>智能AI音箱</td>
  124.          <td>399</td>
  125.          <td>只</td>
  126.          <td>5</td>
  127.          <td>1995</td>
  128.        </tr>
  129.        <tr>
  130.          <td>SN-1040</td>
  131.          <td>SSD移动硬盘</td>
  132.          <td>888</td>
  133.          <td>个</td>
  134.          <td>2</td>
  135.          <td>1776</td>
  136.        </tr>
  137.        <tr>
  138.          <td>SN-1050</td>
  139.          <td>黄山毛峰</td>
  140.          <td>999</td>
  141.          <td>斤</td>
  142.          <td>3</td>
  143.          <td>2997</td>
  144.        </tr>
  145.      </tbody>
  146.      <!-- 表格尾部 -->
  147.      <tfoot>
  148.        <td colspan="4">总计：</td>
  149.        <td>13</td>
  150.        <td>35765</td>
  151.      </tfoot>
  152.    </table>
  153.    <!-- 结算按钮 -->
  154.    <div>
  155.      <button>结算</button>
  156.    </div>
  157.  </body>
  158. </html>

运行结果截图：
表格制作购物车页面

3.表单

  • 3.1 表单基本元素

序号 元素 名称 描述
1 <form> 表单容器 表单应该放在该标签内提交
2 <input> 输入控件 由type属性指定控件类型
3 <label> 控件标签 用于控件功能描述与内容关联
4 <select> 下拉列表 用于选择预置的输入内容
5 <datalist> 预置列表 用于展示预置的输入内容
6 <option> 预置选项 与<select>,<datalist>配合
7 <textarea> 文本域 多行文本框,常与富文本编辑器配合
8 <button> 按钮 用于提交表单

表单元素的公共属性(并非所有元素都具备)

序号 属性 描述
1 name 元素/控件名称,用做服务器端脚本的变量名称
2 value 提交到服务器端的数据
3 placeholder 输入框的提示信息
4 form 所属的表单,与<form name="">对应
5 autofocus 页面加载时,自动获取焦点
6 required 必填 / 必选项
7 readonly 该控件内容只读
8 disabled 是否禁用

  • 3.2.表单制作一个用户注册页面

  • html 代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基本表单元素</title>
  7.   </head>
  8.   <body>
  9.     <h3>用户注册</h3>
  10.     <!-- form+input -->
  11.     <form action="" method="POST">
  12.       <fieldset>
  13.         <legend>基本信息（必填）</legend>
  15.         <div>
  16.           <label for="username">账号：</label>
  17.           <input
  18.             type="text"
  19.             id="my-username"
  20.             name="username"
  21.             placeholder="6-15位字符"
  22.           />
  23.         </div>
  25.         <div>
  26.           <label for="email-id">邮箱：</label>
  27.           <input
  28.             type="email"
  29.             name="email"
  30.             id="email-id"
  31.             placeholder="demo@qq.com"
  32.             required
  33.           />
  34.         </div>
  36.         <!-- 密码 框-->
  37.         <div>
  38.           <label for="pwd-1">密码：</label>
  39.           <input
  40.             type="password"
  41.             name="password1"
  42.             id="pwd-2"
  43.             placeholder="不少于6位且字母+数字"
  44.           />
  45.           <!-- 点击显示密码 -->
  46.           <!-- <button onclick="ShowPsw()" id="btn" type="button">显示密码</button> -->
  47.         </div>
  48.         <div>
  49.           <label for="pwd-2">确认：</label>
  50.           <input type="password" name="password2" id="pwd-1" />
  51.         </div>
  52.       </fieldset>
  53.       <fieldset>
  54.         <legend>扩展信息(选填)</legend>
  55.         <div>
  56.           <label
  57.             >生日：
  58.             <input type="date" name="birthday" />
  59.           </label>
  60.         </div>
  62.         <!-- 单选按钮 -->
  63.         <div>
  64.           <label for="secret">性别：</label>
  65.           <!-- 单选按钮中在name属性名必须相同 -->
  66.           <input type="radio" value="male" name="gender" id="male" /><label
  67.             for=""
  68.             >男</label
  69.           >
  70.           <input type="radio" value="female" name="gender" id="female" /><label
  71.             for=""
  72.             >女</label
  73.           >
  74.           <input
  75.             type="radio"
  76.             value="secret"
  77.             name="gender"
  78.             id="secret"
  79.             checked
  80.           /><label for="secret">保密</label>
  81.         </div>
  83.         <!-- 复选框 -->
  84.         <div>
  85.           <label for="programme">爱好</label>
  86.           <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
  87.           <input type="checkbox" name="hobby[]" id="game" value="game" />
  88.           <label for="game">打游戏</label>
  89.           <input type="checkbox" name="hobby[]" id="shoot" value="shoot" />
  90.           <label for="game">编程</label>
  91.           <input
  92.             type="checkbox"
  93.             name="hobby[]"
  94.             id="programme"
  95.             value="programme"
  96.             checked
  97.           />
  98.           <label for="game">编程</label>
  99.         </div>
  101.         <!-- 选项列表 -->
  102.         <div>
  103.           <label for="brand">手机：</label>
  104.           <input type="search" list="phone" id="brand" name="brand" />
  105.           <datalist id="phone">
  106.             <option value="apple"> </option>
  107.             <option value="huawei">华为</option>
  108.             <option value="mi" label="小米"> </option>
  109.           </datalist>
  110.         </div>
  111.       </fieldset>
  113.       <fieldset>
  114.         <legend>其它信息(选填)</legend>
  115.         <!--文件上传-->
  116.         <div>
  117.           <label for="uploads">上传头像:</label>
  118.           <input
  119.             type="file"
  120.             name="user_pic"
  121.             id="uploads"
  122.             accept="image/png, image/jpeg, image/gif"
  123.           />
  124.         </div>
  126.         <!--文本域-->
  127.         <div>
  128.           <label for="resume">简历:</label>
  129.           <!--注意文本域没有value属性-->
  130.           <textarea
  131.             name="resume"
  132.             id="resume"
  133.             cols="30"
  134.             rows="5"
  135.             placeholder="不超过100字"
  136.           ></textarea>
  137.         </div>
  138.       </fieldset>
  140.       <!-- 隐藏域, 例如用户的Id, 注册，登录的时间,无需用户填写 -->
  141.       <input type="hidden" name="user_id" value="123" />
  143.       <p>
  144.         <input type="submit" value="提交" class="btn" />
  145.         <button class="btn">提交</button>
  146.       </p>
  147.     </form>
  149.     <script>
  150.       //输入密码，点击名文显示
  151.       //   function ShowPsw(ele) {
  152.       // const pwd = document.querySelector("#pwd-2");
  153.       // pwd.type = "text";
  154.       //   代码写成一行
  155.       // document.querySelector("#pwd-2").type = "text";
  156.       //   }
  157.     </script>
  158.   </body>
  159. </html>

运行结果截图
表格制作购物车页面

  • 3.3 添加 CSS 样式代码后

  1.     <style>
  2.       body {
  3.         color: #555;
  4.       }
  5.       h3 {
  6.         text-align: center;
  7.       }
  8.       form {
  9.         width: 450px;
  10.         margin: 30px auto;
  11.         border-top: 1px solid #aaa;
  12.       }
  13.       form fieldset {
  14.         border: 1px solid seagreen;
  15.         background-color: lightcyan;
  16.         box-shadow: 2px 2px 4px #bbb;
  17.         border-radius: 10px;
  18.         margin: 20px;
  19.       }
  20.       form fieldset legend {
  21.         background-color: rgb(178, 231, 201);
  22.         border-radius: 10px;
  23.         color: seagreen;
  24.         padding: 5px 15px;
  25.       }
  27.       form div {
  28.         margin: 5px;
  29.       }
  31.       form p {
  32.         text-align: center;
  33.       }
  34.       form .btn {
  35.         width: 80px;
  36.         height: 30px;
  37.         border: none;
  38.         background-color: seagreen;
  39.         color: #ddd;
  40.       }
  41.       form .btn:hover {
  42.         background-color: coral;
  43.         color: white;
  44.         cursor: pointer;
  45.       }
  47.       input:focus {
  48.         background-color: rgb(226, 226, 175);
  49.       }
  50.     </style>

运行结果截图
表格制作购物车页面

4.总结

  • 表格是数据格式化的工具
  • 完整表格 9 个标签：( table + caption + colgroup + thead + tbody + tfoot + tr + th + td)
  • 表格常用 7 个标签：table+capiton+thead+tbody+tr+th+tr+td
  • 最简单表格要用的 6 个标签：table+caption+tbody+tr+th/td
  • 表单是网站页面与用户之间实现互动一种工具，通常用来实现用户的注册登陆，信息收集
  • 表单元素添加disabled禁用属性的字段数据不会被提交,但是readonly只读属性的字段允许提交
  • 表单元素隐藏域的内容不会在 HTML 页面中显示,但是value属性的数据会被提交
Correcting teacher：WJWJ

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