<button> 标签定义一个按钮。- 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。
| 序号 |
<button> |
<input> |
| 1 |
<button type="...">按钮文本</button> |
<input type="..." value="按钮文本"> |
| 2 |
<button><img src="..."></button> |
<input type="image" src="...">图像域 |
1.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" |
代码实例
<!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 > <h3 style="text-align: center;">登录/注册</h3> <form action="register.php" method="post" style="padding: 20px;width: 350px;margin: auto;background-color: lightskyblue;"> <section style="margin:auto;"> <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 style="margin-top: 20px;"> <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 --> <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>
2、下拉列表元素<select>
- 下拉列表使用
<select> + <optgroup> + <option>组合元素实现 - 参数名
name定义在<select>中,参数值value,定义在<option>中
2.1、<select>属性
| 序号 |
属性 |
描述 |
| 1 |
name |
请求参数名称/变量名 |
| 2 |
multiple |
是否允许多选(布尔属性) |
| 3 |
size |
允许同时显示的列表项 |
| 3 |
disabled |
是否禁用(布尔属性) |
2.2、<optgroup>属性
- 通过 <optgroup> 标签把相关的选项组合在一起
2.3、<option>属性
| 序号 |
属性 |
描述 |
| 1 |
value |
请求参数的值 |
| 2 |
label |
默认选项文本值 |
| 3 |
selected |
是否选中(布尔属性) |
| 3 |
disabled |
是否禁用(布尔属性) |
2.4 <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 > <select name="" id="" size="6" multiple onchange="alert(this.value)" onclick="alert(this.value)"> <optgroup label="前端"> <option value ="html">HTML</option> <option value ="css">CSS</option> </optgroup> <optgroup label="后端"> <option value ="php">PHP</option> <option value ="java">JAVA</option> </optgroup> </select> </body></html>
3、多行文本域元素<textarea>
<textarea>是双标签,没有value属性,标签内部的文本就是参数值
3.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 |
自动完成(布尔属性) |
3.2、 事件属性
| 序号 |
事件 |
描述 |
| 1 |
onclick |
点击时触发 |
| 2 |
onchange |
文本被修改时触发 |
| 3 |
onselect |
文本被选中时触发 |
代码实例
<!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="" id="beizhu"></form> <textarea name="beizhu" id="" cols="30" rows="10" minlength="5" maxlength="50" form="common" placeholder="不超过50字符" onchange="alert('内容改变了')" onselect="this.style.color='green'" >
4、HTML控件元素、属性及事件学习总结
- 本课学习了按钮元素、下拉列表元素、多行文本域元素。在按钮元素学习中使我对按钮元素有了新的认识，如
form属性， formaction属性、formmethod属性，这些都是我之前不知道的内容，对按钮元素的认识更加全面。在学习下拉列表元素学习中使我知道了<optgroup>属性，知道了列表分组的知识。在学习多行文本域元素<textarea>知识的时候，对自学知识进行了巩固加深记忆。
