简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

博客列表 >html基础知识表单与控件元素、基础按钮元素、基础下拉列表元素、多行文本域元素、表单域分组元素

html基础知识表单与控件元素、基础按钮元素、基础下拉列表元素、多行文本域元素、表单域分组元素

῀℡῀ᵒᵐᵍᵎᵎᵎ
῀℡῀ᵒᵐᵍᵎᵎᵎ原创
2020年04月05日 10:50:16715浏览

表单与控件元素

1.表单控件元素

1.1 常用属性

序号 属性 描述
1 type 控件类型,如文本框, 复选框…
2 name 请求参数的名称,对应于脚本处理的变量名
3 value 请求参数的值,对应于脚本处理的变量值,使用预定义值控件无效
4 form 控件所属表单
5 placeholder 仅限输入框text和password,输入框的提示信息
6 list 仅限输入框text和password,下拉框智能提示
7 autocomplate 仅限输入框text和password,自动完成(历史记录)
8 maxlength 仅限输入框text/password, 允许输入最大字符数量
9 checked 仅限单选框radio, 复选框checkbox(布尔属性)
10 readonly 元素只读,但通过 JavaScript 可修改(布尔属性)
11 disabled 元素禁用,(布尔属性)
12 autofocus 自动获取焦点,一个表单仅限一个控件
13 src 仅限图像域images, 图像 URL 地址
14 width 仅限图像域images, 图像宽度
15 height 仅限图像域images, 图像高度

1.2type类型

  • 常用类型
序号 类型 描述
1 <input type="text"> 单行文本框 (默认值)
2 <input type="password"> 密码输入框
3 <input type="radio"> 单选框
4 <input type="checkbox"> 复选框
5 <input type="image"> 图像域/提交表单
6 <input type="file"> 文件上传域
7 <input type="hidden"> 隐藏域
  • html5 新增类型
序号 类型 描述
1 <input type="email"> 电子邮件
2 <input type="data"> 日期
2 <input type="data"> 日期
4 <input type="datetime-local"> 本地日期时间
5 <input type="tel"> 电话号码
6 <input type="url"> URL 地址
7 <input type="number"> 数值
8 <input type="range"> 范围拖动条
9 <input type="search"> 搜索框/移动
10 <input type="color"> 拾色器

1.3 常用事件属性

序号 事件属性 描述
1 onfocus 获取焦点时触发
2 onblur 失去焦点时触发
3 onchange 失去焦点,且值发生变化时触发
4 oninput 值发生变化(不等失去焦点)时触发
5 onkeydown 按下键盘时触发
6 onkeyup 抬起键盘时触发
7 onclick 鼠标单击时触发
8 onselect 选择内容文本时触发

1.4 示例

1.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>html基础input</title>
  7.   </head>
  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.     }
  21.     form > section {
  22.       display: grid;
  23.       grid-template-columns: 60px 1fr;
  24.     }
  26.     h3 {
  27.       text-align: center;
  28.     }
  30.     section:last-of-type {
  31.       display: grid;
  32.       grid-template-columns: 1fr 1fr;
  33.       column-gap: 10px;
  34.     }
  36.     button {
  37.       height: 30px;
  38.       border: none;
  39.       outline: none;
  40.     }
  42.     button:hover {
  43.       background-color: lightseagreen;
  44.       color: white;
  45.       cursor: pointer;
  46.     }
  47.   </style>
  48.   <body>
  49.     <h3>用户注册</h3>
  50.     <form
  51.       action="register.php"
  52.       method="post"
  53.       enctype="application/x-www-form-urlencoded"
  54.       id="register"
  55.     >
  56.       <section>
  57.         <label for="username">
  58.           用户名:
  59.         </label>
  60.         <input
  61.           type="text"
  62.           id="username"
  63.           placeholder="最好是6位以上16位一下"
  64.           maxlength="16"
  65.           required
  66.           autofocus
  67.         />
  68.       </section>
  69.       <section>
  70.         <label for="password">
  71.           密码:
  72.         </label>
  73.         <input
  74.           type="password"
  75.           id="password"
  76.           name="password"
  77.           placeholder="密码要求8位以上16位一下"
  78.           size="16"
  79.           required
  80.         />
  81.       </section>
  82.       <section>
  83.         <label for="secret">性别：</label>
  84.         <div class="box">
  85.           <input type="radio" name="gender" id="male" value="male" /><label
  86.             for="male"
  87.             >男</label
  88.           >
  89.           <input type="radio" name="gender" id="female" value="female" /><label
  90.             for="female"
  91.             >女</label
  92.           >
  93.           <input type="radio" name="gender" id="secret" value="secret" /><label
  94.             for="secret"
  95.             checked
  96.             >保密</label
  97.           >
  98.         </div>
  99.       </section>
  100.       <section>
  101.         <label for="programme">兴趣：</label>
  102.         <div class="box">
  103.           <input type="checkbox" name="hobby[]" name="game" id="game" /><label
  104.             for=""
  105.             >游戏</label
  106.           >
  107.           <input type="checkbox" name="hobby[]" name="tour" id="tour" /><label
  108.             for=""
  109.             >旅游</label
  110.           >
  111.           <input type="checkbox" name="hobby[]" name="shoot" id="shoot" /><label
  112.             for=""
  113.             >摄影</label
  114.           >
  115.           <input
  116.             type="checkbox"
  117.             name="hobby[]"
  118.             name="programme"
  119.             id="programme"
  120.           /><label for="">编程</label>
  121.         </div>
  122.       </section>
  123.       <!-- 文件域 -->
  124.       <section>
  125.         <label for="userpic">头像:</label>
  127.         <input type="file" name="user_pic" id="userpic" />
  129.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  130.       </section>
  132.       <section>
  133.         <label for="course">课程:</label>
  134.         <input type="text" name="course" list="course" />
  135.         <datalist id="course">
  136.           <option value="HTML/CSS"> </option>
  137.           <option value="JavaScript"> </option>
  138.           <option value="PHP"> </option>
  139.           <option value="Laravel"> </option>
  140.         </datalist>
  141.       </section>
  143.       <!-- 图像域: 提交按钮为图像 -->
  145.       <input
  146.         type="image"
  147.         src="anniu.png"
  148.         alt="submit"
  149.         name="submit"
  150.         width="100"
  151.       />
  152.     </form>
  154.     <hr />
  156.     <!-- 表单控件元素不一定必须写到<form>标签内 -->
  157.     <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  158.     <section>
  159.       <label for="email">邮箱:</label>
  160.       <input type="email" name="email" id="email" form="register" />
  161.     </section>
  163.     <section>
  164.       <label for="age">年龄:</label>
  165.       <input
  166.         type="number"
  167.         name="age"
  168.         id="age"
  169.         form="register"
  170.         min="18"
  171.         max="60"
  172.         step="2"
  173.         value="22"
  174.       />
  175.     </section>
  176.   </body>
  177. </html>

