search

博客列表 >表格和表单的学习与应用

表格和表单的学习与应用

肖傲的博客
肖傲的博客原创
2020年06月17日 17:58:06663浏览

1.表格

  • 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
    示例如下：

    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.     table {
    9.       /* 去掉单元格之间的间隙 */
    10.       border-collapse: collapse;
    11.       width: 70%;
    12.       margin: auto;
    13.       color: gray;
    14.       /* 使用比较细的字体 */
    15.       font-weight: lighter;
    16.       /* 文字水平居中 */
    17.       text-align: center;
    18.     }
    19.     table thead th,
    20.     table td {
    21.       /* 边框 1px 实线 颜色黑色 */
    22.       border-bottom: 1px solid #000;
    23.       padding: 10px;
    24.     }
    25.     table caption {
    26.       /* 当前字体1.5倍字体大小 */
    27.       font-size: 1.5rem;
    28.       color: red;
    29.       /* 向下的外边距10px */
    30.       margin-bottom: 10px;
    31.     }
    32.     table th {
    33.       /* 字体粗细变成正常 */
    34.       font-weight: 400;
    35.       color: green;
    36.     }
    37.     /* 第一行添加背景色 */
    38.     table thead tr:first-of-type {
    39.       background-color: yellow;
    40.     }
    41.     /* 偶数行添加背景色 */
    42.     table tbody tr:nth-of-type(even) {
    43.       background-color: pink;
    44.     }
    45.     /* 鼠标悬停后更改背景色 */
    46.     table tbody tr:hover {
    47.       background-color: skyblue;
    48.     }
    49.     /* 底部样式 */
    50.     table tfoot td {
    51.       /* 去掉底部边框 */
    52.       border-bottom: none;
    53.       color: tomato;
    54.       /* 字体加粗 */
    55.       font-weight: 600;
    56.     }
    57.     /* 结算按键样式 */
    58.     /* 取最后一个 */
    59.     body div:last-of-type {
    60.       width: 70%;
    61.       /* 上下10px 左右居中的外边距 */
    62.       margin: 10px auto;
    63.     }
    64.     /* 取一个button */
    65.     body div:first-of-type button {
    66.       /* 向右浮动 */
    67.       float: right;
    68.       width: 120px;
    69.       height: 32px;    
    70.       background-color: #B0B0B0;
    71.       color: white;
    72.       border: none;
    73.       /* 设置鼠标样式 */
    74.       cursor: pointer; 
    75.     }
    76.     body div:first-of-type button:hover {
    77.       background-color: #FF4400;
    78.     }
    79.   </style>
    80. </head>
    81. <body>
    82.   <!-- 表格 -->
    83.   <table>
    84.     <!-- 标题 -->
    85.     <caption>
    86.       618购物车
    87.     </caption>
    88.     <!-- 头部 -->
    89.     <thead>
    90.       <tr>
    91.         <th>商品编号</th>
    92.         <th>商品名称</th>
    93.         <th>原价</th>
    94.         <th>单位</th>
    95.         <th>数量</th>
    96.         <th>实际付款金额</th>
    97.       </tr>
    98.     </thead>
    99.     <tr>
    100.       <td>SN-1001</td>
    101.       <td>外星人笔记本</td>
    102.       <td>28888</td>
    103.       <td>台</td>
    104.       <td>1</td>
    105.       <td>18888</td>
    106.     </tr>
    107.     <tr>
    108.       <td>SN-1002</td>
    109.       <td>海尔冰箱</td>
    110.       <td>4888</td>
    111.       <td>台</td>
    112.       <td>1</td>
    113.       <td>3888</td>
    114.     </tr>
    115.     <tr>
    116.       <td>SN-1003</td>
    117.       <td>荣耀电视65寸</td>
    118.       <td>3888</td>
    119.       <td>台</td>
    120.       <td>1</td>
    121.       <td>2888</td>
    122.     </tr>
    123.     <tr>
    124.       <td>SN-1004</td>
    125.       <td>华为手机</td>
    126.       <td>7888</td>
    127.       <td>台</td>
    128.       <td>1</td>
    129.       <td>5888</td>
    130.     </tr>
    131.     <tbody>
    132.       <!-- 底部 -->
    133.       <tfoot>
    134.         <tr>
    135.           <!-- 表格合并 -->
    136.           <td colspan="4">合计付款金额：</td>
    137.           <td>4</td>
    138.           <td>31552</td>
    139.         </tr>
    140.       </tfoot>
    141.     </tbody>
    142.   </table>
    143.   <div>
    144.     <button>
    145.       结算
    146.     </button>
    147.   </div>
    148. </body>
    149. </html>

  • 表格其他生成方法
    主要使用 div 、display 、class 组成
    示例如下：

    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.     .table {
    10.       /* 设置元素显示类型 */
    11.       display: table;
    12.       /* 边框 */
    13.       border: 1px solid #000;
    14.       width: 600px;
    15.       /* 水平居中 */
    16.       text-align: center;
    17.       /* 垂直居中 */
    18.       margin: auto;
    19.     }
    20.     /* 设置标题 */
    21.     .table-caption {
    22.       display: table-caption;
    23.       /* 底部外边距10px */
    24.       margin-bottom: 10px;
    25.       font-size: 1.3rem;
    26.     }
    27.     /* 设置表头 */
    28.     .table-thead {
    29.       display: table-header-group;
    30.       /* background-color: #ccc; */
    31.     }
    32.     .h4 {
    33.       font-weight: 700;
    34.     }
    35.     .bgc1 {
    36.       background-color: #0075BA;
    37.       color: whitesmoke;
    38.     }
    39.     .bgc2 {
    40.       background-color: #D4ECE6;
    41.     }
    42.     .bgc3 {
    43.       background-color: #FFEDCD;
    44.     }
    45.     .bgc4 {
    46.       background-color: #e6e6e6;
    47.     }
    48.     /* 设置行 */
    49.     .table-row {
    50.       display: table-row;
    51.     }
    52.     /* 设置列 */
    53.     .table-cell {
    54.       display: table-cell;
    55.       border: 1px solid #000;
    56.       padding: 5px;
    57.     }
    58.     /* 设置主体 */
    59.     .table-tbody {
    60.       display: table-row-group;
    61.     }
    62.     /* 设置底部 */
    63.     .table-tfoot {
    64.       display: table-footer-group;
    65.       background-color: #FEDDC6;
    66.     }
    67.     /* 设置列分组样式 */
    68.     .table-colgroup {
    69.       display: table-column-group;
    70.     }
    71.     .table-colgroup .table-col:first-of-type {
    72.       display: table-column;
    73.       /* background-color: skyblue; */
    74.     }
    75.     .table-colgroup .table-col {
    76.       display: table-column;
    77.       /* background-color: pink; */
    78.     }
    79.   </style>
    80. </head>
    81. <body>
    82.   <!-- 表格 -->
    83.   <div class="table">
    84.     <!-- 标题caption -->
    85.     <div class="table-caption">学习表</div>
    86.     <!-- 列分组 -->
    87.     <div class="table-colgroup">
    88.       <div class="table-col"></div>
    89.       <div class="table-col"></div>
    90.       <div class="table-col"></div>
    91.     </div>
    93.     <!-- 表头thead -->
    94.     <div class="table-thead">
    95.       <!-- 行 -->
    96.       <div class="table-row bgc1">
    97.         <div class="table-cell">时间</div>
    98.         <div class="table-cell">周一</div>
    99.         <div class="table-cell">周二</div>
    100.         <div class="table-cell">周三</div>
    101.         <div class="table-cell">周四</div>
    102.         <div class="table-cell">周五</div>
    103.         <div class="table-cell">周六</div>
    104.         <div class="table-cell">周日</div>
    105.       </div>
    106.       <div class="table-row bgc1">
    107.         <div class="table-cell"></div>
    108.         <div class="table-cell">6月15日</div>
    109.         <div class="table-cell">6月16日</div>
    110.         <div class="table-cell">6月17日</div>
    111.         <div class="table-cell">6月18日</div>
    112.         <div class="table-cell">6月19日</div>
    113.         <div class="table-cell">6月20日</div>
    114.         <div class="table-cell">6月21日</div>
    115.       </div>
    116.     </div>
    118.     <!-- 主体 -->
    119.     <div class="table-tbody">
    120.       <div class="table-row bgc2">
    121.         <div class="table-cell h4">早上</div>
    122.         <div class="table-cell">英语</div>
    123.         <div class="table-cell">英语</div>
    124.         <div class="table-cell">英语</div>
    125.         <div class="table-cell">英语</div>
    126.         <div class="table-cell">英语</div>
    127.         <div class="table-cell">自由活动</div>
    128.         <div class="table-cell">自由活动</div>
    129.       </div>
    130.       <div class="table-row bgc2">
    131.         <div class="table-cell h4">上午</div>
    132.         <div class="table-cell">写作业</div>
    133.         <div class="table-cell">写作业</div>
    134.         <div class="table-cell">写作业</div>
    135.         <div class="table-cell">写作业</div>
    136.         <div class="table-cell">写作业</div>
    137.         <div class="table-cell">自由活动</div>
    138.         <div class="table-cell">自由活动</div>
    139.       </div>
    140.       <div class="table-row bgc3">
    141.         <div class="table-cell h4">中午</div>
    142.         <div class="table-cell">休息</div>
    143.         <div class="table-cell">休息</div>
    144.         <div class="table-cell">休息</div>
    145.         <div class="table-cell">休息</div>
    146.         <div class="table-cell">休息</div>
    147.         <div class="table-cell">自由活动</div>
    148.         <div class="table-cell">自由活动</div>
    149.       </div>
    150.       <div class="table-row bgc4">
    151.         <div class="table-cell h4">下午</div>
    152.         <div class="table-cell">预习课程</div>
    153.         <div class="table-cell">预习课程</div>
    154.         <div class="table-cell">预习课程</div>
    155.         <div class="table-cell">预习课程</div>
    156.         <div class="table-cell">预习课程</div>
    157.         <div class="table-cell">看回放</div>
    158.         <div class="table-cell">看回放</div>
    159.       </div>
    160.     </div>
    162.     <!-- 底部tfoot -->
    163.     <div class="table-tfoot">
    164.       <div class="table-row ">
    165.         <div class="table-cell h4">晚上</div>
    166.         <div class="table-cell">上课</div>
    167.         <div class="table-cell">上课</div>
    168.         <div class="table-cell">上课</div>
    169.         <div class="table-cell">上课</div>
    170.         <div class="table-cell">上课</div>
    171.         <div class="table-cell">看回放</div>
    172.         <div class="table-cell">看回放</div>
    173.     </div>
    174.   </div>
    175. </body>
    176. </html>

    2.表单

  • 表单用于搜集不同类型的用户输入。
  • <form>标签定义了表单，表单是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.      h3 {
    12.        font-size: 18px;
    13.        /* 居中 */
    14.        text-align: center;
    15.        color: #8E8E8E;
    16.        /* 正常粗细 */
    17.        font-weight: 400;
    18.      }
    19.      form {
    20.        width: 450px;
    21.        margin: 30px auto;
    22.        /* 加边框 */
    23.        border-top: 1px solid #aaa;
    24.      }
    25.      form fieldset {
    26.          /* 加边框 */
    27.        border: 1px solid #fff;
    28.        background-color: #FEF2FC;
    29.        /* 增加阴影 */
    30.        box-shadow: 2px 2px 4px #bbb;
    31.        border-radius: 10px;
    32.        margin: 20px;
    33.      }
    34.      form fieldset legend {
    35.        background-color: #eb648a;
    36.        /* 边框圆角 */
    37.        border-radius: 10px;
    38.        color: #15B2DF;
    39.        padding: 5px 15px;
    40.      }
    41.      form div {
    42.        margin: 5px;
    43.      } 
    44.      form p {
    45.        text-align: center;
    46.      }
    47.      form .btn {
    48.        font-size: 28px;
    49.        width: 278px;
    50.        height: 49px;
    51.        border: none;
    52.        background-color: #FF536A;
    53.        color: #ddd;
    54.      }
    55.      form .btn:hover {
    56.        font-size: 30px;
    57.        background-color: #F22843;
    58.        color: white;
    59.        /* 改光标样式 */
    60.        cursor: pointer;
    61.      }  
    62.      input:focus {
    63.        background-color: #f595a2;
    64.      }
    65.      form ul li {
    66.          /* 居中 */
    67.          text-align: center;
    68.          /* 去除li样式 */
    69.          list-style: none;
    70.      }
    71.      form ul .member a {
    72.          color: #929191;
    73.      }
    74.      form ul li a:hover {
    75.          /* 去除下划线 */
    76.          text-decoration: none;
    77.      }
    78.    </style>
    79. </head>
    80. <body>
    81.  <h3>1分钟注册，享一辈子幸福！</h3>
    82.  <!-- form标签 -->
    83.  <form action="" method="POST">
    84.      <!-- 控件组 -->
    85.      <fieldset>
    86.          <legend>账户信息（必填）</legend>
    87.          <div>
    88.              <label for="my-name">账号:</label>
    89.              <input 
    90.                type="text"
    91.                id="my-username"
    92.                name="username"
    93.                placeholder="不少于6位且字母+数字"
    94.                autofocus
    95.                required 
    96.              >
    97.          </div>
    98.          <div>
    99.              <label for="">邮箱:</label> 
    100.              <input 
    101.              type="email"
    102.              name="email"
    103.              id="email"
    104.              placeholder="xxx@xxx.com"
    105.              required
    106.              >
    107.          </div>
    108.          <div>
    109.              <label for="pwd-1">密码:</label>
    110.              <input type="password" name="password2" id="pwd-1">
    111.          </div>
    112.      </fieldset>        
    113.      <fieldset>
    114.          <legend>个人信息（选填）</legend>
    115.          <div>
    116.              <label>
    117.                  <input type="date" name="birthday">
    118.              </label>
    119.          </div>
    121.          <div>
    122.              <!-- 单选按钮 -->
    123.              <label for="secret">性别</label>
    124.              <!-- 单选按钮中的name属性名必须相同 -->
    125.              <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>                
    126.              <input type="radio" name="gender" value="female" id="female"><label for="female">女</label>
    127.          </div>
    128.          <div>
    129.              <!-- 单选按钮 -->
    130.              <label for="marr">婚姻</label>
    131.              <input type="radio" name="m-wh" value="1" id="m-wh" checked><label for="m-wh">未婚</label>    
    132.              <input type="radio" name="m-ly" value="2" id="m-ly"><label for="m-ly">离异</label>
    133.              <input
    134.              type="radio"
    135.              name="m-so"
    136.              value="3"
    137.              id="m-so"
    138.              /><label for="m-so">丧偶</label>
    139.          </div>
    140.          <div>
    141.              <!-- 复选框 -->
    142.              <label for="reading">爱好</label>
    143.              <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理， 所以将name名称设置为数组形式便于后端脚本处理 -->
    144.              <input type="checkbox" name="hobby[]" id="reading" value="reading" /><label
    145.              for="reading">读书</label>
    146.              <input
    147.               type="checkbox"
    148.               name="hobby[]"
    149.               value="shoot"
    150.               id="shoot"
    151.              /><label for="shoot">摄影</label>
    152.              <input
    153.               type="checkbox"
    154.               name="hobby[]"
    155.               value="sport"
    156.               id="sport"
    157.               checked
    158.              /><label for="sport">运动</label>
    159.          </div>
    160.          <div>
    161.              <!-- 选项列表 -->
    162.              <label for="education">学历:</label>
    163.              <input type="search" list="edu" name="education" id="education" />
    164.              <datalist id="edu">
    165.              <option value="undergraduate" label="大学本科"></option>
    166.              <option value="Graduate" label="研究生"></option>
    167.              <option value="doctor" label="博士"> </option>
    168.              </datalist>
    169.          </div>
    170.      </fieldset>
    171.      <fieldset>
    172.          <legend>其它信息(选填)</legend>
    173.          <!--文件上传-->
    174.          <div>
    175.            <label for="uploads">上传头像:</label>
    176.            <input
    177.              type="file"
    178.              name="user_pic"
    179.              id="uploads"
    180.              accept="image/png, image/jpeg, image/gif"
    181.            />
    182.          </div>
    183.          <!--文本域-->
    184.          <div>
    185.            <label for="resume">自我介绍:</label>
    186.            <!--注意文本域没有value属性-->
    187.            <textarea
    188.              name="resume"
    189.              id="resume"
    190.              cols="30"
    191.              rows="5"
    192.              placeholder="不超过100字"
    193.            ></textarea>
    194.          </div>
    195.        </fieldset>
    196.        <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
    197.        <input type="hidden" name="user-id" value="123">
    198.        <p>
    199.            <input type="submit" value="免费注册" class="btn">
    200.        </p>
    201.        <ul>
    202.            <li class="member"><a href="#">我是会员，立即登录</a></li>
    203.        </ul>
    204.  </form>      
    205. </body>
    206. </html>

总结：正常表格的单元格合并比较简单，使用display生成的表格的单元格合并比较难。表单的控件比较多，需要多记。

上一条：表格实现购物车及表单实现下一条：用表格制作简单的购物车和用户注册页面-web前端第5章6.12
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多