search

博客列表 >PHP大牛成长之路：完整表格与表单

PHP大牛成长之路：完整表格与表单

周Sir-BLOG
周Sir-BLOG原创
2020年06月17日 19:49:57729浏览

1、表格

1.1、完整表格标签如下表

ID 标签 说明
1 table 定义 HTML 表格。
2 caption 定义表格标题。
3 colgroup 对表格中的列进行组合，以便对其进行格式化。
4 col 为表格中一个或多个列定义属性值。
5 thead 定义表格头部。
6 tbody 定义表格主体。
7 tfoot 定义表格底部。
8 th 定义表格内的表头单元格。
9 tr 定义表格中的行。
10 td 定义表格中的单元格。

1.2、完整表格示例:购物车

  • 图示：

  • 完整代码如下：
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  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.       font: 14px/1.5 Microsoft Yahei,sans-serif;
  10.       background-color: #f5f5f5;
  11.       color: #424242;
  12.       margin: 0;
  13.       padding: 0;
  14.     }
  15.     table{
  16.       border-collapse: collapse;
  17.       width: 960px;
  18.       margin: auto;
  19.       text-align: left;
  20.     }
  21.     table caption{
  22.       margin-bottom: 10px;
  23.       height: 50px;
  24.       font-size: 30px;
  25.       font-weight: 400;
  26.       color: #757575;
  27.       border-bottom: 1px solid #e0e0e0;
  28.       background-color: #fff;
  29.     }
  31.     table thead th{
  32.       background-color: #fff;
  33.       height: 50px;
  34.       font-weight:inherit;
  35.       color: #424242;
  36.       font-size: 14px;
  37.       padding: 5px;
  38.       border-bottom: 1px solid #e0e0e0;
  39.     }
  40.     table tbody tr{
  41.       height: 50px;
  42.       background-color: #fff;
  43.       border-bottom: 1px solid #e0e0e0;
  44.       padding: 10px;
  45.     }
  46.     table tbody tr:hover {
  47.         background-color: #f5f5f5;
  48.     }
  50.     table tbody tr td a{
  51.       text-decoration:none;
  52.       color: #424242;
  54.     }
  55.     table tbody tr td a:hover{
  56.       text-decoration:none;
  57.       color: #ff6700;
  59.     }
  60.     table tfoot tr td{
  61.       background-color: #fff;
  62.       height: 50px;
  63.       line-height: 50px;
  64.       color:#ff6700;
  65.       padding: 5px;
  66.     } 
  67.     table tfoot span{
  68.       width: 100px;
  69.       height: 35px;
  70.       line-height: 35px;
  71.       display: block;
  72.       color: #666;
  73.       background-color: #f5f5f5;
  74.       text-align: center;
  75.       margin: auto 5px;
  76.       float: right;
  77.       font-weight:bold;
  78.       cursor: pointer;
  79.     }
  80.     table tfoot span:hover{
  81.       background-color: #e0e0e0;
  82.       color:#ff6700;
  83.     }
  84.     table tfoot em{
  85.       font-size: 1.5rem;
  87.     }
  89.   </style>
  90.   <body>
  92.     <!-- 表格 -->
  93.     <table>
  94.         <!-- 标题 -->
  95.         <caption>
  96.           购物车
  97.         </caption>
  98.        <!-- 头部 -->
  99.       <thead>
  100.         <tr>
  101.           <th>商品名称</th>
  102.           <th>单价/元</th>
  103.           <th>优惠</th>
  104.           <th>数量</th>
  105.           <th>金额合计</th>
  106.           <th>操作</th>
  107.         </tr>
  108.       </thead>
  109.       <!-- 主体 -->
  110.       <tbody>
  111.         <tr>
  112.           <td>华为p30 pro</td>
  113.           <td>3999.00</td>
  114.           <td>-500.00</td>
  115.           <td>1</td>
  116.           <td>3499.00</td>
  117.           <td><a href="#">收藏</a> | <a href="#">删除</a></td>
  118.         </tr>
  119.         <tr>
  120.           <td>华为p30 pro碎屏保险</td>
  121.           <td>9.90</td>
  122.           <td>0</td>
  123.           <td>1</td>
  124.           <td>9.90</td>
  125.           <td><a href="#">收藏</a> | <a href="#">删除</a></td>
  126.         </tr>       
  127.       </tbody>
  128.       <!-- 底部 -->
  129.       <tfoot>
  130.         <tr>
  131.           <td colspan="4">合计（不含运费）：<em>5555.00</em> 元</td>
  132.           <td colspan="2"><span>清空购物车</span><span>去结算</span></td>
  133.         </tr>
  134.       </tfoot>
  135.     </table>
  136.   </body>
  137. </html>

2、表单

2.1、基本表单元素

