Community
Learn
Tools Library
AI Tools
Leisure
search
English
Home > List of blog posts > HTML基础之按钮，下拉列表，文本域，表单域的常用属性与课后总结
Blogger Information
Blog 7
fans 0
comment 0
visits 9483
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基础之按钮，下拉列表，文本域，表单域的常用属性与课后总结
鼠莱鼠去
Original
1112 people have browsed it

按钮控件元素<button>

与<input>对比

序号 <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>
  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.             }
  19.             form > section {
  20.                 display: grid;
  21.                 grid-template-columns: 80px 1fr;
  22.             }
  23.             h3 {
  24.                 text-align: center;
  25.             }
  26.             input[type="image"] {
  27.                 justify-self: center;
  28.             }
  29.             button {
  30.                 width: 80px;
  31.                 padding: 5px;
  32.             }
  33.             .reset-btn{
  34.                 margin-left: 20px;
  35.             }
  36.         </style>
  37.     </head>
  38.     <body>
  39.         <h3>用户注册</h3>
  40.         <form action="">
  41.         <section>
  42.             <label for="username">用户名：</label>
  43.             <input type="text" id="username" name="username" placeholder="请输入您的用户名" />
  44.         </section>
  45.         <section>
  46.             <label for="password">密码：</label>
  47.             <input type="password" id="password" name="password" placeholder="请输入密码" />
  48.         </section>
  49.         <!-- 单选框 -->
  50.         <section>
  51.             <label for="secret">性别:</label>
  52.             <div>
  53.                 <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  54.                 <input type="radio" name="gender" id="male" value="male" /><label for="male">男</label>
  55.                 <input type="radio" name="gender" id="female" value="female" /><label for="male">女</label>
  56.                 <!-- checked: 默认选项 -->
  57.                 <input type="radio" name="gender" id="secret" value="female" checked /><label for="secret">保密</label>
  58.             </div>
  59.       </section>
  60.       <section>
  61.         <button type="submit" formaction="register.php" formmethod="GET" formtarget="_blank" class="submit-btn" name="submit" >提交</button>
  62.         <!-- 按钮用“Disabled”属性禁止点击，呈现灰色 -->
  63.         <button type="reset"  class="reset-btn" disabled>重置</button>
  64.       </section>
  65.     </form>
  66.     </body>
  67. </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>
  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.             <select required multiple name="" style="height: 200px;">
  11.                 <optgroup label="想买的车">
  12.                     <option value="volvo">Volvo</option>
  13.                     <option value="saab">Saab</option>
  14.                     <option value="mercedes">Mercedes</option>
  15.                     <option value="audi">Audi</option>
  16.                 </optgroup>
  17.                 <optgroup label="先努力学习">
  18.                     <option value="html5">HTML5</option>
  19.                     <option value="css3" selected>CSS3</option>
  20.                     <!-- 使用“disabled”属性，禁止选择此选项 -->
  21.                     <option value="javascript" disabled>JavaScript</option>
  22.                     <!-- 使用label属性,可省略选项文本,并将option转为单标签 -->
  23.                     <option value="es6" label="ECMScript6"> </option>         
  24.                     <option value="jquery" label="jQuery"> </option>
  25.                 </optgroup>
  26.             </select>
  27.             <input type="submit" value="提交" />
  28.         </form> 
  29.     </body>
  30. </html>

效果图如下：

多行文本域元素<textarea>

常用属性

序号 属性 描述
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 自动完成(布尔属性)

事件属性

序号 事件 描述
1 onclick 点击时触发
2 onchange 文本被修改时触发
3 onselect 文本被选中时触发

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

示例代码

  1. <!DOCTYPE html>
  2. <html>
  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.                 width: 400px;
  11.             }
  12.             button {
  13.                 background-color: cyan;
  14.                 padding: 5px;
  15.                 width: 100%;
  16.                 margin-top: 15px;
  17.             }
  18.         </style>
  19.     </head>
  20.     <body>
  21.         <!-- 表单内部为空,控件全部使用form属性与之绑定 -->
  22.         <form id="textarea-form"></form>
  23.         <textarea name="form-reply" cols="30" rows="10" form="textarea-form" maxlength="50" placeholder="请写下您的问题，我们会第一时间处理并将处理结果通知您。" onchange="alert('内容改变了')" onselect="this.style.color='blue'"></textarea>
  24.         <button form="textarea-form" type="submit">提交</button>
  25.     </body>
  26. </html>

效果图如下：

表单域分组元素<fieldset>

  • 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
  • 它只有一个子元素<legend>,设置分组标题

常用属性

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

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

示例代码

  1. <!DOCTYPE html>
  2. <html>
  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.               width: 500px;
  12.             }
  13.             fieldset {
  14.               color: lightseagreen;
  15.               border-radius: 6px;
  16.               border: 2px solid lightseagreen;
  17.             }
  19.             fieldset:hover {
  20.               background-color: lightcyan;
  21.             }
  23.             fieldset > section {
  24.               display: grid;
  25.               grid-template-columns: repeat(3, 1fr);
  26.               column-gap: 15px;
  27.             }
  28.             fieldset > legend {
  29.               text-align: center;
  30.             }
  32.             input {
  33.               border: none;
  34.               outline: none;
  35.               border-bottom: 1px solid #666;
  36.               background-color: transparent;
  37.             }
  39.             button {
  40.               height: 30px;
  41.               border: none;
  42.               outline: none;
  43.               border-radius: 6px;
  44.               background-color: lightseagreen;
  45.               color: white;
  46.             }
  48.             button:hover {
  49.               background-color: darkorchid;
  51.               cursor: pointer;
  52.             }
  53.         </style>
  54.     </head>
  55.     <body>
  56.         <!-- 提交设置通过<button>元素完成 -->
  57.         <form action="" id="register"></form>
  59.         <!-- 表单域分组 -->
  60.         <fieldset name="base" form="register">
  61.         <legend>基本信息</legend>
  62.         <section>
  63.             <input type="email" name="email" placeholder="您的邮箱" form="register" autofocus />
  64.         <input type="password" name="psw1" placeholder="您的密码" form="register" />
  65.         <input type="password" name="psw2" placeholder="重复密码" form="register" />
  66.       </section>
  67.     </fieldset>
  68.         <button type="submit" form="register">提交</button>
  69.     </body>
  70. </html>

效果图如下：

课后总结

学习button标签的常用属性，与input标签相同之处。
学习下拉列表select标签元素的常用属性，了解 <optgroup>与<option>组合用法。
学习文本域<textarea>元素常用属性，了解<textarea>事件属性的用法。
学习表单域分组元素<fieldset>用法，一般用在表单字段过多时，进行分组管理，让代码更简洁易于管理。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：表单可以设计的很复杂, 也可以很简单, 并且表单不一定非得用form标签, 这在以后你们都会看到
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