简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 购物车实战(表格实现)/用户注册页面（表单实现）
Blogger Information
Blog 17
fans 1
comment 0
visits 14613
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
购物车实战(表格实现)/用户注册页面（表单实现）
邱世家的博客
Original
878 people have browsed it

表格包含的内容

标签 作用
table 表格放在table标签内
caption 标题
tbody 主题
tr 行
td 列
th 列，但相对于td多了加粗居中常用于头部的标题第一行
thead 表头
tfoot 表格底部
colgroup 设置列的样式，现在用css代替

购物车实战

  • html部分
    1. <body>
    2.   <table>
    3.     <!-- 标题 -->
    4.     <caption>
    5.       购物车
    6.     </caption>
    7.     <thead>
    8.       <tr>
    9.         <th>ID</th>
    10.         <th>品名</th>
    11.         <th>单价/元</th>
    12.         <th>单位</th>
    13.         <th>数量</th>
    14.         <th>金额</th>
    15.       </tr>
    16.     </thead>
    17.     <tbody>
    18.       <tr>
    19.         <td>SN-1010</td>
    20.         <td>MacBook Pro电脑</td>
    21.         <td>18999</td>
    22.         <td>台</td>
    23.         <td>1</td>
    24.         <td>18999</td>
    25.       </tr>
    26.       <tr>
    27.         <td>SN-1020</td>
    28.         <td>iPhone手机</td>
    29.         <td>4999</td>
    30.         <td>部</td>
    31.         <td>2</td>
    32.         <td>9998</td>
    33.       </tr>
    34.       <tr>
    35.         <td>SN-1030</td>
    36.         <td>智能AI音箱</td>
    37.         <td>399</td>
    38.         <td>只</td>
    39.         <td>5</td>
    40.         <td>1995</td>
    41.       </tr>
    42.       <tr>
    43.         <td>SN-1040</td>
    44.         <td>SSD移动硬盘</td>
    45.         <td>888</td>
    46.         <td>个</td>
    47.         <td>2</td>
    48.         <td>1776</td>
    49.       </tr>
    50.       <tr>
    51.         <td>SN-1050</td>
    52.         <td>黄山毛峰</td>
    53.         <td>999</td>
    54.         <td>斤</td>
    55.         <td>3</td>
    56.         <td>2997</td>
    57.       </tr>
    58.     </tbody>
    59.     <!-- 底部 -->
    60.     <tfoot>
    61.       <tr>
    62.         <!-- 合并单元格用colspan。
    63.         td colspan="4"四列单元格合并 -->
    64.         <td colspan="4">总计：</td>
    65.         <td>13</td>
    66.         <td>35765</td>
    67.       </tr>
    68.     </tfoot>
    69.   </table>
    70.   <!-- 结算按钮 -->
    71.   <div>
    72.     <button>结算</button>
    73.   </div>
    74. </body>

  • css样式

    1. <style>
    2.   html {
    3.     font-size: 16px;
    4.   }
    5.   table {
    6.     /* 将单元格之间的间隙去掉 */
    7.     border-collapse: collapse;
    8.     /* 占据父元素70%的空间 看到百分比要想到有个对应父级*/
    9.     width: 70%;
    10.     /* 左右居中 */
    11.     margin: auto;
    12.     color: #666;
    13.     /* 设置字体粗细 */
    14.     font-weight: lighter;
    15.     /* 文本居中 */
    16.     text-align: center;
    17.   }
    18.   /* 表格线直接添加到单元格上 */
    19.   table thead th,
    20.   table td {
    21.     border-bottom: 1px solid #ccc;
    22.     /* 添加内边距 */
    23.     padding: 10px;
    24.   }
    25.   /* 标题样式 */
    26.   table caption {
    27.     /* rem就是相对于html设置字体大小 */
    28.     font-size: 1.5rem;
    29.     /* 下边距 */
    30.     margin-bottom: 15px;
    31.     color: seagreen;
    32.   }
    33.   table th {
    34.     font-weight: lighter;
    35.     color: seagreen;
    36.   }
    37.   table thead {
    38.     background-color: lightcyan;
    39.   }
    40.   /* 隔行变色 */
    41.   /* table tbody tr:nth-of-type(even){
    42.     background-color: #efef;
    43.   } */
    44.   tbody > tr:nth-child(even) {
    45.     background-color: rgb(0, 225, 255);
    46.   }
    47.   /* 鼠标悬停 */
    48.   table tbody tr:hover {
    49.     background-color: peru;
    50.   }
    51.   /* 底部样式 */
    52.   table tfoot td {
    53.     /* 去掉下边框 */
    54.     border-bottom: none;
    55.     color: slateblue;
    56.     font-size: 1.2rem;
    57.     /* 字体加粗 */
    58.     font-weight: bolder;
    59.   }
    60.   /* 结算按钮样式 */
    61.   body div:last-of-type {
    62.     width: 70%;
    63.     margin: 10px auto;
    64.   }
    65.   body div:first-of-type button {
    66.     /* 靠右 */
    67.     float: right;
    69.     width: 120px;
    70.     height: 32px;
    71.     background-color: seagreen;
    72.     color: white;
    73.     /* 去掉按钮边框 */
    74.     border: none;
    75.     /* 设置鼠标指针样式 */
    76.     cursor: pointer;
    77.   }
    78.   /* 定义鼠标移上去得样式:hover */
    79.   body div:first-of-type button:hover {
    80.     background-color: coral;
    81.     font-size: 1.1rem;
    82.   }
    83. </style>

  • 注意：选中表格中得标签/元素时强烈建议写全，table > tbody > tr

