Community Learn Tools Library Leisure
search
English
Home > List of blog posts > HTML控件元素、属性及事件
Blogger Information
Blog 36
fans 0
comment 0
visits 28193
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
HTML控件元素、属性及事件
phpcn_u202398
Original
1474 people have browsed it

1、按钮控件元素<button>

  • <button> 标签定义一个按钮。

    1.1、 <button>与<input>区别

  • 在 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"
代码实例
  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>
  9.   <body >
  10.     <h3 style="text-align: center;">登录/注册</h3>
  11.     <form action="register.php" method="post" style="padding: 20px;width: 350px;margin: auto;background-color: lightskyblue;">
  12.       <section  style="margin:auto;">
  13.         <label for="email">邮箱:</label>
  14.         <input type="email" name="email" id="email" required autofocus />
  15.       </section>
  17.       <section>
  18.         <label for="password">密码:</label>
  19.         <input type="password" name="password" id="password" required />
  20.       </section>
  22.       <section style="margin-top: 20px;">
  23.         <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
  24.         <button  type="submit" formaction="login.php" formmethod="POST"  formtarget="_blank">登录</button>
  25.         <button  type="submit" formaction="register.php"  formmethod="GET"  formtarget="_blank">注册</button>
  26.       </section>
  27.     </form>
  28.   </body>
  29. </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> 标签把相关的选项组合在一起
属性 描述
label 列表分组名称

2.3、<option>属性

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

2.4 <select>事件属性

序号 事件属性 描述
1 onchange 当下拉列表选项值发生变化时才会触发
2 onclick 只要点击就会触发(选项值可以不改变)
代码实例
  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.     <select  name=""  id=""  size="6"  multiple  onchange="alert(this.value)"  onclick="alert(this.value)">
  10.     <optgroup label="前端">
  11.       <option value ="html">HTML</option>
  12.       <option value ="css">CSS</option>
  13.     </optgroup>
  15.     <optgroup label="后端">
  16.       <option value ="php">PHP</option>
  17.       <option value ="java">JAVA</option>
  18.     </optgroup>
  19.   </select>
  20.   </body>
  21. </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 文本被选中时触发
代码实例
  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="" id="beizhu"></form>    
  10.     <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>知识的时候，对自学知识进行了巩固加深记忆。
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