简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >了解表格与表单并用表格实现购物车与表单实现用户注册页面

了解表格与表单并用表格实现购物车与表单实现用户注册页面

忠于原味
忠于原味原创
2020年06月17日 23:50:14693浏览

一.了解表格与表单

1.表格

表格元素

  • 表格是最重要的数据格式化展示重要工具, 使用频率非常高
  • 列表与表格相比, 更像是一个单行单列的表格项
  • 表格的数据,存储在由行与列组成的一系列单元格
  • 与列表类似, 表格也是由一系列标签来描述
  • 表格标签分为二类: 数据标签, 结构标签
  • 数据标签:
序号 标签 描述
1 <table> 定义表格, 必选
2 <tr> 定义表格中的行, 必选
3 <th> 定义表格头部中的单元格, 必选
4 <td> 定义表格主体中的单元格, 必选
  • 结构标签:
序号 标签 描述
1 <option> 定义表格标题, 可选
2 <thead> 定义表格头格, 只需定义一次, 可选
3 <tbody> 定义表格主体, 允许定义多次, 可选
4 <tfooter> 定义表格底, 只需定义一次, 可选
  • 常用属性:
序号 属性 所属标签 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
2 cellspacing <table> 设置单元格边框间隙
2 align 不限 设置单元格内容水平居中
2 bgcolor 不限 设置背景色

2.表单

1. 表单元素类型

序号 元素 名称 描述
1 <form> 表单容器 表单应该放在该标签内提交
2 <input> 输入控件 由type属性指定控件类型
3 <label> 控件标签 用于控件功能描述与内容关联
4 <select> 下拉列表 用于选择预置的输入内容
5 <datalist> 预置列表 用于展示预置的输入内容
6 <option> 预置选项 与<select>,<datalist>配合
7 <textarea> 文本域 多行文本框,常与富文本编辑器配合
8 <button> 按钮 用于提交表单

2. 表单元素属性

序号 元素 属性
1 <form> action, method
2 <label> for
3 <input> type, name,value,placeholder…
4 <select> name
5 <datalist> id,与<input list="">关联
6 <option> value, label,selected
7 <textarea> cols, rows,name…
8 <button> type,name

表单元素的公共属性(并非所有元素都具备)

序号 属性 描述
1 name 元素/控件名称,用做服务器端脚本的变量名称
2 value 提交到服务器端的数据
3 placeholder 输入框的提示信息
4 form 所属的表单,与<form name="">对应
5 autofocus 页面加载时,自动获取焦点
6 required 必填 / 必选项
7 readonly 该控件内容只读
8 disabled 是否禁用

3. <input>的type类型

3.1 常用的type类型

序号 属性 名称 描述
1 type="text" 文本框 默认值
2 type="password" 密码框 输入内容显示为*,不显示明文
3 type="radio" 单选按钮 多个选项中仅允许提交一个(应提供默认选项)
4 type="checkbox" 复选框 允许同时提交一个或多个选项(应提供默认选项)
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="file" 文件上传 本地文件上传,有accept,multiple属性
7 type="submit" 提交按钮 点击后会提交按钮所在的表单
8 type="reset" 重置按钮 点击后会重置输入控件中的内容为默认值
9 type="button" 自定义按钮 使用 JS 脚本定义按钮点击后的行为

3.2 其它type类型(部分)

序号 属性 名称 描述
1 type="email" 邮箱 输入必须是邮箱格式
2 type="number" 整数 输入必须是整数,可设置范围min,max
3 type="url" URL 地址 输入内容必须是有效的 URL 格式文本
4 type="search" 搜索框 通常与autocomplete配合
5 type="hidden" 隐藏域 页面不显示,但数据仍会被提交
6 type="date" 日期控件 不同浏览器显示略有不同,但功能一致
7 type="color" 调色板 可直接选择颜色, 不同平台略有不同
8 type="tel" 电话号码 手机端会弹出数字小键盘

4. 注意事项

  • 添加disabled禁用属性的字段数据不会被提交,但是readonly只读属性的字段允许提交
  • 隐藏域的内容不会在 HTML 页面中显示,但是value属性的数据会被提交

二.表格实现购物车

