Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单与控件元素（按钮常用属性、下拉列表常用属性、文件域常用属性、表单域分组元素常用属性）0404
Blogger Information
Blog 10
fans 0
comment 0
visits 9123
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
表单与控件元素（按钮常用属性、下拉列表常用属性、文件域常用属性、表单域分组元素常用属性）0404
ALWAYS
Original
789 people have browsed it

1.按钮元素<button>

1.1 与<input>对比

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

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

1.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.       }
  19.       button {
  20.         height: 30px;
  21.         border: none;
  22.         outline: none;
  23.       }
  24.       form > section {
  25.         display: grid;
  26.         grid-template-columns: 60px 1fr;
  27.       }
  29.       h3 {
  30.         text-align: center;
  31.       }
  33.       section:last-of-type {
  34.         display: grid;
  35.         grid-template-columns: 1fr 1fr;
  36.         column-gap: 10px;
  37.       }
  38.       button:hover {
  39.         background-color: lightseagreen;
  40.         color: white;
  41.         cursor: pointer;
  42.       }
  43.     </style>
  44.   </head>
  45.   <body>
  46.     <h3>登录/注册</h3>
  47.     <form action="register.php" method="post">
  48.       <section>
  49.         <label for="email">邮箱：</label>
  50.         <input type="email" name="email" id="email" required aotufocus />
  51.       </section>
  52.       <section>
  53.         <label for="password">密码：</label>
  54.         <input type="password" name="password" id="password" required />
  55.       </section>
  56.       <section>
  57.         <button
  58.           type="sunbmit"
  59.           formaction="login.php"
  60.           formmethod="POST"
  61.           formtarget="_blank"
  62.         >
  63.           登录
  64.         </button>
  65.         <button
  66.           type="sunbmit"
  67.           formaction="register.php"
  68.           formmethod="GET"
  69.           formtarget="_blank"
  70.         >
  71.           注册
  72.         </button>
  73.       </section>
  74.     </form>
  75.   </body>
  76. </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.       <select
  11.         name="lang"
  12.         id="lang"
  13.         multiple
  14.         size="8"
  15.         onchange="alert(this.value)"
  16.         onclick="alert(this.value)"
  17.       >
  18.         <optgroup label="前端">
  19.           <option value="HTML5">HTML5</option>
  20.           <option value="CSS3">CSS3</option>
  21.           <option value="JavaScript">JavaScript</option>
  22.           <option value="ECMScript">ECMScript</option>
  23.           <option value="JQuery">JQuery</option>
  24.         </optgroup>
  25.         <optgroup label="后端">
  26.           <option value="PHP">PHP</option>
  27.           <option value="MYSQL">MYSQL</option>
  28.           <option value="Laravel">Laravel</option>
  29.         </optgroup>
  30.       </select>
  31.     </form>
  32.   </body>
  33. </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 示例