2.html 基础按钮元素

2.1 与<input>对比

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

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

2.3 示例

2.4 示例代码

  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>html基础按钮元素</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>

3. html 基础下拉列表元素

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

3.1<select>属性

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

3.2<optgroup>属性

属性 描述
label 列表分组名称

3.3<option>属性

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

3.4<select>事件属性

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

3.5 示例

3.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>html基础下拉列表</title>
  7.   </head>
  9.   <body>
  10.     <form action="">
  11.       <select
  12.         name="lang"
  13.         id="lang"
  14.         size="8"
  15.         multiple
  16.         onchange="alert(this.value)"
  17.         onclick="alert(this.value)"
  18.       >
  19.         <optgroup label="前端">
  20.           <option value="html5">HTML5</option>
  21.           <option value="css3" selected>CSS3</option>
  22.           <option value="javascript" disabled>JavaScript</option>
  23.           <option value="es5" label="ECMScript5"> </option
  24.           ><option value="jquery" label="jQuery"> </option
  25.         ></optgroup>
  27.         <optgroup label="后端">
  28.           <option value="php" label="PHP"> </option
  29.           ><option value="mysql" label="MySQL"> </option
  30.           ><option value="javascript" label="Laravel"> </option
  31.         ></optgroup>
  32.       </select>
  33.     </form>
  34.   </body>
  35. </html>

4.多行文本域元素

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

4.2 事件属性

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

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

4.3 示例

4.4 示例代码

  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>html基础文本域</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: blueviolet;
  25.         cursor: pointer;
  26.       }
  27.     </style>
  28.   </head>
  30.   <body>
  31.     <form action="" id="common"></form>
  32.     <textarea
  33.       name="reply"
  34.       id=""
  35.       cols="30"
  36.       rows="10"
  37.       minlength="3"
  38.       maxlength="500"
  39.       form="common"
  40.       placeholder="最少3个字符但不超过500字符"
  41.       onchange="alert('内容改变了')"
  42.       onselect="this.style.color='red'"
  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>

5. 表单域分组元素

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

5.1 常用属性

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

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

5.2 示例

5.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>html基础表单域分组元素</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.     <form action="" id="register"></form>
  57.     <!-- 表单域分组1 -->
  58.     <fieldset name="base" form="register">
  59.       <legend>基本信息</legend>
  60.       <section>
  61.         <input
  62.           type="email"
  63.           name="email"
  64.           placeholder="您的邮箱"
  65.           form="register"
  66.           autofocus
  67.         />
  68.         <input
  69.           type="password"
  70.           name="psw1"
  71.           placeholder="您的密码"
  72.           form="register"
  73.         />
  74.         <input
  75.           type="password"
  76.           name="psw2"
  77.           placeholder="重复密码"
  78.           form="register"
  79.         />
  80.       </section>
  81.     </fieldset>
  83.     <!-- 表单域分组2 -->
  84.     <fieldset name="other" form="register">
  85.       <legend>选填信息</legend>
  86.       <section>
  87.         <input
  88.           type="text"
  89.           name="nickname"
  90.           placeholder="您的呢称"
  91.           form="register"
  92.         />
  93.         <input type="number" name="age" min="18" max="70" step="1"
  94.         form="register" / placeholder="您的年龄"> <input type="url" name="site"
  95.         placeholder="个人站点"" form="register"/>
  96.       </section>
  97.     </fieldset>
  99.     <button
  100.       type="submit"
  101.       form="register"
  102.       formaction="register.php"
  103.       formmethod="POST"
  104.       formtarget="_blank"
  105.     >
  106.       提交
  107.     </button>
  108.   </body>
  109. </html>
上一条：表单控件学习展示下一条：HTML元素中按钮、下拉列表、文本域、表单域的属性小结
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多