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

搜索
博主信息
博文 55
粉絲 3
評論 0
訪問量 69596
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
表格與表單實戰(zhàn)練習
王佳祥
原創(chuàng)
939人瀏覽過

表格與表單實戰(zhàn)練習

一、表格(購物車)

  • 代碼：

    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.       font-size: 16px;
    10.       /* 設置全局字體大小 */
    11.     }
    12.     /* 設置表格寬度，居中顯示在網(wǎng)頁上，并且內(nèi)部居中對齊 */
    13.     table {
    14.       width: 70%;
    15.       margin: auto;
    16.       text-align: center;
    17.     }
    18.     /* 設置標題字體大小，字體顏色，位置 */
    19.     caption {
    20.       font-size: 2rem;
    21.       color: lightgreen;
    22.       margin: 20px 0;
    23.     }
    24.     /* 設置單元格的下邊框，內(nèi)邊距 */
    25.     td,
    26.     th {
    27.       border-top: 2px solid #ccc;
    28.       padding: 10px;
    29.     }
    30.     /* 設置最后一個div標簽，用偽類表示 ，寬度70%，為了和表格對齊，在頁面居中*/
    31.     div:last-of-type {
    32.       width: 70%;
    33.       margin: auto;
    34.     }
    35.     /* 設置結算按鈕的樣式，浮動，寬高，背景顏色，去掉默認邊框，相對定位 */
    36.     div:last-of-type button {
    37.       float: right;
    38.       width: 150px;
    39.       height: 50px;
    40.       background: lightgreen;
    41.       border: none;
    42.       position: relative;
    43.       top: 20px;
    44.     }
    45.     /* 設置button的鼠標點擊狀態(tài)為小手，字體為藍色，背景為淺橘色，字體為25px; */
    46.     div:last-of-type button:hover {
    47.       font-size: 25px;
    48.       color: blue;
    49.       background: lightsalmon;
    50.       cursor: pointer;
    51.     }
    52.     /* 設置thead的背景顏色， */
    53.     thead {
    54.       background: lightskyblue;
    55.     }
    56.     /* 設置表格主體的偶數(shù)行背景顏色 */
    57.     tbody > tr:nth-of-type(even) {
    58.       background: #e1d5d5;
    59.     }
    60.     /* 設置表格尾部字體大小，顏色，字寬 */
    61.     tfoot {
    62.       font-size: 1.2rem;
    63.       color: #ff2913;
    64.       font-weight: bolder;
    65.     }
    66.     /* 設置鼠標滑過表格主體內(nèi)容時的背景顏色 */
    67.     tbody > tr:hover {
    68.       background: mediumaquamarine;
    69.     }
    70.   </style>
    71. </head>
    72. <body>
    73.   <table cellspacing="0" cellpadding="0">
    74.     <caption>
    75.       購物車
    76.     </caption>
    77.     <thead>
    78.       <tr>
    79.         <th>ID</th>
    80.         <th>品名</th>
    81.         <th>單價/元</th>
    82.         <th>單位</th>
    83.         <th>數(shù)量</th>
    84.         <th>金額/元</th>
    85.       </tr>
    86.     </thead>
    87.     <tbody>
    88.       <tr>
    89.         <td>1</td>
    90.         <td>HUAWEI MateBook X Pro 2020</td>
    91.         <td>9988.00</td>
    92.         <td>臺</td>
    93.         <td>1</td>
    94.         <td>9988.00</td>
    95.       </tr>
    96.       <tr>
    97.         <td>2</td>
    98.         <td>HUAWEI Mate 30 Pro 5G</td>
    99.         <td>6399.00</td>
    100.         <td>部</td>
    101.         <td>2</td>
    102.         <td>12798.00</td>
    103.       </tr>
    104.       <tr>
    105.         <td>3</td>
    106.         <td>小度在家X8智能音箱</td>
    107.         <td>589.00</td>
    108.         <td>件</td>
    109.         <td>1</td>
    110.         <td>589.00</td>
    111.       </tr>
    112.       <tr>
    113.         <td>4</td>
    114.         <td>小米全面屏65英寸 E65A</td>
    115.         <td>2599.00</td>
    116.         <td>臺</td>
    117.         <td>1</td>
    118.         <td>2599.00</td>
    119.       </tr>
    120.       <tr>
    121.         <td>5</td>
    122.         <td>小米AloT路由器 AX3600</td>
    123.         <td>599.00</td>
    124.         <td>個</td>
    125.         <td>1</td>
    126.         <td>599.00</td>
    127.       </tr>
    128.       <tr>
    129.         <td>6</td>
    130.         <td>iPhone Xs Max 4G</td>
    131.         <td>5599.00</td>
    132.         <td>部</td>
    133.         <td>1</td>
    134.         <td>5599.00</td>
    135.       </tr>
    136.     </tbody>
    137.     <tfoot>
    138.       <tr>
    139.         <td colspan="4">總計：</td>
    140.         <td>數(shù)量：7</td>
    141.         <td>32172.00</td>
    142.       </tr>
    143.     </tfoot>
    144.   </table>
    145.   <div class=""><button>去結算</button></div>
    146. </body>
    147. </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.   <style>
    8.     body {
    9.       color: #555;
    10.       /* 設置全部字體顏色 */
    11.     }
    12.     h2 {
    13.       text-align: center;
    14.       /* 把h3居中 */
    15.     }
    16.     form {
    17.       width: 450px;
    18.       margin: 30px auto;
    19.       border-top: 1px solid #aaa;
    20.       /*設置表單寬度 外邊距且居中顯示，上邊框為1像素*/
    21.     }
    22.     form fieldset {
    23.       border: 1px solid seagreen;
    24.       background-color: lightcyan;
    25.       box-shadow: 2px 2px 4px #bbb;
    26.       border-radius: 10px;
    27.       margin: 20px;
    28.       /*設置控件樣式，邊框為1px,背景顏色，邊框陰影，圓角，外邊距*/
    29.     }
    30.     form fieldset legend {
    31.       background-color: rgb(178, 231, 201);
    32.       border-radius: 10px;
    33.       color: seagreen;
    34.       padding: 5px 15px;
    35.       /*設置legend元素背景顏色，圓角，字體顏色，內(nèi)邊距*/
    36.     }
    37.     form div {
    38.       margin: 5px; /*div外邊距*/
    39.     }
    40.     form > div:last-of-type {
    41.       text-align: center; /*字體居中*/
    42.     }
    43.     form .btn {
    44.       width: 80px;
    45.       height: 30px;
    46.       border: none;
    47.       background-color: seagreen;
    48.       color: #ddd;
    49.       /*按鈕寬高，邊框，背景顏色，字體顏色*/
    50.     }
    51.     form .btn:hover {
    52.       background-color: coral;
    53.       color: white;
    54.       cursor: pointer;
    55.       /*當鼠標停留在按鈕上時背景顏色，字體顏色，鼠標樣式*/
    56.     }
    57.     input:focus {
    58.       background-color: rgb(226, 226, 175);
    59.       /*光標在輸入框時，輸入框的背景顏色*/
    60.     }
    61.   </style>
    62. </head>
    63. <body>
    64.   <h2>用戶注冊</h2>
    65.   <form action="" method="POST">
    66.     <!-- 控件組 -->
    67.     <fieldset>
    68.       <legend>基本信息(必填)</legend>
    69.       <div>
    70.         <label for="username">賬號：</label>
    71.         <input
    72.           type="text"
    73.           id="username"
    74.           name="username"
    75.           placeholder="6到15位字符"
    76.           autofocus
    77.           required
    78.         />
    79.       </div>
    81.       <div>
    82.         <label for="email">郵箱：</label>
    83.         <input
    84.           type="email"
    85.           id="email"
    86.           name="email"
    87.           placeholder="demo@example.com"
    88.           required
    89.         />
    90.       </div>
    92.       <div>
    93.         <label for="password">密碼：</label>
    94.         <input
    95.           type="password"
    96.           name="password"
    97.           id="password"
    98.           required
    99.           placeholder="不少于6位，且字母加數(shù)字"
    100.         />
    101.         <button onclick="showpwd()" id="btn" type="button">顯示密碼</button>
    102.       </div>
    104.       <div>
    105.         <label for="password1">確認：</label>
    106.         <input
    107.           type="password"
    108.           name="password1"
    109.           id="password1"
    110.           required
    111.           placeholder="不少于6位，且字母加數(shù)字"
    112.         />
    113.       </div>
    114.     </fieldset>
    116.     <fieldset>
    117.       <legend>擴展信息(選填)</legend>
    118.       <div>
    119.         <label for="date">生日：</label>
    120.         <input type="date" id="date" name="date" />
    121.       </div>
    123.       <div>
    124.         <label for="baomi">性別：</label>
    125.         <input type="radio" name="gender" value="man" id="man" />
    126.         <label for="man">男</label>
    127.         <input type="radio" name="gender" value="woman" id="woman" />
    128.         <label for="woman">女</label>
    129.         <input type="radio" name="gender" value="baomi" id="baomi" checked />
    130.         <label for="baomi">保密</label>
    131.       </div>
    133.       <div>
    134.         <!-- 因為復選框返回的是一個值或多個值，最方便用后端數(shù)組來處理，所有將name名稱設置為數(shù)組形式便于后端腳本處理 -->
    135.         <label for="biancheng">愛好：</label>
    136.         <input type="checkbox" name="hobby[]" id="game" value="game" />
    137.         <label for="game">打游戲</label>
    138.         <input type="checkbox" name="hobby[]" id="sheying" value="sheying" />
    139.         <label for="sheying">攝影</label>
    140.         <input
    141.           type="checkbox"
    142.           name="hobby[]"
    143.           id="biancheng"
    144.           value="biancheng"
    145.           checked
    146.         />
    147.         <label for="biancheng">編程</label>
    148.       </div>
    150.       <div>
    151.         <!-- 選項列表 -->
    152.         <label for="">手機：</label>
    153.         <input type="search" list="phone" name="brand" />
    154.         <datalist id="phone">
    155.           <option value="apple"></option>
    156.           <option value="huawei"></option>
    157.           <option value="xiaomi"></option>
    158.           <option value="oppo"></option>
    159.           <option value="vivo"></option>
    160.         </datalist>
    161.       </div>
    162.     </fieldset>
    164.     <fieldset>
    165.       <legend>其它信息(選填)</legend>
    166.       <div>
    167.         <label for="uploads">上傳頭像</label>
    168.         <input
    169.           type="file"
    170.           id="uploads"
    171.           name="user_pic"
    172.           accept="image/png,image/jpeg,image/gif"
    173.         />
    174.       </div>
    176.       <div>
    177.         <label for=""></label>
    178.         <textarea
    179.           name="resume"
    180.           id="resume"
    181.           cols="30"
    182.           rows="5"
    183.           placeholder="不超過100字！！"
    184.         ></textarea>
    185.       </div>
    186.     </fieldset>
    187.     <!-- 隱藏域 hidden 不需要用戶填寫，可以將用戶注冊時間，用戶id，登錄時間隨表單上傳到服務器-->
    188.     <input type="hidden" name="user_id" value="123" />
    189.     <div>
    190.       <button class="btn">提交</button>
    191.       <input type="submit" value="提交" class="btn" />
    192.     </div>
    193.   </form>
    194. </body>
    195. <script>
    196.   function showpwd() {
    197.     document.querySelector("#password").type = "text";
    198.     const btn = document.querySelector("#btn").innerHTML;
    199.     console.log(btn);
    200.     if (btn == "顯示密碼") {
    201.       document.querySelector("#btn").innerHTML = "隱藏密碼";
    202.     }
    203.     if (btn == "隱藏密碼") {
    204.       document.querySelector("#password").type = "password";
    205.       document.querySelector("#btn").innerHTML = "顯示密碼";
    206.     }
    207.   }
    208. </script>
    209. </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.   <style>
    8.     * {
    9.       font-size: 20px;
    10.     }
    11.     /* 表格 */
    12.     .table {
    13.       display: table;
    14.       border: 1px solid #000;
    15.       width: 500px;
    16.       text-align: center;
    17.     }
    18.     /* 標題 */
    19.     .table-caption {
    20.       display: table-caption;
    21.     }
    22.     /* 表頭 */
    23.     .table-thead {
    24.       display: table-header-group;
    25.     }
    26.     /* 行 */
    27.     .table-row {
    28.       display: table-row;
    29.     }
    30.     /* 列 */
    31.     .table-cell {
    32.       display: table-cell;
    33.       border: 1px solid #000;
    34.       padding: 10px;
    35.     }
    36.     /* 主體 */
    37.     .table-tbody {
    38.       display: table-row-group;
    39.     }
    40.     /* 底部 */
    41.     .table-tfoot {
    42.       display: table-footer-group;
    43.     }
    44.     /* 列分組樣式 */
    45.     .table-colgroup {
    46.       display: table-column-group;
    47.     }
    48.     .table-colgroup .table-col:first-of-type {
    49.       display: table-column;
    50.       background-color: cyan;
    51.     }
    52.   </style>
    53. </head>
    54. <body>
    55.   <!-- 表格 -->
    56.   <div class="table">
    57.     <!-- 表格標題 -->
    58.     <div class="table-caption">員工信息表</div>
    59.     <!-- 列分組 -->
    60.     <div class="table-colgroup">
    61.       <div class="table-col"></div>
    62.       <div class="table-col"></div>
    63.       <div class="table-col"></div>
    64.     </div>
    65.     <!-- 表頭：thead -->
    66.     <div class="table-thead">
    67.       <!-- 行 -->
    68.       <div class="table-row">
    69.         <div class="table-cell">ID</div>
    70.         <div class="table-cell">姓名</div>
    71.         <div class="table-cell">職務</div>
    72.       </div>
    73.     </div>
    75.     <!-- 表格主體 -->
    76.     <div class="table-tbody">
    77.       <div class="table-row">
    78.         <div class="table-cell">1</div>
    79.         <div class="table-cell">張三</div>
    80.         <div class="table-cell">程序員</div>
    81.       </div>
    82.     </div>
    84.     <div class="table-tbody">
    85.       <div class="table-row">
    86.         <div class="table-cell">2</div>
    87.         <div class="table-cell">李四</div>
    88.         <div class="table-cell">組長</div>
    89.       </div>
    90.     </div>
    92.     <div class="table-tbody">
    93.       <div class="table-row">
    94.         <div class="table-cell">3</div>
    95.         <div class="table-cell">王五</div>
    96.         <div class="table-cell">程序員</div>
    97.       </div>
    98.     </div>
    99.     <!-- 表格尾部 -->
    100.     <div class="table-tfoot">
    101.       <div class="table-row">
    102.         <div class="table-cell">a</div>
    103.         <div class="table-cell">b</div>
    104.         <div class="table-cell">c</div>
    105.       </div>
    106.     </div>
    107.   </div>
    108. </body>
    109. </html>

  • 顯示結果：

