search

博客列表 >HTML-表单与控件元素

HTML-表单与控件元素

@大城
@大城原创
2023年05月05日 16:33:01519浏览

表单与控件元素

[toc]

  • 表单分为表单元素与控件元素二部分
  • 表单元素仅一个: <form>
  • 表单控件元素,根据类型不同,有多个

1. 表单元素<form>

1.1 常用属性

序号 属性 描述
1 action 表单提交的 URL 地址(处理表单请求的脚本)
2 method 表单提交类型:GET/POST
3 enctype 设置表单提交数据的编码方式
4 name 表单唯一名称,与 ID 同义
5 target 打开请求 URL 的方式,如果_blank

1.2 请求类型method

  • web 请求方式有二种: 超链接与表单提交
  • 超链接就是使用<a>标签发起请求,其实就是GET请求
  • 表单提交默认就是GET请求,但例用最多的是POST
  • 请求类型属性action的取值
序号 允许值 描述
1 GET 默认值,表单数据以请求参数形式通过 URL 提交, 数据量最大 2K
2 POST 表单数据放在请求体中发送,数据量更大也更安全

1.3 编码方式enctype

序号 允许值 适用场景 描述
1 application/x-www-form-urlencoded 接收value值 默认值,使用 URL 编码,GET/POST 均适合
2 multipart/form-data 文件上传 采用二进制流处理,会把文件域中的内容封装到请求参数中,适合
3 text/plain 电子邮件 如action="mailto:URL

1.4 表单名称name

序号 功能 描述
1 标识表单元素 与id一样,用来唯一标识该表单元素
2 绑定表单元素 用于表单控件元素的 form 属性,用来绑定所属表单
3 访问表单元素 快捷访问内部控件元素,如form.input.value

1.5 打开方式target

序号 允许值 描述
1 _self 默认值,当前窗口打开提交的 URL
2 _blank 新窗口打开提交的 URL
3 _parent 父窗口打开提交的 URL
4 _top 顶层窗口打开提交的 URL

2. 表单控件元素<input>

2.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, 图像高度

2.2 type类型

  • 常用类型
序号 类型 描述
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"> 拾色器

