表单元素与控件元素分析
1.作业演示站点
https://php520.vip/
2.概念
- 表单分为表单元素与控件元素二部分
- 表单元素仅一个:
<form> - 表单控件元素,根据类型不同,有多个，本文要分析的就是按钮控件元素，下拉列表元素，文本域元素，表单域分组元素。
| 序号 |
<button> |
替代的<input> |
| 1 |
<button type="...">按钮文本</button> |
<input type="..." value="按钮文本"> |
| 2 |
<button><img src="..."></button> |
<input type="image" src="...">图像域 |
提示: 建议使用<button>而不要再用<input>。
3.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" |
3.3 实例，注册登录
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>按钮元素</title> <style> form { padding: 20px; width: 350px; box-shadow: 0 0 8px #888; border-radius: 10px; box-sizing: border-box; margin: auto; background-color: lightskyblue; display: grid; gap: 15px; } form > section { display: grid; grid-template-columns: 60px 1fr; } h3 { text-align: center; } section:last-of-type { display: grid; grid-template-columns: 1fr 1fr; column-gap: 10px; } button { height: 30px; border: none; outline: none; } button:hover { background-color: lightseagreen; color: white; cursor: pointer; } </style> </head> <body> <h3>登录/注册</h3> <form action="register.php" method="post"> <section> <label for="email">邮箱:</label> <input type="email" name="email" id="email" required autofocus /> </section> <section> <label for="password">密码:</label> <input type="password" name="password" id="password" required /> </section> <section> <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 --> <button type="submit" formaction="login.php" formmethod="POST" formtarget="_blank" > 登录 </button> <button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank" > 注册 </button> </section> </form> </body></html>
4.下拉列表元素<select>
- 下拉列表使用
<select> + <optgroup> + <option>组合元素实现 - 参数名
name定义在<select>中,参数值value,定义在<option>中
4.1 <select>属性
| 序号 |
属性 |
描述 |
| 1 |
name |
请求参数名称/变量名 |
| 2 |
multiple |
是否允许多选(布尔属性) |
| 3 |
size |
允许同时显示的列表项 |
| 3 |
disabled |
是否禁用(布尔属性) |
4.2 <optgroup>属性
4.3 <option>属性
| 序号 |
属性 |
描述 |
| 1 |
value |
请求参数的值 |
| 2 |
label |
默认选项文本值 |
| 3 |
selected |
是否选中(布尔属性) |
| 3 |
disabled |
是否禁用(布尔属性) |
4.4 <select>事件属性
| 序号 |
事件属性 |
描述 |
| 1 |
onchange |
当下拉列表选项值发生变化时才会触发 |
| 2 |
onclick |
只要点击就会触发(选项值可以不改变) |
4.5 实例演示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单中的下拉列表</title> </head> <body> <form action=""> <!-- 下拉列表使用的是select --> <!-- onchange专用于select ,当值发生变化时触发 --> <!-- onclick专用于select ，当值点击时触发--> <select name="lang" id="lang" onchange="alert(this.value)" onclick="alert('你点击了')" > <!-- option就是我们要提交啊的数据 --> <optgroup label="前端"> <option value="HTML5">HTML5</option> <option value="CSS3" selected>CSS3</option> <option value="Javascript">JavaScript</option> </optgroup> <optgroup label="后端"> <option value="php" label="PHP"></option> <option value="mysql" label="Mysql"></option> <option value="laravel" label="Laravel"></option> </optgroup> </select> </form> </body></html>
5. 多行文本域元素<textarea>
5.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 |
自动完成(布尔属性) |
5.2 事件属性
| 序号 |
事件 |
描述 |
| 1 |
onclick |
点击时触发 |
| 2 |
onchange |
文本被修改时触发 |
| 3 |
onselect |
文本被选中时触发 |
提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值
5.3 实例演示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>文本域</title> <style> body { width: 80%; margin: auto; display: grid; row-gap: 15px; } button { height: 30px; border: none; outline: none; background-color: lightseagreen; color: white; } button:hover { background-color: blueviolet; cursor: pointer; } </style> </head> <body> <!-- 以后开发过程中可能会用到富文本的编辑器 --> <!-- 一般通过js插件实现，但是把插件引用到当前的页面的时候还是需要用到文本域 --> <form action="" id="common"></form> <!-- name变量名 --> <!-- 文本域一样有change事件 --> <textarea name="replay" cols="30" rows="10" minlength="5" maxlength="50" form="common" placeholder="不超过50个字" onselect="this.style.color='red'" ></textarea> <!-- <input type="submit" value="提交" /> --> <!-- 现在不再这样写了 --> <button type="submit" form="common" formaction="register.php" formmethod="POST" > 提交 </button> </body></html>
6. 表单域分组元素<fieldset>
- 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
- 它只有一个子元素
<legend>,设置分组标题
6.1 常用属性
| 序号 |
属性 |
描述 |
| 1 |
name |
分组名称 |
| 2 |
form |
分组所属表单,默认是最近的表单 |
| 3 |
disabled |
禁用分组(布尔属性) |
name,form属性仅供参考,提交参数仍依赖内部控件中的form属性
6.2 实例演示
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>表单域分组</title> <style> body { display: grid; row-gap: 15px; } fieldset { color: blueviolet; border-radius: 6px; border: 2px solid lightcoral; } fieldset:hover { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 15px; } fieldset > legend { text-align: center; } input { border: none; outline: none; border-bottom: 1px solid #666; background-color: transparent; } button { height: 30px; border: none; outline: none; border-radius: 6px; background-color: lightseagreen; color: white; } button:hover { background-color: darkgoldenrod; cursor: pointer; } </style> </head> <body> <!-- 当我们遇到非常复杂的时候会需要用到 --> <!-- 比如，领导让我们设计一个调查表 --> <form action="" id="register"></form> <!-- 第一个分组,比如说用户注册 --> <!-- 自动获取焦点，一个表单一个 --> <!-- legend要和fieldset绑定 --> <fieldset name="base" form="register"> <legend>基本信息</legend> <section> <input type="email" name="email" placeholder="你的邮箱" form="register" autofocus /> <input type="password" name="paw1" placeholder="你的密码" form="register" /> <input type="password" name="paw2" placeholder="重复密码" form="register" /> </section> </fieldset> <!-- 第二个分组 --> <fieldset name="base" form="register"> <legend>选填信息</legend> <section> <input type="text" name="nickname" placeholder="你的昵称" form="register" autofocus /> <input type="number" name="age1" min="18" placeholder="你的年龄" form="register" /> </section> </fieldset> <button type="submit" formaction="register.php" formmethod="POST" formtarget="_blank" form="register" > 提交 </button> </body></html>
7.总结
通过本节课的学习，加深了对 HTML 前端代码开发的认识，发现 HTML 不仅有趣，而且有一定的规律可循，比如代码都是通过元素的使用来告诉浏览器我想要呈现的东西是什么，只要用好了这些元素，标签，清晰他们的使用方法，各种属性，跟着老师的讲解节奏来，相信很快会有新的突破。
