search

博客列表 >表格与表单学习

表格与表单学习

遇见
遇见原创
2020年06月18日 17:19:21579浏览

1.表格的学习，以购物车为例，详细如下：

  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 type="text/css">
  8.       /* 浏览器默认外边距8像素，全部初始化0 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       .table {
  14.         width: 70%;
  15.         /* 表格边框线实心，去掉间隙 */
  16.         border-collapse: collapse;
  17.         /* 表格文字水平居中对齐 */
  18.         text-align: center;
  19.         /* 表格水平居中对齐 */
  20.         margin: auto;
  21.       }
  22.       .table caption {
  23.         /* 标题上下外边距10像素，左右自动，也就是水平居中 */
  24.         margin: 10px auto;
  25.         font-size: 20px;
  26.       }
  27.       .table tr th,
  28.       .table tr td {
  29.         border-bottom: 1px solid #efef;
  30.         /* 字体显示更细 */
  31.         font-weight: lighter;
  32.         /* 表格内容内边距10像素 */
  33.         padding: 10px;
  34.       }
  35.       /* 表格头部第一个设置背景颜色 */
  36.       .table thead tr:first-child {
  37.         background: lightgreen;
  38.       }
  39.       /* 表格内容主题，分组后偶数行显示背景颜色，也就是表格隔行换色 */
  40.       .table tbody tr:nth-of-type(even) {
  41.         background: #eeeeee;
  42.       }
  43.       /* 光标移到表格行上后，表格背景颜色改变 */
  44.       .table tbody tr:hover {
  45.         background: palegoldenrod;
  46.       }
  47.       .table tfoot {
  48.         font-size: 18px;
  49.         color: coral;
  50.       }
  51.       /* body内容分组后，第一个div设置宽度和外边距 */
  52.       body div:first-of-type {
  53.         width: 70%;
  54.         /* 外边距：上10像素，下0像素，左右边距自动 */
  55.         margin: 10px auto 0px;
  56.       }
  57.       button {
  58.         width: 90px;
  59.         height: 35px;
  60.         /* 这个是圆角样式 */
  61.         border-radius: 4px;
  62.         color: #ffffff;
  63.         background: darkcyan;
  64.         /* 这个是去掉点击后的外边框虚线 */
  65.         outline: none;
  66.         float: right;
  67.       }
  68.       /* 光标移上去样式 */
  69.       button:hover {
  70.         /* 光标移上去后，改变光标形状，pointer表示小手形状 */
  71.         cursor: pointer;
  72.         background: darkolivegreen;
  73.         font-size: 18px;
  74.       }
  75.     </style>
  76.   </head>
  77.   <body>
  78.     <table class="table">
  79.       <caption>
  80.         购物车
  81.       </caption>
  82.       <thead>
  83.         <tr>
  84.           <th>商品编码</th>
  85.           <th>商品名称</th>
  86.           <th>数量</th>
  87.           <th>单价/元</th>
  88.           <th>金额</th>
  89.         </tr>
  90.       </thead>
  92.       <tbody>
  93.         <tr>
  94.           <td>NO2020061801</td>
  95.           <td>小米笔记本</td>
  96.           <td>1</td>
  97.           <td>7899.00</td>
  98.           <td>7899.00</td>
  99.         </tr>
  100.         <tr>
  101.           <td>NO2020061802</td>
  102.           <td>鼠标垫</td>
  103.           <td>2</td>
  104.           <td>8.00</td>
  105.           <td>16.00</td>
  106.         </tr>
  107.         <tr>
  108.           <td>NO2020061803</td>
  109.           <td>毛峰茶</td>
  110.           <td>1</td>
  111.           <td>20.00</td>
  112.           <td>20.00</td>
  113.         </tr>
  114.         <tr>
  115.           <td>NO2020061804</td>
  116.           <td>农夫山泉</td>
  117.           <td>1</td>
  118.           <td>2.00</td>
  119.           <td>2.00</td>
  120.         </tr>
  121.       </tbody>
  122.       <tfoot>
  123.         <tr>
  124.         <!-- colspan表示横向合并单元格，rowspan表示纵向合并单元格，后面跟上合并单元格数量，并且删除对应数量的单元格 -->
  125.           <td colspan="2">合计：</td>
  126.           <td>5</td>
  127.           <td> </td>
  128.           <td>7937.00</td>
  129.         </tr>
  130.       </tfoot>
  131.     </table>
  132.     <div>
  133.       <button>结算</button>
  134.     </div>
  135.   </body>
  136. </html>