```html
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>文本域</title>
<style>
body {
width: 80%;
margin: auto;
display: grid;
row-gap: 15px;
}

  1.   button {
  2.     height: 30px;
  3.     border: none;
  4.     outline: none;
  5.     background-color: lightseagreen;
  6.     color: white;
  7.   }
  9.   button:hover {
  10.     background-color: blueviolet;
  11.     cursor: pointer;
  12.   }
  13. </style>

</head>

<body>
<!-- 表单内部为空,控件全部使用form属性与之绑定 -->
<form action="" id="common"></form>
<!-- change:值改变时触发, select:选中文本时触发 -->
<textarea
name=”reply”
id=””
cols=”30”
rows=”10”
minlength=”5”
maxlength=”50”
form=”common”
placeholder=”不超过50字符”
onchange=”alert(‘内容改变了’)”
onselect=”this.style.color=’red’”

  1. ></textarea>
  2. <!-- 动态设置处理脚本与请求类型 -->
  3. <button
  4.   type="submit"
  5.   form="common"
  6.   formaction="register.php"
  7.   formmethod="POST"
  8. >
  9.   提交
  10. </button>

</body>
</html>

  1. ![](https://img.php.cn/upload/image/977/455/454/1586048118128344.png)
  2. ## 4. 表单域分组元素`<fieldset>`
  4. - 当表单字段非常多时,分组管理很有必要,例如将必填项与选填项分开
  5. - 它只有一个子元素`<legend>`,设置分组标题
  7. ### 4.1 常用属性
  9. | 序号 | 属性       | 描述                          |
  10. | ---- | ---------- | ----------------------------- |
  11. | 1    | `name`     | 分组名称                      |
  12. | 2    | `form`     | 分组所属表单,默认是最近的表单 |
  13. | 3    | `disabled` | 禁用分组(布尔属性)            |
  15. > `name`,`form`属性仅供参考,提交参数仍依赖内部控件中的`form`属性
  16. ### 4.2 示例
  17. ```html
  18. <!DOCTYPE html>
  19. <html lang="en">
  20.   <head>
  21.     <meta charset="UTF-8" />
  22.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  23.     <title>fieldset 表单域分组元素</title>
  24.     <style>
  25.       body {
  26.         display: grid;
  27.         row-gap: 15px;
  28.       }
  29.       fieldset {
  30.         color: lightseagreen;
  31.         border-radius: 6px;
  32.         border: 2px solid lightseagreen;
  33.       }
  35.       fieldset:hover {
  36.         background-color: lightcyan;
  37.       }
  39.       fieldset > section {
  40.         display: grid;
  41.         grid-template-columns: repeat(3, 1fr);
  42.         column-gap: 15px;
  43.       }
  44.       fieldset > legend {
  45.         text-align: center;
  46.       }
  48.       input {
  49.         border: none;
  50.         outline: none;
  51.         border-bottom: 1px solid #666;
  52.         background-color: transparent;
  53.       }
  55.       button {
  56.         height: 30px;
  57.         border: none;
  58.         outline: none;
  59.         border-radius: 6px;
  60.         background-color: lightseagreen;
  61.         color: white;
  62.       }
  64.       button:hover {
  65.         background-color: darkorchid;
  67.         cursor: pointer;
  68.       }
  69.     </style>
  70.   </head>
  71.   <body>
  72.     <form action="" id="register"></form>
  73.     <fieldset form="register">
  74.       <legend>基础信息</legend>
  75.       <section>
  76.         <input
  77.           type="email"
  78.           name="email"
  79.           placeholder="您的邮箱"
  80.           from="register"
  81.         />
  82.         <input
  83.           type="password"
  84.           name="password1"
  85.           placeholder="您的密码"
  86.           form="register"
  87.         />
  88.         <input
  89.           type="password"
  90.           name="password2"
  91.           placeholder="重复密码"
  92.           form="register"
  93.         />
  94.       </section>
  95.     </fieldset>
  96.     <fieldset form="register">
  97.       <legend>选填信息</legend>
  98.       <section>
  99.         <input
  100.           type="text"
  101.           name="nickname"
  102.           placeholder="您的昵称"
  103.           form="register"
  104.         />
  105.         <input
  106.           type="number"
  107.           name="age"
  108.           placeholder="您到年龄"
  109.           min="5"
  110.           max="60"
  111.           step="5"
  112.           form="register"
  113.         />
  114.         <input type="url" name="site" placeholder="个人站点" form="register" />
  115.       </section>
  116.     </fieldset>
  117.     <button
  118.       type="submit"
  119.       form="register"
  120.       formmethod="POST"
  121.       formaction="register.php"
  122.       formtarget="_blank"
  123.     >
  124.       提交
  125.     </button>
  126.   </body>
  127. </html>

总结：
1.提交按钮尽量使用button按钮。与input区别在于，button的文本写在标签间，input是单标签，文本使用value值显示。
2.form属性中的元素都可以写在form标签外面，只要元素中的form属性与from标签中的ID值一致即可。
3.下拉列表中有两个实践，onclick 为点击时触发，onchange是焦点改变时触发。
4.当formmethod=”POST” formtarget=”_blank”时，打开新的网页，当formmethod=”get”，下在register.php文件。

Correcting teacher：天蓬老师天蓬老师

Correction status：qualified

Teacher's comments：总结不错
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