简体中文（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

博客列表 >利用表格表单实现购物车以及用户注册页面

利用表格表单实现购物车以及用户注册页面

Dong.
Dong.原创
2020年06月20日 10:59:452491浏览

利用表格完成购物车页面示例：

表格中常用的9个元素（标签）

1.<table></table>表格，数据化格式的工具表格，数据化格式的工具
2.<caption></caption>表格的标题表格的标题
3.<colgroup></colgroup>用来定义表格bai列的分组
4.<thead></thead>页眉
5.<tbody></tbody>主体
6.<tfool></tfool>页脚
7.<tr></tr>定义 HTML 表格中的行
8.<th></th>定义表中的头单元格
8.<td></td>定义 HTML 表格中的标准单元格

表格实战效果图示例：
表格实战效果图示例

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.  <table>
  10.      <caption>
  11.          购物车
  12.      </caption>
  13.      <thead>
  14.          <tr>
  15.              <th>ID</th>
  16.              <th>品名</th>
  17.              <th>单价/元</th>
  18.              <th>单位</th>
  19.              <th>数量</th>
  20.              <th>金额/元</th>
  21.          </tr>
  22.      </thead>
  23.      <tbody>
  24.          <tr>
  25.            <td>SN-1010</td>
  26.            <td>MacBook Pro电脑</td>
  27.            <td>18999</td>
  28.            <td>台</td>
  29.            <td>1</td>
  30.            <td>18999</td>
  31.          </tr>
  32.          <tr>
  33.            <td>SN-1020</td>
  34.            <td>iPhone手机</td>
  35.            <td>4999</td>
  36.            <td>部</td>
  37.            <td>2</td>
  38.            <td>9998</td>
  39.          </tr>
  40.          <tr>
  41.            <td>SN-1030</td>
  42.            <td>智能AI音箱</td>
  43.            <td>399</td>
  44.            <td>只</td>
  45.            <td>5</td>
  46.            <td>1995</td>
  47.          </tr>
  48.          <tr>
  49.            <td>SN-1040</td>
  50.            <td>SSD移动硬盘</td>
  51.            <td>888</td>
  52.            <td>个</td>
  53.            <td>2</td>
  54.            <td>1776</td>
  55.          </tr>
  56.          <tr>
  57.            <td>SN-1050</td>
  58.            <td>黄山毛峰</td>
  59.            <td>999</td>
  60.            <td>斤</td>
  61.            <td>3</td>
  62.            <td>2997</td>
  63.          </tr>
  64.        </tbody>
  65.        <tfoot>
  66.          <!-- 总计合并 -->
  67.          <tr>
  68.            <td colspan="4">总计：</td>
  69.            <td>13</td>
  70.            <td>35765</td>
  71.          </tr>
  72.        </tfoot>
  73.      </table>
  75.  </table>
  76. </body>
  77. </html>

样式效果：

添加css样式：

  1. <style>
  2.    html {
  3.    font-size: 14px;
  4.  }
  5.  table {
  6.    /* 把单元格之间的间隙去除 */
  7.    border-collapse: collapse;
  8.    /* 父容器的70% */
  9.    width: 70%;
  10.    /* 居中 */
  11.    margin: auto;
  12.    color: #666;
  13.    /* 字体变细 */
  14.    font-weight: lighter;
  15.    /* 表格内容全部居中 */
  16.    text-align: center;
  17.  }
  18.  /* 表格线直接添加到单元格上面 */
  19.  table thead th,
  20.  table td {
  21.    /* 只加下边框 */
  22.    border-bottom: 1px solid #000;
  23.    /* 表格中内容与边框的距离拉大些 */
  24.    padding: 10px;
  25.  }
  26.  /* 标题样式 */
  27.  table caption {
  28.    /* html的字体为参照 */
  29.    font-size: 1.5rem;
  30.    margin-bottom: 15px;
  31.    /* 设置购物车这几个字的样式 */
  32.    color: orange;
  33.  }
  34.  table th {
  35.    /* id栏设置样式 */
  36.    font-weight: lighter;
  37.    color: hotpink;
  38.  }
  39.  /* id栏的背景色 */
  40.  table thead {
  41.    background-color: papayawhip;
  42.  }
  43.  /* 隔行变色 */
  44.  table tbody tr:nth-of-type(even) {
  45.    background-color: #efef;
  46.  }
  47.  /* 鼠标悬停时背景色 */
  48.  table tbody tr:hover {
  49.    background-color: skyblue;
  50.  }
  51.  /* 底部样式 */
  52.  table tfoot td {
  53.    /* 底部边框去掉 */
  54.    border-bottom: none;
  55.    color: tomato;
  56.    font-size: 1.2rem;
  57.    font-weight: bolder;
  58.  }
  59.  /* 结算样式 */
  60.  body div:last-of-type {
  61.    width: 70%;
  62.    margin: 10px auto;
  63.  }
  64.  /* 结算按钮 */
  65.  body div:first-of-type button {
  66.    float: right;
  67.    width: 120px;
  68.    height: 34px;
  69.    background-color: teal;
  70.    color: white;
  71.    border: none;
  72.    /* 鼠标样式 变成手*/
  73.    cursor: pointer;
  74.  }
  75.  /* 结算移入时效果 */
  76.  body div:first-of-type button:hover {
  77.    background-color: thistle;
  78.    font-size: 1.1rem;
  79.  }   
  80.  </style>