运行结果截图：

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 type="text/css">
  8.       /* 浏览器默认外边距8像素，全部初始化0 */
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       input,
  14.       textarea {
  15.         outline: none;
  16.         padding: 0 10px;
  17.         border-radius: 5px;
  18.         border: none;
  19.       }
  20.       textarea {
  21.         line-height: 25px;
  22.       }
  23.       input[type="text"],
  24.       input[type="password"],
  25.       input[type="email"] {
  26.         height: 25px;
  27.         line-height: 25px;
  28.       }
  29.       input[type="radio"],
  30.       input[type="checkbox"] {
  31.         margin-left: 10px;
  32.         margin-right: 5px;
  33.       }
  34.       input[type="button"] {
  35.         background: mediumspringgreen;
  36.         color: navy;
  37.         padding: 5px;
  38.         cursor: pointer;
  39.       }
  40.       .regbox {
  41.         height: 100vh;
  42.         display: flex;
  43.         justify-content: center;
  44.         align-items: center;
  45.         font-weight: lighter;
  46.       }
  47.       .applyBox {
  48.         width: 500px;
  49.         color: #666;
  50.       }
  51.       .applyBox .title {
  52.         text-align: center;
  53.         font-size: 20px;
  54.         margin: 10px 0px;
  55.       }
  57.       .forminfo fieldset {
  58.         font-size: 14px;
  59.         padding: 10px;
  60.         margin-bottom: 10px;
  61.         border-radius: 10px;
  62.         background: linen;
  63.       }
  64.       .forminfo fieldset:last-of-type {
  65.         margin-bottom: 0px;
  66.       }
  67.       .forminfo fieldset div:not(:last-of-type) {
  68.         margin-bottom: 10px;
  69.       }
  70.       .forminfo fieldset div label:first-of-type {
  71.         width: 80px;
  72.         display: inline-block;
  73.       }
  74.       .applyBox .btnBox {
  75.         text-align: center;
  76.       }
  77.       .btnBox .submitBtn {
  78.         width: 90px;
  79.         height: 35px;
  80.         /* 这个是圆角样式 */
  81.         border-radius: 4px;
  82.         color: #ffffff;
  83.         background: darkcyan;
  84.         /* 这个是去掉点击后的外边框虚线 */
  85.         outline: none;
  86.         margin-top: 10px;
  87.       }
  88.       /* 光标移上去样式 */
  89.       .btnBox .submitBtn:hover {
  90.         /* 光标移上去后，改变光标形状，pointer表示小手形状 */
  91.         cursor: pointer;
  92.         background: darkolivegreen;
  93.         font-size: 18px;
  94.       }
  95.     </style>
  96.   </head>
  97.   <body>
  98.     <div class="regbox">
  99.       <form action="">
  100.         <div class="applyBox">
  101.           <div class="title">用户注册</div>
  102.           <div class="forminfo">
  103.             <fieldset>
  104.               <legend>基本信息（必填）</legend>
  105.               <div>
  106.                 <!-- for的值要与input的id对应，这样点击lable也能直接点中input -->
  107.                 <!-- required只在submit提交表单时生效，可以提示必录 -->
  108.                 <!-- autofocus默认光标选中 -->
  109.                 <label for="userName">用户名称：</label>
  110.                 <input
  111.                   type="text"
  112.                   id="userName"
  113.                   name="userName"
  114.                   placeholder="请输入用户名"
  115.                   required
  116.                   autofocus
  117.                 />
  118.               </div>
  119.               <div>
  120.                 <label for="email">邮箱号：</label>
  121.                 <input
  122.                   type="email"
  123.                   id="email"
  124.                   name="email"
  125.                   placeholder="请输入邮箱号"
  126.                   required
  127.                 />
  128.               </div>
  129.               <div>
  130.                 <label for="password">密码：</label>
  131.                 <input
  132.                   type="password"
  133.                   id="password"
  134.                   name="password"
  135.                   placeholder="******"
  136.                   required
  137.                 />
  138.                 <input type="button" data-showid="password" value="显示密码" />
  139.               </div>
  140.               <div>
  141.                 <label for="confitmPwd">确认密码：</label>
  142.                 <input
  143.                   type="password"
  144.                   id="confitmPwd"
  145.                   name="confitmPwd"
  146.                   placeholder="******"
  147.                   required
  148.                 />
  149.                 <input
  150.                   type="button"
  151.                   data-showid="confitmPwd"
  152.                   value="显示密码"
  153.                 />
  154.               </div>
  155.             </fieldset>
  156.             <fieldset>
  157.               <legend>扩展信息（选填）</legend>
  158.               <div>
  159.                 <label for="birthday">生日：</label>
  160.                 <input type="date" id="birthday" name="birthday" />
  161.               </div>
  162.               <div>
  163.                 <label for="gender">性别：</label>
  164.                 <input type="radio" id="male" name="sex" value="0" /><label
  165.                   for="male"
  166.                   >男</label
  167.                 >
  168.                 <input type="radio" id="female" name="sex" value="1" /><label
  169.                   for="female"
  170.                   >女</label
  171.                 >
  172.                 <input type="radio" id="gender" name="sex" value="2" /><label
  173.                   for="gender"
  174.                   >保密</label
  175.                 >
  176.               </div>
  177.               <div>
  178.                 <label for="read">爱好：</label>
  179.                 <input type="checkbox" id="read" name="like" value="0" />
  180.                 <label for="read">阅读</label>
  182.                 <input type="checkbox" id="friends" name="like" value="1" />
  183.                 <label for="friends">交友</label>
  185.                 <input type="checkbox" id="game" name="like" value="2" />
  186.                 <label for="game">游戏</label>
  187.               </div>
  188.               <div>
  189.                 <label for="phone">手机号：</label>
  190.                 <input
  191.                   type="text"
  192.                   id="phone"
  193.                   name="phone"
  194.                   placeholder="请输入11位手机号"
  195.                 />
  196.               </div>
  197.             </fieldset>
  198.             <fieldset>
  199.               <legend>其他</legend>
  200.               <div>
  201.                 <label for="userimg">用户头像：</label>
  202.                 <input type="file" id="userimg" name="userimg" />
  203.               </div>
  204.               <div>
  205.                 <label for="introduce" style="vertical-align: top;"
  206.                   >个人介绍：</label
  207.                 >
  208.                 <textarea
  209.                   name="introduce"
  210.                   id="introduce"
  211.                   cols="30"
  212.                   rows="3"
  213.                   placeholder="请输入个人介绍"
  214.                 ></textarea>
  215.               </div>
  216.             </fieldset>
  217.           </div>
  218.           <div class="btnBox">
  219.             <button type="submit" class="submitBtn">提交</button>
  220.           </div>
  221.         </div>
  222.       </form>
  223.     </div>
  224.   </body>
  225.   <script>
  226.     //给显示密码按钮添加事件
  227.     document
  228.       .querySelectorAll('input[type="button"]')[0]
  229.       .addEventListener("click", showPwd);
  230.     document
  231.       .querySelectorAll('input[type="button"]')[1]
  232.       .addEventListener("click", showPwd);
  234.     function showPwd(e) {
  235.       let id = e.target.dataset.showid;
  236.       let objtype = document.getElementById(id).type;
  237.       if (objtype === "text") {
  238.         document.getElementById(id).type = "password";
  239.         e.target.value = "显示密码";
  240.       } else {
  241.         document.getElementById(id).type = "text";
  242.         e.target.value = "隐藏密码";
  243.       }
  244.     }
  245.   </script>
  246. </html>

预览：

上一条：nginx 使用gzip文件压缩，基本配置下一条：盒模型的大小、定位及其计算方法
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多