2.3 常用事件属性

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

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>表单之input</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.       input[type="image"] {
  30.         justify-self: center;
  31.       }
  32.     </style>
  33.   </head>
  35.   <body>
  36.     <h3>用户注册</h3>
  37.     <form
  38.       action="handle.php"
  39.       method="post"
  40.       enctype="application/x-www-form-urlencoded"
  41.       id="register"
  42.     >
  43.       <!-- 单行文本输入框 -->
  44.       <section>
  45.         <label for="username">用户名:</label>
  46.         <!-- 必选且自动获取焦点 -->
  47.         <input
  48.           type="text"
  49.           name="username"
  50.           id="username"
  51.           maxlength="20"
  52.           placeholder="不少于6位"
  53.           required
  54.           autofocus
  55.         />
  56.       </section>
  58.       <!-- 密码输入框 -->
  59.       <section>
  60.         <label for="password">密码:</label>
  61.         <input
  62.           type="password"
  63.           name="password"
  64.           id="password"
  65.           size="10"
  66.           placeholder="不少于8位"
  67.           required
  68.         />
  69.       </section>
  71.       <!-- 单选框 -->
  72.       <section>
  73.         <label for="secret">性别:</label>
  74.         <div>
  75.           <!-- 只允许返回一个值,多个input的name属性值必须相同 -->
  76.           <input type="radio" name="gender" id="male" value="male" /><label
  77.             for="male"
  78.             >男</label
  79.           >
  80.           <input type="radio" name="gender" id="female" value="female" /><label
  81.             for="male"
  82.             >女</label
  83.           >
  84.           <!-- checked: 默认选项 -->
  85.           <input
  86.             type="radio"
  87.             name="gender"
  88.             id="secret"
  89.             value="female"
  90.             checked
  91.           /><label for="secret">保密</label>
  92.         </div>
  93.       </section>
  95.       <!-- 复选框 -->
  96.       <section>
  97.         <label for="programme">兴趣:</label>
  98.         <div>
  99.           <!-- 允许返回多个值,属性名采用数组格式,便于后端处理 -->
  100.           <input type="checkbox" name="hobby[]" id="game" checked /><label
  101.             for="game"
  102.             >游戏</label
  103.           >
  104.           <input type="checkbox" name="hobby[]" id="travel" checked /><label
  105.             for="travel"
  106.             >旅游</label
  107.           >
  108.           <input
  109.             type="checkbox"
  110.             name="hobby[]"
  111.             value="shoot"
  112.             id="shoot"
  113.           /><label for="shoot">摄影</label>
  114.           <input
  115.             type="checkbox"
  116.             name="hobby[]"
  117.             value="programme"
  118.             id="programme"
  119.             checked
  120.           /><label for="programme">编程</label>
  121.         </div>
  122.       </section>
  124.       <!-- 文件域 -->
  125.       <section>
  126.         <label for="userpic">头像:</label>
  127.         <!-- 设置<form enctype="multipart/form-data">,且为POST提交 才有效-->
  128.         <input type="file" name="user_pic" id="userpic" />
  130.         <!-- 隐藏域: 限制上传文件大小不超过8M -->
  131.         <input type="hidden" name="MAX_FILE_SIZE" value="8388608" />
  132.       </section>
  134.       <!-- 预定义复合框 -->
  135.       <section>
  136.         <label for="course">课程:</label>
  137.         <input type="text" name="course" list="course" />
  138.         <datalist id="course">
  139.           <!-- 此<option>使用单标签,与<select>中不同 -->
  140.           <option value="HTML/CSS开发与实战"> </option>
  141.           <option value="JavaScript基础与实战"> </option>
  142.           <option value="PHP开发基础"> </option>
  143.           <option value="Laravel基础与实战"> </option>
  144.         </datalist>
  145.       </section>
  147.       <!-- 图像域: 提交按钮为图像 -->
  148.       <!-- 返回点击图片的x/坐标,推荐加上name属性,返回有语义坐标 -->
  149.       <!-- 测试提交,启动一个本地Web服务器: php -S localhost:8888 -->
  150.       <input
  151.         type="image"
  152.         src="btn.png"
  153.         alt="submit"
  154.         name="submit"
  155.         width="100"
  156.       />
  157.     </form>
  159.     <hr />
  161.     <!-- 表单控件元素不一定必须写到<form>标签内 -->
  162.     <!-- 表单控件使用form属性,将它与所属表单绑定 -->
  163.     <section>
  164.       <label for="email">邮箱:</label>
  165.       <input type="email" name="email" id="email" form="register" />
  166.     </section>
  168.     <section>
  169.       <label for="age">年龄:</label>
  170.       <input
  171.         type="number"
  172.         name="age"
  173.         id="age"
  174.         form="register"
  175.         min="18"
  176.         max="60"
  177.         step="2"
  178.         value="22"
  179.       />
  180.     </section>
  181.   </body>
  182. </html>

3. 控件标签元素<label>

  • <label>元素没有name和value属性,不会创建请求参数
  • 它存在的意义就是关联控件,当点击它时将焦点自动落在关联控件内部
  • 语法: <label for="关联控件的id属性值">(也支持三大通用属性)
  • <label>有二种方式与控件元素进行关联/绑定
序号 关联方式 示例代码
1 显式关联 <label for="email">Email:</label><input type="email" id="email">
1 隐式关联 <label>Email:</label><input type="email"></label>

推荐使用显式关联, 案例参考<input>示例

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=""
  15.         id=""
  16.         size="8"
  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"> </option
  32.           ><option value="mysql" label="MySQL"> </option
  33.           ><option value="javascript" label="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 示例

效果图

```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'" >

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

相关文章

查看更多