Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格与表单实战练习
Blogger Information
Blog 55
fans 3
comment 0
visits 54665
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
表格与表单实战练习
王佳祥
Original
767 people have browsed it

表格与表单实战练习

一、表格(购物车)

  • 代码：

    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.     /* 设置表格宽度，居中显示在网页上，并且内部居中对齐 */
    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.     /* 设置单元格的下边框，内边距 */
    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的鼠标点击状态为小手，字体为蓝色，背景为浅橘色，字体为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.     /* 设置表格主体的偶数行背景颜色 */
    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.     /* 设置鼠标滑过表格主体内容时的背景颜色 */
    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>数量</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>数量：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元素背景颜色，圆角，字体颜色，内边距*/
    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位，且字母加数字"
    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位，且字母加数字"
    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.         <!-- 因为复选框返回的是一个值或多个值，最方便用后端数组来处理，所有将name名称设置为数组形式便于后端脚本处理 -->
    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>:表格主体内容

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

  • <tfoot></tfoot>:表格尾部内容

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">表单内容</form>

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

  • <label for="#id">名称：</label>:绑定到input标签

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

  • autofocuse输入框默认显示光标，required提交时对输入框内容进行判断是否符合要求

  • <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="" /> 多选框

  • 因为复选框返回的是一个值或多个值，最方便用后端数组来处理，所有将name名称设置为数组形式便于后端脚本处理

  • <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="提交" />提交按钮，用于向服务端提交数据

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