用户注册页面

  • 表单常用标签
标签 属性 作用
<form action="" method=""> 表单
form action=”” 提交给谁
form method=”GET” 表单提交方式get默认方式
<fieldset></fieldset> fieldset标签内容的周围将绘制边框，理解为一个控件组
<legend></legend> legend标签来为fieldset元素设置标题
<label for=""></label> for=””必须和 input id属性一致 绑定input标签使用
<input/> name=”” 元素的名称
<input/> id=””
<input/> placeholder=”” 入提示的文本
<input/> autofocus 自动获取焦点 它没有属性值
<input/> required 不输入内容不让提交,一个表单在同一时刻只允许有一个元素获取焦点
<input/> list=”” 代表列表，而且要和datalist的id=””属性一样
<datalist></datalist> id=”” 定义选项列表。他的id属性一定要和input的list属性来绑定
<option></option> 定义下拉列表中的一个选项/条目。option标签通常是作为select标签或datalist标签的子标签，充当下拉列表中的一个选项
textarea 定义文本域，没有value属性
textarea cols属性 设置textarea元素输入区域的可见宽度
textarea rows属性 设置textarea元素输入区域的可见高度
input标签type属性 作用
type=”text” 单行文本输入框
type=”password” 密码输入框
type=”radio” 单选按钮，name属性必须相同
type=”checkbox” 复选框，建议将写成name=”hobby[]”数组形式
type=”button”： 普通按钮
type=”submit” 提交按钮
type=”file”： 文件域，出现一个选择文件的按钮
type=”hidden”： 隐藏域
type=”email” 输入”email”地址
type=”month” 年月控件
type=”date” 日期控件