实例代码:

  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.   </head>
  8.   <style>
  9.     html {
  10.       font-size: 14px;
  11.     }
  12.     /* 将单元格之间的间隙去掉 */
  13.     table {
  14.       border-collapse: collapse;
  15.       width: 70%;
  16.       margin: auto;
  17.       color: #666;
  18.       font-weight: lighter;
  19.       text-align: center;
  20.     }
  21.     /* 表格线直接添加到单元格上面 */
  22.     th,
  23.     td {
  24.       border-bottom: 1px solid #ccc;
  25.       padding: 10px;
  26.     }
  27.     /* 标题样式 */
  28.     table caption {
  29.       font-size: 1.5rem;
  30.       margin-bottom: 15px;
  31.       font-weight: bolder;
  32.       color: green;
  33.     }
  34.     table th {
  35.       font-weight: lighter;
  36.       color: green;
  37.     }
  38.     table thead tr:first-of-type {
  39.       background-color: lightcyan;
  40.     }
  41.     /* 隔行变色 */
  42.     table tbody tr:nth-of-type(even) {
  43.       background-color: yellow;
  44.     }
  45.     /* 鼠标悬停效果 */
  46.     table tbody tr:hover {
  47.       background-color: pink;
  48.     }
  49.     table tfoot td {
  50.       border-bottom: none;
  51.       color: coral;
  52.       font-size: 1.2rem;
  53.       font-weight: bolder;
  54.     }
  55.     /* 结束按钮 */
  56.     body div:first-of-type {
  57.       width: 70%;
  58.       margin: auto;
  59.     }
  60.     body div:first-of-type button {
  61.       /* 靠右 */
  62.       float: right;
  63.       width: 120px;
  64.       height: 32px;
  65.       background-color: seagreen;
  66.       color: white;
  67.       border: none;
  68.       /* 设置鼠标样式 */
  69.       cursor: pointer;
  70.     }
  71.     body div:first-of-type button:hover {
  72.       background-color: coral;
  73.       font-size: 1.1rem;
  74.     }
  75.   </style>
  76.   <body>
  77.     <!-- 表格 -->
  78.     <table>
  79.       <!-- 标题 -->
  80.       <caption>
  81.         购物车
  82.       </caption>
  83.       <!-- 头部 -->
  84.       <thead>
  85.         <tr>
  86.           <th>ID</th>
  87.           <th>品名</th>
  88.           <th>单价/元</th>
  89.           <th>单位</th>
  90.           <th>数量</th>
  91.           <th>金额</th>
  92.         </tr>
  93.       </thead>
  94.       <!-- 主体 -->
  95.       <tbody>
  96.         <tr>
  97.           <td>SN-1010</td>
  98.           <td>MacBookpro 电脑</td>
  99.           <td>18999</td>
  100.           <td>台</td>
  101.           <td>1</td>
  102.           <td>18999</td>
  103.         </tr>
  104.         <tr>
  105.           <td>SN-1020</td>
  106.           <td>iPhone手机</td>
  107.           <td>4999</td>
  108.           <td>部</td>
  109.           <td>2</td>
  110.           <td>9998</td>
  111.         </tr>
  112.         <tr>
  113.           <td>SN-1030</td>
  114.           <td>智能AI音箱</td>
  115.           <td>399</td>
  116.           <td>只</td>
  117.           <td>5</td>
  118.           <td>1995</td>
  119.         </tr>
  120.         <tr>
  121.           <td>SN-1040</td>
  122.           <td>SSD移动硬盘</td>
  123.           <td>888</td>
  124.           <td>个</td>
  125.           <td>2</td>
  126.           <td>1776</td>
  127.         </tr>
  128.         <tr>
  129.           <td>SN-1050</td>
  130.           <td>黄山毛峰</td>
  131.           <td>999</td>
  132.           <td>斤</td>
  133.           <td>3</td>
  134.           <td>2997</td>
  135.         </tr>
  136.       </tbody>
  137.       <!-- 底部 -->
  138.       <tfoot>
  139.         <tr>
  140.           <td colspan="4">总计：</td>
  141.           <td>13</td>
  142.           <td>35765</td>
  143.         </tr>
  144.       </tfoot>
  145.     </table>
  146.     <!-- 结算按钮 -->
  147.     <div><button>结算</button></div>
  148.   </body>
  149. </html>

效果预览:

" class="reference-link">

三.表单实现用户注册页面

