简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >HTML 表格表单实战练习小结

HTML 表格表单实战练习小结

JKY辉哥
JKY辉哥原创
2020年06月17日 16:10:222388浏览

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属性的数据会被提交
上一条：购物车、用户注册静态页面下一条：第四课：选择器与表格
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多