四、學習總結

1.表格：

  • <table></table>:表格

  • <caption></caption>：表格標題

  • <thead></thead>:表格頭部

  • <tr></tr>:表示行

  • <th></th>:表格頭部單元格

  • <tbody></tbody>:表格主體內(nèi)容

  • <td></td>:單元格

  • <tfoot></tfoot>:表格尾部內(nèi)容

2.另一種表格：

  • 用css樣式與div結合來表示

  • .table:就表示<table>標簽，并設置display:table

  • .table-caption:就表示<caption>標簽，并設置display:table-caption

  • .table-thead:就表示<thead>標簽，并設置display:table-header-group

  • .table-row:就表示<tr>標簽，并設置display:table-row

  • .table-cell:就表示單元格，并設置display:table-cell

  • .table-tbody:就表示<tbody>標簽，并設置display:table-row-group

  • .table-tfoot:就表示<tfoot>標簽，并設置display:table-footer-group

  • .table-colgroup:表示列分組樣式，設置display: table-column-group;

3.表單：

  • <form action="跳轉地址" method="get/post">表單內(nèi)容</form>

  • <fieldset><legend>信息</legend></fieldset>: 控件組

  • <label for="#id">名稱：</label>:綁定到input標簽

  • <input type="text" id="" name="變量名稱" placeholder="占位符" autofocuse required/> 文本框

  • autofocuse輸入框默認顯示光標，required提交時對輸入框內(nèi)容進行判斷是否符合要求

  • <input type="password" id="" name="變量名稱" placeholder="占位符"> 密碼框

  • <input type="email" id="" name="" /> 郵箱

  • <input type="radio" id="" name="name" value="" /> 單選框

  • <input type="radio" id="" name="name" value="" /> 單選框

  • radio屬性name必須是相同的

  • <input type="checkbox" id="" name="name[]" value="" /> 多選框

  • 因為復選框返回的是一個值或多個值，最方便用后端數(shù)組來處理，所有將name名稱設置為數(shù)組形式便于后端腳本處理

  • <input type="file" id="" name="" accept="image/png,image/jpeg" />上傳文件

  • <input type="search" list="" name="name" />選項列表

  • 選項列表與datalist綁定<datalist id="name"><option value=""></option></datalist>

  • <textarea name="" id="" rows="" cols=""></textarea>多行文本框

  • <input type="hidden" name="" value="" />隱藏域，用于提交用戶信息，登錄時間

  • <input type="submit" value="提交" />提交按鈕，用于向服務端提交數(shù)據(jù)

批改老師：WJWJ

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

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

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

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