search

博客列表 >HTML基础之按钮，下拉列表，文本域，表单域的常用属性与课后总结

HTML基础之按钮，下拉列表，文本域，表单域的常用属性与课后总结

鼠莱鼠去
鼠莱鼠去原创
2020年04月06日 15:44:481105浏览

按钮控件元素<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>用法，一般用在表单字段过多时，进行分组管理，让代码更简洁易于管理。

上一条：html5表单相关（input、fieldset分组、textarea、seclect预定义列表）知识点案例演示下一条：语义化文本元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多