样式效果：

添加结算按钮：

  1.  <!-- 结算按钮 -->
  2.      <div>
  3.        <button>结算</button>
  4.      </div>

效果图：

利用表单制作用户注册页面

示例效果图：

  • <form>标签用于创建 HTML 表单
  • 使用<input>标签实现用户输入

基本表单元素

类型 描述
type="text" 输入文本类型
type="email" 输入 email 格式内容
type="password" 输入密码
type="date" 输入日期
type="radio" 单选框
type="checkbox" 复选框
type="search" 搜索框
type="file" 文件上传
type="hidden" 隐藏选项

示例代码：

  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.  body {
  10.    color: #555;
  11.  }
  12.  h3 {
  13.    text-align: center;
  14.  }
  15.  form {
  16.    width: 450px;
  17.    margin: 30px auto;
  18.    border-top: 1px solid #aaa;
  19.  }
  20.  /* 表的背景上色，椭圆角 */
  21.  form fieldset {
  22.    border: 1px solid seagreen;
  23.    background-color: lightcyan;
  24.    box-shadow: 2px 2px 4px #bbb;
  25.    border-radius: 10px;
  26.    margin: 20px;
  27.  }
  28.  /* 表头组件颜色，椭圆角 */
  29.  form fieldset legend {
  30.    background-color: rgb(178, 231, 201);
  31.    border-radius: 10px;
  32.    color: seagreen;
  33.    padding: 5px 15px;
  34.  }
  35.  form div {
  36.    margin: 5px;
  37.  }
  38.  /* 表格输入时底部颜色 */
  39.  input:focus {
  40.    background-color: darkgrey;
  41.  }
  42.  body p:first-of-type button {
  43.    float: right;
  44.    width: 120px;
  45.    height: 34px;
  46.    background-color: teal;
  47.    color: white;
  48.    border: none;
  49.    /* 鼠标样式 变成手*/
  50.    cursor: pointer;
  51.  }
  52.  /* 结算移入时效果 */
  53.  body p:first-of-type button:hover {
  54.    background-color: thistle;
  55.    font-size: 1.1rem;
  56.  }
  57. </style>
  58. </head>
  59. <body>
  60. <h3>用户注册</h3>
  61. <form action="" method="POST">
  62.  <!-- 1.控件组 -->
  63.  <fieldset>
  64.    <legend>基本信息（必填）</legend>
  65.    <div>
  66.      <label for="username1">账&emsp;&emsp;号：</label>
  67.      <input
  68.        type="text"
  69.        id="username1"
  70.        name="username"
  71.        placeholder="6-15个字符"
  72.        autofocus
  73.        required
  74.      />
  75.    </div>
  76.    <div>
  77.      <label for="email-id">邮&emsp;&emsp;箱：</label>
  78.      <input
  79.        type="email"
  80.        name="email"
  81.        id="email-id"
  82.        placeholder="demo@example.com"
  83.        required
  84.      />
  85.    </div>
  86.    <!-- 密码 -->
  87.    <div>
  88.      <label for="pwd-1">密&emsp;&emsp;码：</label>
  89.      <input
  90.        type="password"
  91.        name="password1"
  92.        id="pwd-1"
  93.        placeholder="不少于6位且字母+数字"
  94.      />
  95.      <button onclick="showPwd()" id="btn" type="button">显示密码</button>
  96.    </div>
  97.    <div>
  98.      <label for="pwd-2">确认密码：</label>
  99.      <input type="password" name="password2" id="pwd-2" />
  100.    </div>
  101.  </fieldset>
  102.  <!-- <button>提交</button> -->
  103.  <script>
  104.    function showPwd(ele) {
  105.      document.querySelector("#pwd-1").type = "text";
  106.    }
  107.  </script>
  108.  <fieldset>
  109.    <legend>扩展信息（选填）</legend>
  110.    <div>
  111.      <label for="birthday"
  112.        >生日:
  113.        <input type="date" name="birthday" />
  114.      </label>
  115.    </div>
  116.    <div>
  117.      <!-- 单选按钮 ：性别-->
  118.      <label for="secret">性别:</label>
  119.      <input type="radio" name="gender" value="male" id="" />
  120.      <label for="">男</label>
  121.      <input type="radio" name="gender" value="famale" id="" />
  122.      <label for="">女</label>
  123.      <input type="radio" name="gender" value="secret" id="" checked />
  124.      <label for="">保密</label>
  125.    </div>
  126.    <div>
  127.      <!-- 复选框 -->
  128.      <label for="">爱好:</label>
  129.      <input type="checkbox" name="hobby[]" id="game" value="game" />
  130.      <label for="game">打游戏</label>
  131.      <input
  132.        type="checkbox"
  133.        name="hobby[]"
  134.        value="shoot"
  135.        id="shoot"
  136.      /><label for="shoot">摄影</label>
  137.      <input
  138.        type="checkbox"
  139.        name="hobby[]"
  140.        value="programme"
  141.        id="programme"
  142.        checked
  143.      /><label for="programme">编程</label>
  144.    </div>
  145.    <!-- 选项列表 -->
  146.    <div>
  147.      <label for="brand">手机：</label>
  148.      <input type="search" list="phone" name="brand" id="brand" />
  149.      <datalist id="phone">
  150.        <option value="apple"></option>
  151.        <option value="huawei"></option>
  152.        <option value="mi" label="小米"></option>
  153.      </datalist>
  154.    </div>
  155.  </fieldset>
  156.  <fieldset>
  157.    <legend>其它信息(选填)</legend>
  158.    <!--文件上传 ，用file上传文件-->
  159.    <div>
  160.      <label for="uploads">上传头像:</label>
  161.      <input
  162.        type="file"
  163.        name="user_pic"
  164.        id="uploads"
  165.        accept="image/png, image/jpeg, image/gif"
  166.      />
  167.    </div>
  168.    <!--文本域-->
  169.    <div>
  170.      <label for="resume">简历:</label>
  171.      <!--注意文本域没有value属性-->
  172.      <textarea
  173.        name="resume"
  174.        id="resume"
  175.        cols="30"
  176.        rows="5"
  177.        placeholder="不超过100字"
  178.      ></textarea>
  179.    </div>
  180.  </fieldset>
  181.  <!-- 隐藏域, 用户Id, 注册，登录时间。。。。 -->
  182.  <input type="hidden" name="user_id" value="123" />
  183.  <p>
  184.    <!-- <input type="submit" value="提交" class="btn" /> -->
  185.    <!-- 一般用下面的botton -->
  186.    <!-- <input type="submit" value="提交" class="btn" /> -->
  187.    <button class="btn">提交</button>
  188.  </p>
  189. </form>
  190. </body>
  191. </html>

注意：单选按钮中的name属性名必须相同

浏览器显示示例：

总结：

  • 对于表单以及表格有了一个大概的认识
  • 代码还是不熟悉，还是得抄老师的
上一条：HTML页面标准文档结构和HTML元素的三大通用属性下一条：php数据类型转换
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多