search

博客列表 >HTML按钮、下拉菜单、文本域以及表单域分组元素的常用属性及事件

HTML按钮、下拉菜单、文本域以及表单域分组元素的常用属性及事件

文瑜
文瑜原创
2020年04月08日 01:48:591729浏览

HTML 基础知识

1. 按钮控件元素<button>

1.1 常用属性

序号 属性 描述
1 type 必须使用预定义的submit,button,reset之一
2 name 按钮的位移名称，与ID等效
3 value 按钮文本初始值，可通过JavaScript修改
4 disabled 禁用按钮
5 form 按钮所属表单（此时按钮type默认类型为submit提交）
6 formaction 设置不同按钮可将表单数据提交到不同的 URL 处理
7 formmethod 动态设置<form>属性值，如formmethod="GET"
8 formtarget 设置数据接收页面打开方式分别为_self和_blank

1.2 示例

  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>
  8.     <style>
  9.       form {
  10.         padding: 20px;
  11.         width: 350px;
  12.         box-shadow: 0 0 8px #888;
  13.         border-radius: 10px;
  14.         box-sizing: border-box;
  15.         margin: auto;
  16.         background-color: lightskyblue;
  17.         display: grid;
  18.         gap: 15px;
  19.       }
  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>
  48.   <body>
  49.     <h3>登录/注册</h3>
  50.     <form action="">
  51.       <section>
  52.         <label for="email">邮箱：</label>
  53.         <input type="email" id="email" name="email" required />
  54.       </section>
  55.       <section>
  56.         <label for="password">密码：</label>
  57.         <input type="password" id="password" name="password" required />
  58.       </section>
  59.       <section>
  60.         <button formaction="login.php" formmethod="POST" formtarget="_blank">
  61.           登录
  62.         </button>
  63.         <button formaction="register.php" formmethod="GET" formtarget="_blank">
  64.           注册
  65.         </button>
  66.       </section>
  67.     </form>
  68.   </body>
  69. </html>

1.3 效果图

1.4 运行效果

http://211.149.219.93:90/0404/button.html

2. 下拉列表元素 <select>

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

2.1 <select>属性

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

2.2 <optgroup>属性

属性 描述
label 列表分组名称

2.3 <option>属性

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

2.4 <select>事件属性

序号 事件属性 描述
1 onchange 当下拉列表选项值发生变化时才会触发
2 onclick 只要点击就会触发(选项值可以不改变)

2.5 示例

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

2.6 效果图

2.7 运行效果

http://211.149.219.93:90/0404/select.html

3. 多行文本域元素<textarea>

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 文本被选中时触发

提示: <textarea>是双标签,没有value属性,标签内部的文本就是参数值

3.3 示例

  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.       }
  14.       button {
  15.         height: 30px;
  16.         border: none;
  17.         outline: none;
  18.         background-color: lightseagreen;
  19.         color: white;
  20.       }
  21.       button:hover {
  22.         background-color: blueviolet;
  23.         cursor: pointer;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <form action="" id="common"></form>
  29.     <!-- onchang:当内容改变时触发 -->
  30.     <!-- onselect:当内容被选中时触发 -->
  31.     <textarea
  32.       name="replay"
  33.       cols="30"
  34.       rows="10"
  35.       minlength="5"
  36.       maxlength="50"
  37.       form="common"
  38.       placeholder="不能超过50个字"
  39.       onchange="alert('内容改变了')"
  40.       onselect="this.style.color = 'red'"
  41.     >
  42.     hello,word
  43. </textarea
  44.     >
  45.     <button
  46.       type="submit"
  47.       form="common"
  48.       formaction="register.php"
  49.       formmethod="POST"
  50.     >
  51.       提交
  52.     </button>
  53.   </body>
  54. </html>

3.4 效果图

3.5 运行效果

http://211.149.219.93:90/0404/textarea.html

4. 表单域分组元素<fieldset>

4.1 常用属性

序号 属性 描述
1 name 分组名称
2 form 分组所属表单,默认是最近的表单
3 disabled 禁用分组(布尔属性)

name,form属性仅供参考,提交参数仍依赖内部控件中的form属性

4.2 示例

  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.         display: grid;
  10.         row-gap: 15px;
  11.       }
  12.       fieldset {
  13.         color: lightseagreen;
  14.         border-radius: 6px;
  15.         border: 2px solid lightseagreen;
  16.       }
  17.       fieldset > section {
  18.         display: grid;
  19.         grid-template-columns: repeat(3, 1fr);
  20.         column-gap: 15px;
  21.       }
  22.       input {
  23.         border: none;
  24.         outline: none;
  25.         border-bottom: 1px solid #666;
  26.         background-color: transparent;
  27.       }
  28.       button {
  29.         height: 30px;
  30.         border: none;
  31.         outline: none;
  32.         border-radius: 6px;
  33.         background-color: lightseagreen;
  34.         color: white;
  35.       }
  36.       button:hover {
  37.         background-color: darkorchid;
  38.         cursor: pointer;
  39.       }
  40.     </style>
  41.   </head>
  42.   <body>
  43.     <form action="" id="register"></form>
  45.     <!-- 第一个表单分组 -->
  46.     <fieldset name="base" form="register">
  47.       <legend>基本信息</legend>
  48.       <section>
  49.         <input
  50.           type="email"
  51.           name="email"
  52.           placeholder="你的邮箱"
  53.           form="register"
  54.           autofocus
  55.         />
  57.         <input
  58.           type="password"
  59.           name="pasw1"
  60.           placeholder="你的密码"
  61.           form="register"
  62.         />
  64.         <input
  65.           type="password"
  66.           name="pasw2"
  67.           placeholder="重复密码"
  68.           form="register"
  69.         />
  70.       </section>
  71.     </fieldset>
  72.     <!-- 第二表单分组 -->
  73.     <fieldset name="base" form="register">
  74.       <legend>选填信息</legend>
  75.       <section>
  76.         <input
  77.           type="text"
  78.           name="nickname"
  79.           placeholder="你的昵称"
  80.           form="register"
  81.         />
  83.         <input
  84.           type="number"
  85.           name="age"
  86.           min="0"
  87.           max="120"
  88.           placeholder="你的年龄"
  89.           form="register"
  90.         />
  91.       </section>
  92.     </fieldset>
  94.     <button
  95.       type="submit"
  96.       form="register"
  97.       formaction="register.php"
  98.       formmethod="POST"
  99.       formtarget="_blank"
  100.     >
  101.       提交
  102.     </button>
  103.   </body>
  104. </html>

4.3 效果图

4.4 运行效果

http://211.149.219.93:90/0404/fieldset.html

5 总结

  • 学习button标签的常用属性，与input标签中type=button的用法区别。
  • 学习下拉列表select标签元素的常用属性与事件，常用事件有onchange和onclick。
  • 学习文本域<textarea>元素常用属性与事件，了解<textarea>事件属性的用法。
  • 学习表单域分组元素<fieldset>用法，一般用在表单字段过多时，进行分组管理
上一条：css选择器基础知识下一条：【MySQL优化】in 和 exists 使用区别
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多