亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 40
粉絲 0
評(píng)論 1
訪問量 49116
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
利用表格表單實(shí)現(xiàn)購物車以及用戶注冊(cè)頁面
Dong.
原創(chuàng)
2892人瀏覽過

利用表格完成購物車頁面示例：

表格中常用的9個(gè)元素（標(biāo)簽）

1.<table></table>表格，數(shù)據(jù)化格式的工具表格，數(shù)據(jù)化格式的工具
2.<caption></caption>表格的標(biāo)題表格的標(biāo)題
3.<colgroup></colgroup>用來定義表格bai列的分組
4.<thead></thead>頁眉
5.<tbody></tbody>主體
6.<tfool></tfool>頁腳
7.<tr></tr>定義 HTML 表格中的行
8.<th></th>定義表中的頭單元格
8.<td></td>定義 HTML 表格中的標(biāo)準(zhǔn)單元格

表格實(shí)戰(zhàn)效果圖示例：
表格實(shí)戰(zhàn)效果圖示例

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>單價(jià)/元</th>
  18.              <th>單位</th>
  19.              <th>數(shù)量</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>臺(tái)</td>
  29.            <td>1</td>
  30.            <td>18999</td>
  31.          </tr>
  32.          <tr>
  33.            <td>SN-1020</td>
  34.            <td>iPhone手機(jī)</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移動(dòng)硬盤</td>
  51.            <td>888</td>
  52.            <td>個(gè)</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.          <!-- 總計(jì)合并 -->
  67.          <tr>
  68.            <td colspan="4">總計(jì)：</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.    /* 字體變細(xì) */
  14.    font-weight: lighter;
  15.    /* 表格內(nèi)容全部居中 */
  16.    text-align: center;
  17.  }
  18.  /* 表格線直接添加到單元格上面 */
  19.  table thead th,
  20.  table td {
  21.    /* 只加下邊框 */
  22.    border-bottom: 1px solid #000;
  23.    /* 表格中內(nèi)容與邊框的距離拉大些 */
  24.    padding: 10px;
  25.  }
  26.  /* 標(biāo)題樣式 */
  27.  table caption {
  28.    /* html的字體為參照 */
  29.    font-size: 1.5rem;
  30.    margin-bottom: 15px;
  31.    /* 設(shè)置購物車這幾個(gè)字的樣式 */
  32.    color: orange;
  33.  }
  34.  table th {
  35.    /* id欄設(shè)置樣式 */
  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.  /* 鼠標(biāo)懸停時(shí)背景色 */
  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.  /* 結(jié)算樣式 */
  60.  body div:last-of-type {
  61.    width: 70%;
  62.    margin: 10px auto;
  63.  }
  64.  /* 結(jié)算按鈕 */
  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.    /* 鼠標(biāo)樣式 變成手*/
  73.    cursor: pointer;
  74.  }
  75.  /* 結(jié)算移入時(shí)效果 */
  76.  body div:first-of-type button:hover {
  77.    background-color: thistle;
  78.    font-size: 1.1rem;
  79.  }   
  80.  </style>

樣式效果：

添加結(jié)算按鈕：

  1.  <!-- 結(jié)算按鈕 -->
  2.      <div>
  3.        <button>結(jié)算</button>
  4.      </div>

效果圖：

利用表單制作用戶注冊(cè)頁面

示例效果圖：

  • <form>標(biāo)簽用于創(chuàng)建 HTML 表單
  • 使用<input>標(biāo)簽實(shí)現(xiàn)用戶輸入

基本表單元素

類型 描述
type="text" 輸入文本類型
type="email" 輸入 email 格式內(nèi)容
type="password" 輸入密碼
type="date" 輸入日期
type="radio" 單選框
type="checkbox" 復(fù)選框
type="search" 搜索框
type="file" 文件上傳
type="hidden" 隱藏選項(xiàng)

示例代碼：

  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.  /* 用戶注冊(cè)顏色灰一點(diǎn)并居中 */
  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.  /* 表格輸入時(shí)底部顏色 */
  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.    /* 鼠標(biāo)樣式 變成手*/
  50.    cursor: pointer;
  51.  }
  52.  /* 結(jié)算移入時(shí)效果 */
  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>用戶注冊(cè)</h3>
  61. <form action="" method="POST">
  62.  <!-- 1.控件組 -->
  63.  <fieldset>
  64.    <legend>基本信息（必填）</legend>
  65.    <div>
  66.      <label for="username1">賬&emsp;&emsp;號(hào)：</label>
  67.      <input
  68.        type="text"
  69.        id="username1"
  70.        name="username"
  71.        placeholder="6-15個(gè)字符"
  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位且字母+數(shù)字"
  94.      />
  95.      <button onclick="showPwd()" id="btn" type="button">顯示密碼</button>
  96.    </div>
  97.    <div>
  98.      <label for="pwd-2">確認(rèn)密碼：</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>擴(kuò)展信息（選填）</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.      <!-- 復(fù)選框 -->
  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.    <!-- 選項(xiàng)列表 -->
  146.    <div>
  147.      <label for="brand">手機(jī)：</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, 注冊(cè)，登錄時(shí)間。。。。 -->
  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屬性名必須相同

瀏覽器顯示示例：

總結(jié)：

  • 對(duì)于表單以及表格有了一個(gè)大概的認(rèn)識(shí)
  • 代碼還是不熟悉，還是得抄老師的
批改老師：WJWJ

批改狀態(tài)：合格

老師批語：寫的非常好，非常仔細(xì)認(rèn)真！繼續(xù)加油！
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)