search

博客列表 >细说表单控件：按钮、下拉列表、文本域、域分组元素等常用属性与事件

细说表单控件：按钮、下拉列表、文本域、域分组元素等常用属性与事件

溪边小树
溪边小树原创
2020年04月07日 16:55:181698浏览

课前老师推荐了几种技术资料查询的方式，非常实用：
1、w3cschool：https://www.w3school.com.cn/
2、php中文网中的原生手册等
3、mdn：https://developer.mozilla.org/zh-CN/ 全球开发者的乐园，专业人士使用的查询手册

4. 按钮控件元素<button>

4.1 与<input>对比

序号 <button> 替代的<input>
1 <button type="...">按钮文本</button> <input type="..." value="按钮文本">
2 <button><img src="..."></button> <input type="image" src="...">图像域

4.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"

4.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.       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>
  • register.php和login.php源码
  1. <?php
  2. // 查看表单提交的请求参数
  3. print_r($_REQUEST);

5. 下拉列表元素<select>

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

5.1 <select>属性

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

5.2 <optgroup>属性

属性 描述
label 列表分组名称

5.3 <option>属性

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

5.4 <select>事件属性

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

5.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>
  9.   <body>
  10.     <form action="">
  11.       <!-- 当前默认选项值是"CSS3", 点击CSS3不会触发change事件,除此之外都会触发 -->
  12.       <!-- click事件不在乎当前值是否发生变化, 只要点击一定触发, 注意与change事件的区别 -->
  13.       <select
  14.         name="lang"
  15.         id="lang"
  16.         size="10"
  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">PHP</option
  32.           ><option value="mysql" label="MySQL">MySQL</option
  33.           ><option value="javascript" label="Laravel">Laravel</option
  34.         ></optgroup>
  35.       </select>
  36.     </form>
  37.   </body>
  38. </html>

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

6.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 自动完成(布尔属性)

6.2 事件属性

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

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

6.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.       }
  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: rgb(226, 43, 67);
  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.     ></textarea>
  46.     <!-- 动态设置处理脚本与请求类型 -->
  47.     <button
  48.       type="submit"
  49.       form="common"
  50.       formaction="register.php"
  51.       formmethod="POST"
  52.     >
  53.       提交
  54.     </button>
  55.   </body>
  56. </html>

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

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

7.1 常用属性

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

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

7.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.       }
  18.       fieldset:hover {
  19.         background-color: lightcyan;
  20.       }
  22.       fieldset > section {
  23.         display: grid;
  24.         grid-template-columns: repeat(3, 1fr);
  25.         column-gap: 15px;
  26.       }
  27.       fieldset > legend {
  28.         text-align: center;
  29.       }
  31.       input {
  32.         border: none;
  33.         outline: none;
  34.         border-bottom: 1px solid #666;
  35.         background-color: transparent;
  36.       }
  38.       button {
  39.         height: 30px;
  40.         border: none;
  41.         outline: none;
  42.         border-radius: 6px;
  43.         background-color: lightseagreen;
  44.         color: white;
  45.       }
  47.       button:hover {
  48.         background-color: darkorchid;
  50.         cursor: pointer;
  51.       }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <!-- 提交设置通过<button>元素完成 -->
  56.     <form action="" id="register"></form>
  58.     <!-- 表单域分组1 -->
  59.     <fieldset name="base" form="register">
  60.       <legend>基本信息</legend>
  61.       <section>
  62.         <input
  63.           type="email"
  64.           name="email"
  65.           placeholder="您的邮箱"
  66.           form="register"
  67.           autofocus
  68.         />
  69.         <input
  70.           type="password"
  71.           name="psw1"
  72.           placeholder="您的密码"
  73.           form="register"
  74.         />
  75.         <input
  76.           type="password"
  77.           name="psw2"
  78.           placeholder="重复密码"
  79.           form="register"
  80.         />
  81.       </section>
  82.     </fieldset>
  84.     <!-- 表单域分组2 -->
  85.     <fieldset name="other" form="register">
  86.       <legend>选填信息</legend>
  87.       <section>
  88.         <input
  89.           type="text"
  90.           name="nickname"
  91.           placeholder="您的呢称"
  92.           form="register"
  93.         />
  94.         <input type="number" name="age" min="10" max="70" step="1"
  95.         form="register" / placeholder="您的年龄"> <input type="url" name="site"
  96.         placeholder="个人站点"" form="register"/>
  97.       </section>
  98.     </fieldset>
  100.     <button
  101.       type="submit"
  102.       form="register"
  103.       formaction="register.php"
  104.       formmethod="POST"
  105.       formtarget="_blank"
  106.     >
  107.       提交
  108.     </button>
  109.   </body>
  110. </html>

课程学习小结：

在上一次表单基本元素学习之后，进一步深入学习以下表单控件的具体使用，主要包括按钮、下拉列表、文本域、域分组元素等常用属性与事件，这些都是必备的基础知识，必须认真掌握好细节，对后续知识的理解有帮助。
几点注意事项：
1、按钮不用input了，现在用buttom来写；
2、递交动态数据，需要切换到PHPSTUDY服务器，localhost（插件live server）没法调试了，它只能做静态网页的调试；
3、Input中的主要type类型：text文本框、password密码、radio单选框、checkbox复选框、file文件等，特别注意label里的for属性与input里的id属性关联绑定；
4、由于使用不同脚本处理递交登录与注册，form中的属性action=”register.php” method=”post”可以去掉；
5、老师在表单域分组等示例中用了一些CSS代码，还不太能看得懂，明天课程会学到。

上一条：css选择器下一条：0406CSS 选择器
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多