简体中文（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

博客列表 >html基础知识2、表格元素表格属性、表单基础知识

html基础知识2、表格元素表格属性、表单基础知识

῀℡῀ᵒᵐᵍᵎᵎᵎ
῀℡῀ᵒᵐᵍᵎᵎᵎ原创
2020年04月04日 11:20:40928浏览

html基础知识2、表格元素表格属性、表单基础知识

1. 表格元素

  • 表格是最重要的数据格式化展示重要工具, 使用频率非常高
  • 表格的数据,存储在由行与列组成的一系列单元格
  • 数据必须存储在单元格元素中
  • 与列表类似, 表格也是由一系列标签来描述

1.1 元素

序号 标签 描述 备注
1 <table> 定义表格, 必选
2 <tbody> 定义表格主体, 允许定义多次 必选
3 <tr> 定义表格中的行, 必选
4 <th> 定义表格头部中的单元格,默认加粗居中 必选
5 <td> 定义 g 表格 e 主体与底部的的单元格 必选
6 <caption> 定义表格标题, 可选
7 <thead> 定义表格头格, 只需定义一次 可选
8 <tfooter> 定义表格底, 只需定义一次 可选
9 <col> 为一个/多个列设置属性,仅限 可选
10 <colgroup> 将多个<col>元素分组管理 可选

1.2 属性

序号 属性 适用元素 描述
1 border <table> 添加表格框
2 cellpadding <table> 设置单元格内边距
3 cellspacing <table> 设置单元格边框间隙
4 align 不限 设置单元格内容水平居中
5 bgcolor 不限 设置背景色
6 width 不限 设置宽度
7 height 不限 设置高度

表格属性仅供参考,属选学内容, 推荐使用 CSS 设置表格样式

1.3 示例

  • 运行效果图
  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>0403 html 基础知识2、表格元素表格属性</title>
  7.   </head>
  8.   <body>
  9.     <table border="1" height="500" width="1000" cellspacing="0" align="center">
  10.       <caption style="font-size: 30px; margin-bottom: 30px; margin-top: 30px;">
  11.         维修更换配件表
  12.       </caption>
  13.       <!-- 表格页眉 -->
  14.       <thead bgcolor="lightblue">
  15.         <tr align="center">
  16.           <td>序号</td>
  17.           <td>维修项目更换配件</td>
  18.           <td>单价</td>
  19.           <td>数量</td>
  20.           <td>小计</td>
  21.           <td>工时费</td>
  22.           <td>合计</td>
  23.           <td>故障原因</td>
  24.         </tr>
  25.       </thead>
  26.       <!-- 表格主体 -->
  27.       <tbody bgcolor="">
  28.         <tr align="center">
  29.           <td>1</td>
  30.           <td></td>
  31.           <td></td>
  32.           <td></td>
  33.           <td></td>
  34.           <td></td>
  35.           <td></td>
  36.           <td></td>
  37.         </tr>
  38.         <tr align="center">
  39.           <td>2</td>
  40.           <td></td>
  41.           <td></td>
  42.           <td></td>
  43.           <td></td>
  44.           <td></td>
  45.           <td></td>
  46.           <td></td>
  47.         </tr>
  48.         <tr align="center">
  49.           <td>3</td>
  50.           <td></td>
  51.           <td></td>
  52.           <td></td>
  53.           <td></td>
  54.           <td></td>
  55.           <td></td>
  56.           <td></td>
  57.         </tr>
  58.         <tr align="center">
  59.           <td>4</td>
  60.           <td></td>
  61.           <td></td>
  62.           <td></td>
  63.           <td></td>
  64.           <td></td>
  65.           <td></td>
  66.           <td></td>
  67.         </tr>
  68.         <tr align="center">
  69.           <td>5</td>
  70.           <td></td>
  71.           <td></td>
  72.           <td></td>
  73.           <td></td>
  74.           <td></td>
  75.           <td></td>
  76.           <td></td>
  77.         </tr>
  78.         <tr align="center">
  79.           <td>6</td>
  80.           <td></td>
  81.           <td></td>
  82.           <td></td>
  83.           <td></td>
  84.           <td></td>
  85.           <td></td>
  86.           <td></td>
  87.         </tr>
  88.       </tbody>
  89.       <!-- 表格页脚 -->
  90.       <tfoot>
  91.         <tr bgcolor="wheat">
  92.           <td colspan="2">配件费用小计：</td>
  93.           <td colspan="5">工时费用小计：</td>
  94.           <td>总计：</td>
  95.         </tr>
  96.       </tfoot>
  97.     </table>
  98.   </body>
  99. </html>

表单与控件元素

[toc]

  • 表单分为表单元素与控件元素二部分
  • 表单元素仅一个: <form>
  • 表单控件元素,根据类型不同,有多个

