微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > 博客列表 > HTML基础之按钮、下拉列表、文本域、表单域分组元素的属性与事件
博主信息
博文 10
粉丝 0
评论 0
访问量 8406
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
HTML基础之按钮、下拉列表、文本域、表单域分组元素的属性与事件
路亚
原创
930人浏览过

听课才知道原来表单的功能重要性，此处必须要多练习上百遍，加深肌肉肌肉记忆，方便以后敲击代码如同行云流水般。
每天学习流程：练习敲击代码-写作业-预习下一节课的内容！
总感觉上课的时间太少，学习的内容不够多，是不是我的错觉？

按钮常用属性

序号 <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"

示例

  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.       }
  20.       form > section {
  21.         display: grid;
  22.         grid-template-columns: 60px 1fr;
  23.       }
  25.       h3 {
  26.         text-align: center;
  27.       }
  29.       section:last-of-type {
  30.         display: grid;
  31.         grid-template-columns: 1fr 1fr;
  32.         column-gap: 10px;
  33.       }
  35.       button {
  36.         height: 30px;
  37.         border: none;
  38.         outline: none;
  39.       }
  41.       button:hover {
  42.         background-color: lightseagreen;
  43.         color: white;
  44.         cursor: pointer;
  45.       }
  46.     </style>
  47.   </head>
  49.   <body>
  50.     <h3>登录/注册</h3>
  51.     <form action="register.php" method="post">
  52.       <section>
  53.         <label for="email">邮箱:</label>
  54.         <input type="email" name="email" id="email" required autofocus />
  55.       </section>
  57.       <section>
  58.         <label for="password">密码:</label>
  59.         <input type="password" name="password" id="password" required />
  60.       </section>
  62.       <section>
  63.         <!-- 注册与登录,使用不同的脚本进行处理,并动态设置提交类型,打开方式 -->
  64.         <button
  65.           type="submit"
  66.           formaction="login.php"
  67.           formmethod="POST"
  68.           formtarget="_blank"
  69.         >
  70.           登录
  71.         </button>
  72.         <button
  73.           type="submit"
  74.           formaction="register.php"
  75.           formmethod="GET"
  76.           formtarget="_blank"
  77.         >
  78.           注册
  79.         </button>
  80.       </section>
  81.     </form>
  82.   </body>
  83. </html>

下拉别表常用属性与事件

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

<select>属性

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

<optgroup>属性

属性 描述
label 列表分组名称

<option>属性

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

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

示例

  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.       }
  15.       button {
  16.         height: 30px;
  17.         border: none;
  18.         outline: none;
  19.         background-color: lightseagreen;
  20.         color: white;
  21.       }
  23.       button:hover {
  24.         background-color: blueviolet;
  25.         cursor: pointer;
  26.       }
  27.     </style>
  28.   </head>
  30.   <body>
  31.     <!-- 表单内部为空,控件全部使用form属性与之绑定 -->
  32.     <form action="" id="common"></form>
  33.     <!-- change:值改变时触发, select:选中文本时触发 -->
  34.     <textarea
  35.       name="reply"
  36.       id=""
  37.       cols="30"
  38.       rows="10"
  39.       minlength="5"
  40.       maxlength="50"
  41.       form="common"
  42.       placeholder="不超过50字符"
  43.       onchange="alert('内容改变了')"
  44.       onselect="this.style.color='red'"
  45.     >
  • 本次课堂学习button属性，下拉表列的select属性，optgroup属性，onchange、onclike、onlelete事件属性。以及form表单的应用，对于新手的我来说，需要更次的敲击代码，巩固所学知识。目前的状态是，对于学过的知识，很容易忘记，老师有没有好的方法，可以指导一下我
批改老师：天蓬老师天蓬老师

批改状态：合格

老师批语：对抗遗忘没有良药, 只有重复才是最有效的... 任何困难 , 都会被重复打败
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录