Blogger Information
Blog 12
fans 0
comment 0
visits 10189
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html 元素认识(表格、表单...)
星夜低语
Original
410 people have browsed it

点击这里打开本次作业的测试页面,请老师查看,辛苦了

表格与框架元素

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. ### [实际操作结果](http://www.xingyediyu.com/ "实际操作结果")
  • 示例代码

  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. <body>
  9. <table
  10. border="1"
  11. cellpadding="5"
  12. cellspacing="0"
  13. width="500"
  14. height="300"
  15. align="center"
  16. >
  17. <!-- 对列统一设置,colgroup中设置的属性对所有列均有效 -->
  18. <colgroup bgcolor="lightpink">
  19. <!-- 如果不想自定义某一列属性,只写元素不写属性 -->
  20. <col />
  21. <!-- 第二列个性化定制: 背景为浅绿色 -->
  22. <col bgcolor="lightgreen" />
  23. <!-- 第三列背景为黄色,并跨越2列都有效 -->
  24. <col bgcolor="yellow" span="2" />
  25. <!-- 第四列,使用第3列的样式 -->
  26. <col />
  27. <!-- 最后一列无特殊样式,采用父级样式 -->
  28. <col />
  29. </colgroup>
  30. <!-- 表格标题 -->
  31. <caption style="font-size: 1.5rem;margin-bottom: 10px;">
  32. 员工信息表
  33. </caption>
  34. <!-- 表格页眉 -->
  35. <thead bgcolor="lightblue">
  36. <th>部门</th>
  37. <th>ID</th>
  38. <th>姓名</th>
  39. <th>职务</th>
  40. <th>手机</th>
  41. </thead>
  42. <!-- 表格主体1 -->
  43. <tbody>
  44. <tr>
  45. <td rowspan="3" align="center">开发部</td>
  46. <td>101</td>
  47. <td>小王</td>
  48. <td>主管</td>
  49. <td>188345****</td>
  50. </tr>
  51. <tr>
  52. <!-- <td>开发部</td> -->
  53. <td>102</td>
  54. <td>小张</td>
  55. <td>程序员</td>
  56. <td>158123****</td>
  57. </tr>
  58. <tr>
  59. <!-- <td>开发部</td> -->
  60. <td>103</td>
  61. <td>小李</td>
  62. <td>实习生</td>
  63. <td>13399*****</td>
  64. </tr>
  65. </tbody>
  66. <!-- 表格主体2 -->
  67. <tbody>
  68. <tr style="background:">
  69. <td rowspan="3" align="center">销售部</td>
  70. <td>104</td>
  71. <td>小马</td>
  72. <td>主管</td>
  73. <td>135345****</td>
  74. </tr>
  75. <tr>
  76. <!-- <td>开发部</td> -->
  77. <td>105</td>
  78. <td>小刘</td>
  79. <td>客服</td>
  80. <td>157123****</td>
  81. </tr>
  82. <tr>
  83. <!-- <td>开发部</td> -->
  84. <td>106</td>
  85. <td>小朱</td>
  86. <td>实习生</td>
  87. <td>138349*****</td>
  88. </tr>
  89. </tbody>
  90. <!-- 表格页脚 -->
  91. <tfoot>
  92. <tr bgcolor="wheat">
  93. <td align="center">备注:</td>
  94. <td colspan="4">所有员工离职必须提交30天提交书面申请</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 输入框textpassword,输入框的提示信息
6 list 输入框textpassword,下拉框智能提示
7 autocomplate 输入框textpassword,自动完成(历史记录)
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 选择内容文本时触发

3. 控件标签元素<label>

  • <label>元素没有namevalue属性,不会创建请求参数
  • 它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
  • 语法: <label for="关联控件的id属性值">(也支持三大通用属性)
  • <label>有二种方式与控件元素进行关联/绑定
序号 关联方式 示例代码
1 显式关联 <label for="email">Email:</label><input type="email" id="email">
1 隐式关联 <label>Email:</label><input type="email"></label>

推荐使用显式关联, 案例参考<input>示例


4. 按钮控件元素<button>

4.1 与<input>对比

序号 <button> 替代的<input>
1 <button type="...">按钮文本</button> <input type="..." value="按钮文本">
2 <button><img src="..."></button> <input type="image" src="...">图像域

4.2 常用属性