ID 标签 说明
1 form 创建 HTML 表单。
2 fieldset 表单内的相关元素分组。
3 legend 为 fieldset 元素定义标题（caption）
4 label 为 input 元素定义标注（标记）
5 input 用于搜集用户信息，类型：button/checkbox/file/hidden/image/password/radio/reset/submit/text
6 textarea 多行的文本输入控件
7 button 定义一个按钮
8 select 创建单选或多选菜单。
9 datalist 定义选项列表。
10 option 义下拉列表中的一个选项（一个条目）。

除以上基本表单外，还有很多表单元素，后期慢慢学习。

2.2、表单示例-用户注册

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>基本表单-用户注册</title>
  7.   </head>
  9.   <body>
  10.     <div>用户注册</div>
  11.     <div>
  12.       <form action="" method="POST">
  13.         <fieldset>
  14.           <legend>基本信息(必填)</legend>
  15.           <div>
  16.             <label
  17.               >用户名:
  18.               <input
  19.                 type="text"
  20.                 name="user"
  21.                 placeholder="请输入用户名或手机"
  22.                 autofocus
  23.               />
  24.             </label>
  25.           </div>
  26.           <div>
  27.             <label
  28.               >邮箱:
  29.               <input type="email" name="email" placeholder="请输入邮箱" />
  30.             </label>
  31.           </div>
  32.           <div>
  33.             <label
  34.               >密码: <input type="password"" name="pwd" placeholder="请输入密码"
  35.               />
  36.             </label>
  37.           </div>
  38.           <div>
  39.             <label
  40.               >确认密码:
  41.               <input type="password" name="pwd2" placeholder="请再次输入密码" />
  42.             </label>
  43.           </div>
  44.         </fieldset>
  46.         <fieldset>
  47.           <legend>扩展信息(选填)</legend>
  48.           <div>
  49.             <label
  50.               >生日:
  51.               <input type="date" name="birthday" />
  52.             </label>
  53.           </div>
  54.           <div>
  55.             <!-- <label for="male"> for对应input ID，点击label可以使input获得焦点 -->
  56.             <label for="secret">性别:</label>
  57.             <input type="radio" name="gender" value="male" id="male" /><label
  58.               for="male"
  59.               >男</label
  60.             >
  61.             <input
  62.               type="radio"
  63.               name="gender"
  64.               value="female"
  65.               id="female"
  66.             /><label for="female">女</label>
  67.             <input
  68.               type="radio"
  69.               name="gender"
  70.               value="secret"
  71.               id="secret"
  72.               checked
  73.             /><label for="secret">保密</label>
  74.           </div>
  75.           <div>
  76.             <label for="programme">爱好</label>
  77.             <!-- name设置数组形式便于后端脚本处理 -->
  78.             <input type="checkbox" name="hobby[]" id="php" value="php" /><label
  79.               for="php"
  80.               >php</label
  81.             >
  82.             <input
  83.               type="checkbox"
  84.               name="hobby[]"
  85.               value="html"
  86.               id="html"
  87.             /><label for="html">html</label>
  88.             <input
  89.               type="checkbox"
  90.               name="hobby[]"
  91.               value="java"
  92.               id="java"
  93.               checked
  94.             /><label for="java">java</label>
  95.           </div>
  97.           <div>
  98.             <label for="brand">手机品牌:</label>
  99.             <input type="search" list="phone" name="brand" id="brand" />
  100.             <datalist id="phone">
  101.               <option value="apple" label="苹果"></option>
  102.               <option value="huawei" label="华为"></option>
  103.               <option value="mi" label="小米"> </option>
  104.             </datalist>
  105.           </div>
  106.         </fieldset>
  108.         <fieldset>
  109.           <legend>其它信息(选填)</legend>
  110.           <div>
  111.             <label for="uploads">上传头像:</label>
  112.             <input
  113.               type="file"
  114.               name="user_pic"
  115.               id="uploads"
  116.               accept="image/png, image/jpeg, image/gif"
  117.             />
  118.           </div>
  119.           <div>
  120.             <label for="resume">简历:</label>
  121.             <textarea
  122.               name="resume"
  123.               id="resume"
  124.               cols="30"
  125.               rows="5"
  126.               placeholder="不超过100字"
  127.             ></textarea>
  128.           </div>
  129.         </fieldset>
  130.         <!-- 隐藏域，用于获取不需要用户输入的数据 -->
  131.         <input type="hidden" name="user_id" value="123" />
  132.         <p>
  133.           <input type="reset" value="重置" class="btn" />
  134.           <button class="btn">提交</button>
  135.         </p>
  136.       </form>
  137.     </div>
  138.   </body>
  139. </html>

由于时间关系，未作样式优化，仅演示基础用法。

总结

  • 对表格有了一定的理解，通过表格，可以很方便的展现数据列表； 除了表格外，任何标签都可以使用CSS的display属性变为表格形式。
  • 对常用表单元素进行了学习，理解了获取用户信息所用的元素，期待后期的课程，如何获取表单的值。
上一条：表单注册页面与表格购物车的制作代码和部分代码讲解下一条：编写一个实用的导航下拉菜单！（0612）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多