听课才知道原来表单的功能重要性，此处必须要多练习上百遍，加深肌肉肌肉记忆，方便以后敲击代码如同行云流水般。
每天学习流程：练习敲击代码-写作业-预习下一节课的内容！
总感觉上课的时间太少，学习的内容不够多，是不是我的错觉？
按钮常用属性
| 序号 |
<button> |
替代的<input> |
| 1 |
<button type="...">按钮文本</button> |
<input type="..." value="按钮文本"> |
| 2 |
<button><img src="..."></button> |
<input type="image" src="...">图像域 |
常用属性
| 序号 |
属性 |
描述 |
| 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" |
示例
<!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>
下拉别表常用属性与事件
下拉列表元素<select>
- 下拉列表使用
<select> + <optgroup> + <option>组合元素实现 - 参数名
name定义在<select>中,参数值value,定义在<option>中
<select>属性
| 序号 |
属性 |
描述 |
| 1 |
name |
请求参数名称/变量名 |
| 2 |
multiple |
是否允许多选(布尔属性) |
| 3 |
size |
允许同时显示的列表项 |
| 3 |
disabled |
是否禁用(布尔属性) |
<optgroup>属性
<option>属性
| 序号 |
属性 |
描述 |
| 1 |
value |
请求参数的值 |
| 2 |
label |
默认选项文本值 |
| 3 |
selected |
是否选中(布尔属性) |
| 3 |
disabled |
是否禁用(布尔属性) |
<select>事件属性
| 序号 |
事件属性 |
描述 |
| 1 |
onchange |
当下拉列表选项值发生变化时才会触发 |
| 2 |
onclick |
只要点击就会触发(选项值可以不改变) |
示例
<!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=""> <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 --> <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 --> <select name="" id="" size="8" multiple onchange="alert(this.value)" onclick="alert(this.value)" > <optgroup label="前端"> <option value="html5">HTML5</option> <option value="css3" selected>CSS3</option> <option value="javascript" disabled>JavaScript</option> <!-- 使用label属性,可省略选项文本,并将option转为单标签 --> <option value="es6" label="ECMScript6"> </option ><option value="jquery" label="jQuery"> </option ></optgroup> <optgroup label="后端"> <option value="php" label="PHP"> </option ><option value="mysql" label="MySQL"> </option ><option value="javascript" label="Laravel"> </option ></optgroup> </select> </form> </body></html>
表单域分组元素常用属性
多行文本域元素<textarea>
常用属性
| 序号 |
属性 |
描述 |
| 1 |
cols |
文本域可视宽度 |
| 2 |
rows |
文本域可输入的行数 |
| 3 |
name |
文本域参数名称 |
| 4 |
form |
绑定所属表单元素 |
| 5 |
minlength |
允许输入最小字符长度 |
| 6 |
maxlength |
允许输入最大字符长度 |
| 7 |
placeholder |
提示信息占位符 |
| 8 |
wrap |
换行方式:hard/soft默认 |
| 9 |
disabled |
禁用(布尔属性) |
| 10 |
autofocus |
自动获取焦点(布尔属性) |
| 11 |
autocomplete |
自动完成(布尔属性) |
事件属性
| 序号 |
事件 |
描述 |
| 1 |
onclick |
点击时触发 |
| 2 |
onchange |
文本被修改时触发 |
| 3 |
onselect |
文本被选中时触发 |
提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值
示例
<!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> <!-- 表单内部为空,控件全部使用form属性与之绑定 --> <form action="" id="common"></form> <!-- change:值改变时触发, select:选中文本时触发 --> <textarea name="reply" id="" cols="30" rows="10" minlength="5" maxlength="50" form="common" placeholder="不超过50字符" onchange="alert('内容改变了')" onselect="this.style.color='red'" >
- 本次课堂学习button属性，下拉表列的select属性，optgroup属性，onchange、onclike、onlelete事件属性。以及form表单的应用，对于新手的我来说，需要更次的敲击代码，巩固所学知识。目前的状态是，对于学过的知识，很容易忘记，老师有没有好的方法，可以指导一下我