序号 属性 描述
1 type 必须使用预定义的submit, button, reset之一
2 name 按钮的唯一名称,与 ID 等效
3 value 按钮文本初始值,可通过 JavaScript 修改
4 disabled 禁用按钮
5 form 按钮所属表单(此时按钮type默认类型为submit提交)
6 formaction 设置不同按钮可将表单数据提交到不同的 URL 处理
7 form*** 动态设置<form>属性值,如formmethod="GET"

4.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>按钮元素</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. }
  19. form > section {
  20. display: grid;
  21. grid-template-columns: 60px 1fr;
  22. }
  23. h3 {
  24. text-align: center;
  25. }
  26. section:last-of-type {
  27. display: grid;
  28. grid-template-columns: 1fr 1fr;
  29. column-gap: 10px;
  30. }
  31. button {
  32. height: 30px;
  33. border: none;
  34. outline: none;
  35. }
  36. button:hover {
  37. background-color: lightseagreen;
  38. color: white;
  39. cursor: pointer;
  40. }
  41. </style>
  42. </head>
  43. <body>
  44. <h3>登录/注册</h3>
  45. <form action="register.php" method="post">
  46. <section>
  47. <label for="email">邮箱:</label>
  48. <input type="email" name="email" id="email" required autofocus />
  49. </section>
  50. <section>
  51. <label for="password">密码:</label>
  52. <input type="password" name="password" id="password" required />
  53. </section>
  54. <section>
  55. <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
  56. <button
  57. type="submit"
  58. formaction="login.php"
  59. formmethod="POST"
  60. formtarget="_blank"
  61. >
  62. 登录
  63. </button>
  64. <button
  65. type="submit"
  66. formaction="register.php"
  67. formmethod="GET"
  68. formtarget="_blank"
  69. >
  70. 注册
  71. </button>
  72. </section>
  73. </form>
  74. </body>
  75. </html>
  • register.phplogin.php源码
  1. <?php
  2. // 查看表单提交的请求参数
  3. print_r($_REQUEST);

5. 下拉列表元素<select>

  • 下拉列表使用<select> + <optgroup> + <option>组合元素实现
  • 参数名name定义在<select>中,参数值value,定义在<option>

5.1 <select>属性

序号 属性 描述
1 name 请求参数名称/变量名
2 multiple 是否允许多选(布尔属性)
3 size 允许同时显示的列表项
3 disabled 是否禁用(布尔属性)

5.2 <optgroup>属性

属性 描述
label 列表分组名称

5.3 <option>属性

序号 属性 描述
1 value 请求参数的值
2 label 默认选项文本值
3 selected 是否选中(布尔属性)
3 disabled 是否禁用(布尔属性)

5.4 <select>事件属性

序号 事件属性 描述
1 onchange 当下拉列表选项值发生变化时才会触发
2 onclick 只要点击就会触发(选项值可以不改变)

5.5 示例

  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. <body>
  9. <form action="">
  10. <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
  11. <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
  12. <select
  13. name=""
  14. id=""
  15. size="8"
  16. multiple
  17. onchange="alert(this.value)"
  18. onclick="alert(this.value)"
  19. >
  20. <optgroup label="前端">
  21. <option value="html5">HTML5</option>
  22. <option value="css3" selected>CSS3</option>
  23. <option value="javascript" disabled>JavaScript</option>
  24. <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
  25. <option value="es6" label="ECMScript6"> </option
  26. ><option value="jquery" label="jQuery"> </option
  27. ></optgroup>
  28. <optgroup label="后端">
  29. <option value="php" label="PHP"> </option
  30. ><option value="mysql" label="MySQL"> </option
  31. ><option value="javascript" label="Laravel"> </option
  32. ></optgroup>
  33. </select>
  34. </form>
  35. </body>
  36. </html>

6. 多行文本域元素<textarea>

6.1 常用属性

序号 属性 描述
1 cols 文本域可视宽度
2 rows 文本域可输入的行数
3 name 文本域参数名称
4 form 绑定所属表单元素
5 minlength 允许输入最小字符长度
6 maxlength 允许输入最大字符长度
7 maxlength 允许输入最大字符长度
8 placeholder 提示信息占位符
9 wrap 换行方式:hard/soft默认
10 disabled 禁用(布尔属性)
11 autofocus 自动获取焦点(布尔属性)
12 autocomplete 自动完成(布尔属性)

