search

博客列表 >HTML5入门：表格和表单元素的使用

HTML5入门：表格和表单元素的使用

博客学习
博客学习原创
2020年08月28日 01:05:21812浏览

HTML5 入门：表格元素、表单元素

表格元素简介

表格由 <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>表格1</title>
  7.   </head>
  8.   <body>
  9.     <!-- 表格：数据格式化展示的工具 -->
  10.     <!-- width设置表格宽度,border添加表格框设置表格框粗细值,align设置表格水平居中，cellspacing设置单元格边框间隙，cellpadding设置单元格内边距 -->
  11.     <table
  12.       border="1"
  13.       cellspacing="0"
  14.       cellpadding="0"
  15.       width="500"
  16.       align="center"
  17.     >
  18.       <!-- colgroup:用来定义表中的一组列表 -->
  19.       <colgroup>
  20.      <!-- col:占位符，即使没有样式也不能省略,可以为整列单元格添加样式,建议为class -->
  21.         <col bgcolor="gray" />
  22.         <col bgcolor="springgreen" />
  23.         <col bgcolor="#00ffff" />
  24.         <col bgcolor="#ff33ff" />
  25.         <col bgcolor="#008765" />
  26.         <col bgcolor="yellow" />
  27.       </colgroup>
  28.       <!-- caption元素定义表格标题 -->
  29.       <caption>
  30.         商品购销清单
  31.       </caption>
  32.       <!-- thead:表头部 -->
  33.       <thead>
  34.         <tr bgcolor="white">
  35.           <!-- th:td的进阶plus，提供居中和字体加粗样式 -->
  36.           <th>序号</th>
  37.           <th>品名</th>
  38.           <th>数量</th>
  39.           <th>单价</th>
  40.           <th>折扣</th>
  41.           <th>总价</th>
  42.         </tr>
  43.       </thead>
  44.       <!-- tbody:表主体，有时浏览器会默认加上 -->
  45.       <tbody>
  46.         <tr>
  47.           <td>1</td>
  48.           <td>键盘</td>
  49.           <td>100</td>
  50.           <td>400</td>
  51.           <td>0.8</td>
  52.           <td>32000</td>
  53.         </tr>
  54.         <tr>
  55.           <td>2</td>
  56.           <td>手机</td>
  57.           <!-- 单元格垂直合并rowspan，数量代表合并单元格数量 -->
  58.           <td rowspan="2">30</td>
  59.           <td>1000</td>
  60.           <td>0.7</td>
  61.           <td>21000</td>
  62.         </tr>
  63.         <tr>
  64.           <td>3</td>
  65.           <td>电脑</td>
  66.           <td>6000</td>
  67.           <td>0.8</td>
  68.           <td>144000</td>
  69.         </tr>
  70.       </tbody>
  71.       <tfoot>
  72.         <tr>
  73.           <!-- 单元格水平合并colspan，数量代表合并单元格数量 -->
  74.           <td colspan="0">合计:</td>
  75.           <td colspan="4" bgcolor="gray"></td>
  76.           <td>197000</td>
  77.         </tr>
  78.       </tfoot>
  79.     </table>
  80.   </body>
  81. </html>

效果图：

表格元素

表单元素简介

HTML 表单是用户和 web 站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到 web 站点。表单元素是允许用户在表单中输入内容,比如：文本框（input）、文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。其中文本框的 type 属性也呈现语义化的功能

