search

博客列表 >表格与表单实战练习

表格与表单实战练习

王佳祥
王佳祥原创
2020年06月17日 13:55:59775浏览

表格与表单实战练习

一、表格(购物车)

  • 代码：

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

上一条：2020年国外八个优秀python爬虫框架推荐下一条：CSS引入方式、A标签的作用、定位、列表、Js事件、HTML+CSS+JS实现下拉菜单
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多