6.2 事件属性

序号 事件 描述
1 onclick 点击时触发
2 onchange 文本被修改时触发
3 onselect 文本被选中时触发

提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值

6.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>文本域</title>
  7. <style>
  8. body {
  9. width: 80%;
  10. margin: auto;
  11. display: grid;
  12. row-gap: 15px;
  13. }
  14. button {
  15. height: 30px;
  16. border: none;
  17. outline: none;
  18. background-color: lightseagreen;
  19. color: white;
  20. }
  21. button:hover {
  22. background-color: blueviolet;
  23. cursor: pointer;
  24. }
  25. </style>
  26. </head>
  27. <body>
  28. <!-- 表单内部为空,控件全部使用form属性与之绑定 -->
  29. <form action="" id="common"></form>
  30. <!-- change:值改变时触发, select:选中文本时触发 -->
  31. <textarea
  32. name="reply"
  33. id=""
  34. cols="30"
  35. rows="10"
  36. minlength="5"
  37. maxlength="50"
  38. form="common"
  39. placeholder="不超过50字符"
  40. onchange="alert('内容改变了')"
  41. onselect="this.style.color='red'"
  42. ></textarea>
  43. <!-- 动态设置处理脚本与请求类型 -->
  44. <button
  45. type="submit"
  46. form="common"
  47. formaction="register.php"
  48. formmethod="POST"
  49. >
  50. 提交
  51. </button>
  52. </body>
  53. </html>

7. 表单域分组元素<fieldset>

  • 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
  • 它只有一个子元素<legend>,设置分组标题

7.1 常用属性

序号 属性 描述
1 name 分组名称
2 form 分组所属表单,默认是最近的表单
3 disabled 禁用分组(布尔属性)

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性

7.2 示例

  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. body {
  9. display: grid;
  10. row-gap: 15px;
  11. }
  12. fieldset {
  13. color: lightseagreen;
  14. border-radius: 6px;
  15. border: 2px solid lightseagreen;
  16. }
  17. fieldset:hover {
  18. background-color: lightcyan;
  19. }
  20. fieldset > section {
  21. display: grid;
  22. grid-template-columns: repeat(3, 1fr);
  23. column-gap: 15px;
  24. }
  25. fieldset > legend {
  26. text-align: center;
  27. }
  28. input {
  29. border: none;
  30. outline: none;
  31. border-bottom: 1px solid #666;
  32. background-color: transparent;
  33. }
  34. button {
  35. height: 30px;
  36. border: none;
  37. outline: none;
  38. border-radius: 6px;
  39. background-color: lightseagreen;
  40. color: white;
  41. }
  42. button:hover {
  43. background-color: darkorchid;
  44. cursor: pointer;
  45. }
  46. </style>
  47. </head>
  48. <body>
  49. <!-- 提交设置通过<button>元素完成 -->
  50. <form action="" id="register"></form>
  51. <!-- 表单域分组1 -->
  52. <fieldset name="base" form="register">
  53. <legend>基本信息</legend>
  54. <section>
  55. <input
  56. type="email"
  57. name="email"
  58. placeholder="您的邮箱"
  59. form="register"
  60. autofocus
  61. />
  62. <input
  63. type="password"
  64. name="psw1"
  65. placeholder="您的密码"
  66. form="register"
  67. />
  68. <input
  69. type="password"
  70. name="psw2"
  71. placeholder="重复密码"
  72. form="register"
  73. />
  74. </section>
  75. </fieldset>
  76. <!-- 表单域分组2 -->
  77. <fieldset name="other" form="register">
  78. <legend>选填信息</legend>
  79. <section>
  80. <input
  81. type="text"
  82. name="nickname"
  83. placeholder="您的呢称"
  84. form="register"
  85. />
  86. <input type="number" name="age" min="10" max="70" step="1"
  87. form="register" / placeholder="您的年龄"> <input type="url" name="site"
  88. placeholder="个人站点"" form="register"/>
  89. </section>
  90. </fieldset>
  91. <button
  92. type="submit"
  93. form="register"
  94. formaction="register.php"
  95. formmethod="POST"
  96. formtarget="_blank"
  97. >
  98. 提交
  99. </button>
  100. </body>
  101. </html>

点击这里打开本次作业的测试页面,请老师查看,辛苦了

Correcting teacher:天蓬老师天蓬老师

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