实例代码:

  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>
  8.     <style>
  9.       body {
  10.         color: #555;
  11.       }
  12.       h3 {
  13.         text-align: center;
  14.       }
  15.       form {
  16.         width: 450px;
  17.         margin: 30px auto;
  18.         border-top: 1px solid #aaa;
  19.       }
  20.       form fieldset {
  21.         border: 1px solid seagreen;
  22.         background-color: lightcyan;
  23.         box-shadow: 2px 2px 4px #bbb;
  24.         border-radius: 10px;
  25.         margin: 20px;
  26.       }
  27.       form fieldset legend {
  28.         background-color: rgb(178, 231, 201);
  29.         border-radius: 10px;
  30.         color: seagreen;
  31.         padding: 5px 15px;
  32.       }
  34.       form div {
  35.         margin: 5px;
  36.       }
  38.       form p {
  39.         text-align: center;
  40.       }
  41.       form .btn {
  42.         width: 80px;
  43.         height: 30px;
  44.         border: none;
  45.         background-color: seagreen;
  46.         color: #ddd;
  47.       }
  48.       form .btn:hover {
  49.         background-color: coral;
  50.         color: white;
  51.         cursor: pointer;
  52.       }
  54.       input:focus {
  55.         background-color: rgb(226, 226, 175);
  56.       }
  57.     </style>
  58.   </head>
  59.   <body>
  60.     <h3>用户注册</h3>
  61.     <form action="" method="POST">
  62.       <!-- 1.控件组 -->
  63.       <fieldset>
  64.         <legend>基本信息(必填)</legend>
  65.         <div>
  66.           <label for="my-username">账号:</label>
  67.           <input
  68.             type="text"
  69.             name="username"
  70.             id="my-username"
  71.             placeholder="6到15位字符"
  72.             autofocus
  73.             required
  74.           />
  75.         </div>
  76.         <div>
  77.           <label for="email-id">邮箱:</label>
  78.           <input
  79.             type="email"
  80.             name="email"
  81.             id="email-id"
  82.             placeholder="demo@qq.com"
  83.             required
  84.           />
  85.         </div>
  86.         <!-- 密码    -->
  87.         <div>
  88.           <label for="pwd-1">密码:</label>
  89.           <input
  90.             type="password"
  91.             name="password1"
  92.             id="pwd-1"
  93.             placeholder="不少于6位且字母+数字"
  94.             required
  95.           />
  96.           <button onclick="ShowPwd()" id="btn" type="button">显示密码</button>
  97.         </div>
  98.         <!-- 确认密码 -->
  99.         <div>
  100.           <label for="pwd-2">确认:</label>
  101.           <input type="password" name="password2" id="pwd-2" required />
  102.         </div>
  103.       </fieldset>
  104.       <fieldset>
  105.         <legend>扩展信息(选填)</legend>
  106.         <div>
  107.           <label
  108.             >生日:
  109.             <input type="date" name="birthday" />
  110.           </label>
  111.         </div>
  112.         <div>
  113.           <!-- 单选按钮 -->
  114.           <label for="">性别:</label>
  115.           <!-- 单选按钮中的name属性必须相同 -->
  116.           <input type="radio" name="gender" value="male" id="male" /><label
  117.             for="male"
  118.             >男</label
  119.           >
  120.           <input type="radio" name="gender" value="female" id="female" /><label
  121.             for="female"
  122.             >女</label
  123.           >
  124.           <input
  125.             type="radio"
  126.             name="gender"
  127.             value="secret"
  128.             id="secret"
  129.             checked
  130.           />
  131.           <label for="secret">保密</label>
  132.         </div>
  133.         <div>
  134.           <!-- 复选框 -->
  135.           <label for="programe">爱好</label>
  136.           <!-- 因为复选框返回时一个或多个值,最方便后端用数组来处理.所以将name名称设置位数组形式便于后端脚本处理 -->
  137.           <input type="checkbox" name="hobby[]" id="game" value="game" /><label
  138.             for="game"
  139.             >打游戏</label
  140.           >
  141.           <input
  142.             type="checkbox"
  143.             name="hobby[]"
  144.             id="shoot"
  145.             value="shoot"
  146.           /><label for="shoot">摄影</label>
  147.           <input
  148.             type="checkbox"
  149.             name="hobby"
  150.             id="programe"
  151.             value="programe"
  152.             checked
  153.           /><label for="programe">编程</label>
  154.         </div>
  155.         <!-- 选项列表 -->
  156.         <div>
  157.           <label for="brand">手机:</label>
  158.           <input type="search" list="phone" name="brand" id="brand" />
  159.           <datalist id="phone">
  160.             <option value="apple"></option>
  161.             <option value="huawei">华为</option>
  162.             <option value="mi" label="小米"></option>
  163.           </datalist>
  164.         </div>
  165.       </fieldset>
  166.       <fieldset>
  167.         <legend>其他信息(选填)</legend>
  168.         <!-- 文件上传 -->
  169.         <div>
  170.           <label for="uploads">上传头像:</label>
  171.           <input
  172.             type="file"
  173.             name="user_pic"
  174.             id="uploads"
  175.             accept="image/png,image/jpeg,image/gif"
  176.           />
  177.         </div>
  178.         <!-- 文本域 -->
  179.         <div>
  180.           <textarea
  181.             name="resume"
  182.             id="resume"
  183.             cols="30"
  184.             rows="10"
  185.             placeholder="不超过100个字"
  186.           ></textarea>
  187.         </div>
  188.       </fieldset>
  189.       <!-- 隐藏域,例如用户id,注册,登录的时间... -->
  190.       <input type="hidden" name="user_id" value="123" />
  191.       <p>
  192.         <input type="button" value="提交" class="btn" />
  193.         <button class="btn">提交</button>
  194.       </p>
  195.     </form>
  196.     <script>
  197.       function ShowPwd(ele) {
  198.         document.querySelector("#pwd-1").type = "text";
  199.       }
  200.     </script>
  201.   </body>
  202. </html>

效果预览:

上一条：CSS选择器初步解析下一条：表格实现购物车，表单实现注册页面实战
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多