Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础知识表单与控件元素、基础按钮元素、基础下拉列表元素、多行文本域元素、表单域分组元素
Blogger Information
Blog 19
fans 0
comment 0
visits 16185
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
724 people have browsed it

表单与控件元素

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>
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