实战部分

  • 先写一个表单

    1. <body>
    2.   <h3>用户注册</h3>
    3.   <!-- form+input -->
    4.   <!-- action="" 提交给谁-->
    5.   <!-- method="GET" 表单提交方式get默认方式-->
    6.   <form action="" method="POST">
    7.     <!-- 控件组 -->
    8.     <fieldset>
    9.       <!-- legend 组名 -->
    10.       <legend>基本信息(必填)</legend>
    11.       <div>
    12.         <!-- label for="my-username"必须和 input id属性一致
    13.           input id="my-username" -->
    14.         <!-- 添加lable标签才能实现鼠标点击账号的时候
    15.           焦点落在input输入框中 -->
    16.         <label for="my-username">账号:</label>
    17.         <!-- input中的name属性就是变量名称
    18.           placeholder="写入提示的文本"
    19.           autofocus --自动获取焦点 它没有属性值
    20.           一个表单在同一时刻只允许有一个元素获取焦点
    21.           required -- 不输入内容不让提交  
    22.       -->
    23.         <!-- 
    24.           1.label for=""必须和 input id=""属性一致
    25.           2.用lable标签(for属性可以shandiao)包含input标签：
    26.           <label for=""><input type="text"></label>
    27.           <label><input type="text"></label>
    28.        -->
    30.         <input
    31.           type="text"
    32.           id="my-username"
    33.           name="username"
    34.           placeholder="6-15位字符"
    35.           autofocus
    36.           required
    37.         />
    38.       </div>
    39.       <div>
    40.         <label for="email-id">邮箱</label>
    41.         <input
    42.           type="email"
    43.           name="email"
    44.           id="email-id"
    45.           placeholder="*****@qq.com"
    46.           required
    47.         />
    48.       </div>
    49.       <!-- 密码 -->
    50.       <div>
    51.         <label for="email-id">密码</label>
    52.         <input
    53.           type="password"
    54.           name="password1"
    55.           id="pwd-1"
    56.           placeholder="******"
    57.         />
    58.       </div>
    59.       <div>
    60.         <label for="email-id">确认</label>
    61.         <input type="password" name="password2" id="pwd-2" />
    62.       </div>
    63.     </fieldset>
    64.     <fieldset>
    65.       <legend>扩展信息(选填)</legend>
    66.       <div>
    67.         <label
    68.           >生日:
    69.           <input type="date" name="birthdy" />
    70.         </label>
    71.       </div>
    72.       <div>
    73.         <!-- 单选按钮
    74.       input的name属性必须相同 -->
    75.         <label for="secret">性别:</label>
    76.         <label>男<input type="radio" name="gender" value="male" /></label>
    77.         <label>女<input type="radio" name="gender" value="female" /></label>
    79.         <label
    80.           ><input
    81.             type="radio"
    82.             name="gender"
    83.             value="secret"
    84.             id="secret"
    85.             checked
    86.           />保密</label
    87.         >
    88.       </div>
    89.       <div>
    90.         <!-- 复选框 -->
    91.         <!-- 因为复选框返回是一个或多个值，最方便后端用数组来处理，
    92.            所以将name名称设置为数组形式便于后端脚本处理 -->
    93.         <label for="programme">爱好:</label>
    94.         <label
    95.           >打游戏<input type="checkbox" name="hobby[]" value="game"
    96.         /></label>
    97.         <label
    98.           >看电影<input type="checkbox" name="hobby[]" value="shoot"
    99.         /></label>
    100.         <label
    101.           >PHP<input
    102.             type="checkbox"
    103.             id="programme"
    104.             name="hobby[]"
    105.             value="programme"
    106.             checked
    107.         /></label>
    108.       </div>
    109.       <div>
    110.         <!-- 选项列表 -->
    111.         <label for="brand">手机:</label>
    112.         <!-- list属性代表列表 -->
    113.         <input type="search" list="phone" id="brand" name="brand" />
    114.         <!-- datalist一定要有一个id属性并且一定要和input的list属性来绑定 -->
    115.         <datalist id="phone">
    116.           <option value="aplle"></option>
    117.           <option value="hwei" label="华为"></option>
    118.           <option value="mi" label="小米"></option>
    119.         </datalist>
    120.       </div>
    121.     </fieldset>
    122.     <fieldset>
    123.       <legend>其它信息(选填)</legend>
    124.       <!--文件上传:<input type="file"-->
    125.       <div>
    126.         <label for="uploads">上传头像:</label>
    127.         <input
    128.           type="file"
    129.           name="user_pic"
    130.           id="uploads"
    131.           accept="image/png, image/jpeg, image/gif"
    132.         />
    133.       </div>
    135.       <!--文本域 用extarea-->
    136.       <div>
    137.         <label for="resume">简历:</label>
    138.         <!--注意文本域没有value属性-->
    139.         <textarea
    140.           name="resume"
    141.           id="resume"
    142.           cols="30"
    143.           rows="5"
    144.           placeholder="不超过100字"
    145.         ></textarea>
    146.       </div>
    147.     </fieldset>
    148.     <!-- 隐藏域, 例如用户的Id, 注册，登录的时间。。。。 -->
    149.     <input type="hidden" name="user_id" value="123" />
    150.     <p>
    151.       <input type="submit" value="提交" class="btn" />
    152.       <button class="btn">提交</button>
    153.     </p>
    154.   </form>
    155. </body>

  • css样式
    1. <style>
    2.     /* body中的字体颜色设置灰色 */
    3.     bady {
    4.       color: #000;
    5.     }
    6.     /* 标题居中 */
    7.     h3 {
    8.       text-align: center;
    9.     }
    10.     /* 设置from表单宽度高度并添加上边框 */
    11.     form {
    12.       width: 450px;
    13.       margin: 30px auto;
    14.       border-top: 1px solid #aaa;
    15.     }
    16.     /* 设置form fieldset 背景色，边框，阴影，边框圆角，
    17.     设置四周外边距*/
    18.     form fieldset {
    19.       background-color: lightcyan;
    20.       border: 1px solid seagreen;
    21.       box-shadow: 2px 2px 4px #bbb;
    22.       border-radius: 15px;
    23.       margin: 20px;
    24.     }
    25.     /* 设置legend 背景色，边框，圆角，本文颜色，内边距 */
    26.     form fieldset legend {
    27.       background-color: lightskyblue;
    28.       border: 1px solid seagreen;
    29.       border-radius: 15px;
    30.       color: chocolate;
    31.       padding: 5px 15px;
    32.     }
    33.     /* 设置div的外边距 所有的文本框都在div中 */
    34.     form div {
    35.       margin: 5px;
    36.     }
    37.     form p {
    38.       text-align: center;
    39.     }
    40.     /* 给底部按钮设置样式 */
    41.     form .btn {
    42.       width: 80px;
    43.       height: 30px;
    44.       border: none;
    45.       background-color: seagreen;
    46.       color: #ddd;
    47.     }
    48.     /* 设置底部按钮鼠标移动上去的样式 */
    49.     form .btn:hover {
    50.       background-color: coral;
    51.       color: lime;
    52.       cursor: pointer;
    53.       font-size: 1.1rem;
    54.       border-radius: 15px;
    55.     }
    56.     /* 设置获取焦点时的样式 */
    57.     form input:focus {
    58.       background-color: coral;
    59.     }
    60.   </style>
  • 总结
    知道表格和表单的基本标签，但是要熟练应用还是有很大难度，还是要加强练习。
    对于div用作表格还是没理解
  • 感谢各位老师的付出
Correcting teacher：WJWJ

Correction status：qualified

Teacher's comments：写的非常不错，多加练习就熟悉了！
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！