1. 表单元素<form>

1.1 常用属性

序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank

1.2 请求类型method

  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL

1.4 表单名称name

序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

2. 表单控件元素<input>

2.1 常用属性

序号 属性 描述
1 type 控件类型,如文本框, 复选框…
2 name 请求参数的名称,对应于脚本处理的变量名
3 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4 form 控件所属表单
5 placeholder 仅限输入框text和password,输入框的提示信息
6 list 仅限输入框text和password,下拉框智能提示
7 autocomplate 仅限输入框text和password,自动完成(历史记录)
8 maxlength 仅限输入框text/password, 允许输入最大字符数量
9 checked 仅限单选框radio, 复选框checkbox(布尔属性)
10 readonly 元素只读,但通过 JavaScript 可修改(布尔属性)
11 disabled 元素禁用,(布尔属性)
12 autofocus 自动获取焦点,一个表单仅限一个控件
13 src 仅限图像域images, 图像 URL 地址
14 width 仅限图像域images, 图像宽度
15 height 仅限图像域images, 图像高度

2.2 type类型

  • 常用类型
序号 类型 描述
1 <input type="text"> 单行文本框 (默认值)
2 <input type="password"> 密码输入框
3 <input type="radio"> 单选框
4 <input type="checkbox"> 复选框
5 <input type="image"> 图像域/提交表单
6 <input type="file"> 文件上传域
7 <input type="hidden"> 隐藏域
  • html5 新增类型
序号 类型 描述
1 <input type="email"> 电子邮件
2 <input type="data"> 日期
2 <input type="data"> 日期
4 <input type="datetime-local"> 本地日期时间
5 <input type="tel"> 电话号码
6 <input type="url"> URL 地址
7 <input type="number"> 数值
8 <input type="range"> 范围拖动条
9 <input type="search"> 搜索框/移动
10 <input type="color"> 拾色器

2.3 常用事件属性

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发

2.4 示例

  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.     <style>
  8.       form {
  9.         padding: 20px;
  10.         width: 350px;
  11.         box-shadow: 0 0 8px #888;
  12.         border-radius: 10px;
  13.         box-sizing: border-box;
  14.         margin: auto;
  15.         background-color: lightskyblue;
  16.         display: grid;
  17.         gap: 15px;
  18.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 60px 1fr;
  23.       }
  25.       h3 {
  26.         text-align: center;
  27.       }
  29.       input[type="image"] {
  30.         justify-self: center;
  31.       }
  32.     </style>
  33.   </head>
  34.   <body>
  35.     <h3>用户注册</h3>
  36.     <form action="">
  37.       <section>
  38.         <label for="username">
  39.           用户名:
  40.         </label>
  41.         <input
  42.           type="text"
  43.           id="username"
  44.           placeholder="最好是6位以上16位一下"
  45.           maxlength="16"
  46.           required
  47.           autofocus
  48.         />
  49.       </section>
  50.       <section>
  51.         <label for="password">
  52.           密码:
  53.         </label>
  54.         <input
  55.           type="password"
  56.           id="password"
  57.           name="password"
  58.           placeholder="密码要求8位以上16位一下"
  59.           size="16"
  60.           required
  61.         />
  62.       </section>
  63.       <section>
  64.         <label for="secret">性别：</label>
  65.         <div class="box">
  66.           <input type="radio" name="gender" id="male" value="male" /><label
  67.             for="male"
  68.             >男</label
  69.           >
  70.           <input type="radio" name="gender" id="female" value="female" /><label
  71.             for="female"
  72.             >女</label
  73.           >
  74.           <input type="radio" name="gender" id="secret" value="secret" /><label
  75.             for="secret"
  76.             checked
  77.             >保密</label
  78.           >
  79.         </div>
  80.       </section>
  81.       <section>
  82.         <label for="programme">兴趣：</label>
  83.         <div class="box">
  84.           <input type="checkbox" name="hobby[]" name="game" id="game" /><label
  85.             for=""
  86.             >游戏</label
  87.           >
  88.           <input type="checkbox" name="hobby[]" name="tour" id="tour" /><label
  89.             for=""
  90.             >旅游</label
  91.           >
  92.           <input type="checkbox" name="hobby[]" name="shoot" id="shoot" /><label
  93.             for=""
  94.             >摄影</label
  95.           >
  96.           <input
  97.             type="checkbox"
  98.             name="hobby[]"
  99.             name="programme"
  100.             id="programme"
  101.           /><label for="">编程</label>
  102.         </div>
  103.       </section>
  104.     </form>
  105.   </body>
  106. </html>
上一条：前端开发：HTML基础知识2----链接、列表、表格、表单下一条：CentOS7.2 源码安装PHP7.4.3 (第一章)
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多