表单元素的使用

  1. <body>
  2.   <div style="margin: 100px auto 0 auto;">
  3.     <h3>用户注册</h3>
  4.     <!-- action:表单提交数据到服务器的地址如：login.php -->
  5.     <!-- GET、POST：提交数据的方式，GET为明文数据以键值对的形式出现在URL里 -->
  6.     <form action="login.php" method="post">
  7.       <!-- fieldset:用于对表单中的控制元素进行分组 -->
  8.       <fieldset>
  9.         <!-- legend:用于表示fieldset的内容标题是内置的子元素 -->
  10.         <legend>必填项</legend>
  11.         <div>
  12.           <!-- 文本框 -->
  13.           <label for="userName">用户名:</label>
  14.           <input
  15.             type="text"
  16.             id="userName"
  17.             value=""
  18.             placeholder="不少于4个字符"
  19.             required
  20.             autofocus
  21.           />
  22.         </div>
  23.         <div>
  24.           <!-- 密码框 -->
  25.           <label for="pwd">密码:</label>
  26.           <input
  27.             type="password"
  28.             name="password"
  29.             id="pwd"
  30.             widthmin="8"
  31.             placeholder="密码应不少于8位"
  32.             required
  33.           />
  34.         </div>
  35.         <!-- required 为布尔值属性，规定此框为必填项 -->
  36.         <div>
  37.           <!--radio:单选按钮  每个按钮控件的name属性必须一样-->
  38.           <label for="secret">性别：</label>
  39.           <input type="radio" name="gender" id="male" /><label for="male"
  40.             >男</label
  41.           >
  42.           <input type="radio" name="gender" id="female" /><label for="female"
  43.             >女</label
  44.           >
  45.           <input type="radio" name="gender" id="secret" checked /><label
  46.             for="secret"
  47.             >保密</label
  48.           >
  49.         </div>
  50.         <div>
  51.           <!-- checkbox:复选按钮，基本属性和单选相似 -->
  52.           <lable for="">爱好:</lable>
  53.           <input type="checkbox" name="hobby[]" id="code" /><label for="code"
  54.             >编程</label
  55.           >
  56.           <input type="checkbox" name="hobby[]" id="sport" /><label for="sport"
  57.             >运动</label
  58.           >
  59.           <input type="checkbox" name="hobby[]" id="movie" /><label for="movie"
  60.             >电影</label
  61.           >
  62.         </div>
  63.         <div>
  64.           <!-- file:文件域用于上传文件 -->
  65.           <label for="user_img">头像</label>
  66.           <input
  67.             type="file"
  68.             name="user_img"
  69.             id="user_img
  70.             "
  71.           />
  72.           <!-- hidden:隐藏域 -->
  73.           <!-- 限制文件大小，给服务器做参考,这个数据不需要也不允许用户提供 -->
  74.           <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  75.           <!-- 用户id一般通过隐藏域发送 -->
  76.           <input type="hidden" name="user_id" value="1024" />
  77.         </div>
  78.         <div>
  79.           <!-- datalist:预定义复合框/下拉列表 -->
  80.           <label for="my_course">课程：</label
  81.           ><input type="text" name="" id="my_course" list="course" />
  82.           <!-- 将文本框与下拉列表进行绑定,通过文本框属性list与下拉列表id进行绑定 -->
  83.           <datalist id="course">
  84.             <option value="html5">html5</option>
  85.             <option value="css3">css3</option>
  86.             <option value="javascript">javascript</option>
  87.             <option value="vue.js">vue.js</option>
  88.             <option value="php">php</option>
  89.             <option value="laravel">laravel</option>
  90.           </datalist>
  91.         </div>
  92.         <!-- 邮箱文本框 -->
  93.         <div>
  94.           <label for="email">邮箱：</label
  95.           ><input type="email" name="my_email" id="email" />
  96.         </div>
  97.         <!-- 日期时间输入框 -->
  98.         <div>
  99.           <label for="birthday">生日：</label
  100.           ><input type="date" name="my_birthday" id="birthday" />
  101.         </div>
  102.         <!-- 数值控制输入框 -->
  103.         <div>
  104.           <label for="age">年龄:</label
  105.           ><input type="number" name="my_age" min="18" id="age" />
  106.         </div>
  107.         <!-- 调色板输入框 -->
  108.         <div>
  109.           <label
  110.             for="
  111.             color"
  112.             >颜色：</label
  113.           ><input type="color" name="my_color" id="color" />
  114.         </div>
  115.       </fieldset>
  116.       <fieldset>
  117.         <legend>选填项</legend>
  118.         <div>
  119.           <label style="display: block;" for="self">自我介绍：</label
  120.           ><textarea name="self" id="self" cols="40" rows="10"></textarea>
  121.         </div>
  122.       </fieldset>
  123.       <button type="submit">提交</button>
  124.     </form>
  125.   </div>
  126.  </body>

效果图：

表单元素

上一条：PHP初探Redis下一条：layui框架【坑】，form提交了两次，问题原因
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多