当前位置：首页 > article >正文

表单与交互：HTML表单标签全面解析

article 2026/4/28 18:59:38

前言

一.HTML表单的基本结构

基本结构

示例

二.常用表单控件

文本输入框

选择控件

文件上传

按钮

综合案例

三.标签的作用

四.注意事项

前言

HTML（超文本标记语言）是构建网页的基础，其中表单（<form>）元素用于收集用户输入的数据。在表单中，<label>标签与表单控件密切配合，提升用户体验和可访问性。本文将详细讲解HTML表单的基本结构、常用控件、<label>标签的作用及相关注意事项。

一.HTML表单的基本结构

表单通过<form>标签定义，包含用户可交互的控件，如文本框、按钮、复选框等。表单的主要作用是收集用户输入，并将数据发送到服务器进行处理。

基本结构

<form action="提交目标URL" method="提交方法"><!-- 表单控件 -->
</form>

action：指定表单数据提交的目标URL，即服务器端处理程序的地址。
method：定义数据提交方式，常用的有：
- GET：将表单数据附加在URL之后，适用于获取数据，数据量有限制。
- POST：在HTTP请求体中发送表单数据，适用于提交敏感信息或大量数据。

示例

<form action="/submit" method="post"><!-- 表单控件 -->
</form>

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>表单基本结构</title>
</head>
<body><form action="https://www.baidu.com/s" target="_blank" method="get"><input type="text" name="wd"></input><button>去百度搜索</button></form><form action="https://search.jd.com/Search" target="_self" method="get"><input type="text" name="keyword"></input><button>去京东搜索</button></form><hr><a href="https://www.baidu.com/s?wd=你好">百度搜索你好</a>
</body>
</html>

二.常用表单控件

HTML提供了多种表单控件，满足不同的用户输入需求。以下是一些常用的控件及其描述：

文本输入框
- 单行文本框：
```
<input type="text" name="username" placeholder="请输入用户名">
```
  - type="text"：定义单行文本输入。
  - name：控件名称，用于表单数据提交时标识。
  - placeholder：提供占位提示文本。
- 密码框：
```
<input type="password" name="password" placeholder="请输入密码">
```
  - type="password"：输入内容以掩码形式显示，适用于密码输入。
- 多行文本框：
```
<textarea name="message" rows="4" cols="50" placeholder="请输入留言"></textarea>
```
  - <textarea>：用于多行文本输入。
  - rows 和 cols：定义文本区域的行数和列数。

选择控件

复选框：
```
<input type="checkbox" name="subscribe" value="newsletter"> 订阅新闻
```
- type="checkbox"：允许用户进行多选。
- value：提交时的值。
单选按钮：
```
<input type="radio" name="gender" value="male"> 男
<input type="radio" name="gender" value="female"> 女
```
- type="radio"：在一组选项中仅允许选择一个。
- name：相同的name属性将这些按钮分组。

下拉列表：

<select name="country"><option value="china">中国</option><option value="usa">美国</option><option value="uk">英国</option>
</select>

<select>：创建下拉列表。
<option>：定义列表中的选项。

文件上传
```
<input type="file" name="profile_picture">
```
- type="file"：允许用户选择文件上传。
按钮
- 提交按钮：
```
<input type="submit" value="提交">
```
  - type="submit"：点击后提交表单。
- 重置按钮：
```
<input type="reset" value="重置">
```
  - type="reset"：点击后重置表单内容。
- 普通按钮：
```
<button type="button" onclick="alert('按钮被点击')">点击我</button>
```
  - <button>：可包含文本或HTML元素的按钮。
  - type="button"：定义为普通按钮，不会提交表单。

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单控件</title>
</head>
<body><form action="https://search.jd.com/Search">账户:<input type="text" name="account" value="hulin" maxlength="10" placeholder="请输入用户名"><br><!--value默认值-->密码:<input type="password" name="password" placeholder="请输入密码"></input><br>性别:<!--单选--><input type="radio" name="gender" value="男" checked>男<!--chexk默认选中--><input type="radio" name="gender" value="女">女<br><!--多选-->爱好:<input type="checkbox" name="hobby" value="打篮球" checked>打篮球</input><input type="checkbox" name="hobby" value="打游戏">打游戏</input><input type="checkbox" name="hobby" value="看电影">看电影</input><br>其他:<textarea name="other" cols="30" rows="10"></textarea><br><!--下拉框-->籍贯:<select name="address"><option value="北京">北京</option><option value="上海" selected>上海</option><!--默认选择--><option value="广东">广东</option><option value="深圳">深圳</option></select><!----><!--隐藏域--><br><input type="hidden" name="type" value="1"></input><!--确认按钮--><!--<button>确认</button>  默认按钮类型是submit--><br><button type="submit" values="确认">确认</button><button type="reset">重置</button><!--重置按钮--><!--<input type="reset" value="重置"></input> --><!--普通按钮--><input type="button" value="普通按钮"></input></form>
</body>
</html>

三.`<label>`标签的作用

<label> 标签用于为表单控件定义标签，提升用户体验和可访问性。通过点击 <label>，用户可以聚焦到对应的表单控件。

有两种方式将 <label> 与表单控件关联：

使用 for 属性：<label> 的 for 属性值应与对应表单控件的 id 属性值相同。

<label for="email">电子邮件：</label>
<input type="email" id="email" name="email">

将表单控件嵌套在 <label> 内部：此时无需使用 for 和 id 属性。
```
<label>电子邮件：<input type="email" name="email"></label>
```

需要注意的是，避免在 <label> 内嵌套可交互的元素，如链接或按钮，以免影响用户体验。

综合案例，fieldset和legend将单独写一篇进行补充。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单控件</title>
</head>
<body><form action="https://search.jd.com/Search"><fieldset><legend>基本信息</legend><label for="zhanghu">账户:</label>  <!--for与id关联，点击label标签，会自动聚焦到id对应的input标签上--><input id="zhanghu" type="text" name="account" value="hulin" maxlength="10"><br><label>密码:<input type="password" name="password" ></input></label></fieldset><br><fieldset><legend>附加信息</legend>性别:<!--单选--><label><input type="radio" name="gender" value="男" >男</input></label><input type="radio" name="gender" value="女"  id="nv"></input><label for="nv">女</label><br><!--多选-->爱好:<label><input type="checkbox" name="hobby" value="打篮球" checked>打篮球</input></label><label><input type="checkbox" name="hobby" value="打游戏">打游戏</input></label><label><input type="checkbox" name="hobby" value="看电影">看电影</input></label></fieldset><br>其他:<textarea name="other" cols="30" rows="10"></textarea><br><!--下拉框-->籍贯:<select name="address"><option value="北京">北京</option><option value="上海" selected>上海</option><!--默认选择--><option value="广东">广东</option><option value="深圳">深圳</option></select><!----><!--隐藏域--><br><input type="hidden" name="type" value="1"></input><!--确认按钮--><!--<button>确认</button>  默认按钮类型是submit--><br><button type="submit">确认</button><button type="reset">重置</button><!--重置按钮--><!--<input type="reset" value="重置"></input> --><!--普通按钮--><input type="button" value="普通按钮"></input></form>
</body>
</html>

四.注意事项

表单验证：确保在客户端和服务器端对用户输入进行验证，保证数据的完整性和安全性。
可访问性：为每个表单控件提供对应的 <label>，以提升对使用辅助技术的用户的友好度。
布局与样式：使用 CSS 对表单进行美化，确保在不同设备上的一致性和响应性。
安全性：防止跨站脚本（XSS）和跨站请求伪造（CSRF）等安全漏洞，确保表单提交的安全性。

表单与交互：HTML表单标签全面解析

目录前言一.HTML表单的基本结构基本结构示例二.常用表单控件文本输入框选择控件文件上传按钮综合案例三.标签的作用四.注意事项前言 HTML（超文本标记语言）是构建网页的基础，其中表单（<form>&…...

编程日记 2026/4/23 12:28:59

非递减子序列(力扣491)

这道题的难点依旧是去重，但是与之前做过的子集类问题的区别就是，这里是求子序列，意味着我们不能先给数组中的元素排序。因为子序列中的元素的相对位置跟原数组中的相对位置是一样的，如果我们改变数组中元素的顺序，子序…...

编程日记 2025/11/21 5:17:35

Python基础-元组tuple的学习

在 Python 中，元组（tuple）是一种不可变的序列类型，允许存储不同类型的元素。元组非常类似于列表（list），但与列表不同的是，元组一旦创建，就不能修改其内容。 1 元组的创建…...

编程日记 2026/4/9 10:40:14

Vue与Konva：解锁Canvas绘图的无限可能

前言在现代Web开发中，动态、交互式的图形界面已成为提升用户体验的关键要素。Vue.js，作为一款轻量级且高效的前端框架，凭借其响应式数据绑定和组件化开发模式，赢得了众多开发者的青睐。而当Vue.js邂逅Konva.js，两者结…...

编程日记 2026/4/9 18:39:45

如何修改DNS解析?

DNS(域名系统)就像互联网的“电话簿”，负责将我们输入的网址转换为计算机能够理解的IP地址。如果DNS解析出现问题，访问网站就会受到影响。那我们该如何修改DNS解析呢?接下来，我们就来介绍一下这个话题。为什么要修改DNS解析? 使用默认的…...

编程日记 2025/9/20 21:56:06

go语言文件和目录

打开和关闭文件 os.Open()函数能够打开一个文件，返回一个*File 和一个 err。操作完成文件对象以后一定要记得关闭文件。 package mainimport ("fmt""os" )func main() {// 只读方式打开当前目录下的 main.go 文件file, err : os.Open(".…...

编程日记 2026/4/21 13:43:06

Solidity09 Solidity构造函数和修饰器

文章目录一、构造函数二、修饰器三、OpenZeppelin的Ownable标准实现四、Remix 演示示例五、代码示例这一讲，我们将用合约权限控制（ Ownable）的例子介绍 Solidity语言中构造函数（ constructor）和独有的修饰器&…...

编程日记 2026/4/9 20:14:53

ES6 Map 数据结构是用总结

1. Map 基本概念 Map 是 ES6 提供的新的数据结构，它类似于对象，但是"键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也可以跟踪键值对的原始插入顺序。 1.1 基本用法 // 创建一个空Map…...

编程日记 2026/3/20 4:32:06

使用wpa_supplicant和wpa_cli 扫描wifi热点及配网

一：简要说明交叉编译wpa_supplicant工具后会有wpa_supplicant和wpa_cli两个程序生产，如果知道需要连接的wifi热点及密码的话不需要遍历及查询所有wifi热点的名字及信号强度等信息的话，使用wpa_supplicant即可，否则还需要使用wpa_…...

编程日记 2026/4/21 15:39:46

json转excel，在excel内导入json， json-to-excel插件

简介 JSON 转 Excel 是一款 Microsoft Excel 插件，可将 JSON 数据转换为 Excel 表格。要求此插件适用于以下环境：Excel 2013 Service Pack 1 或更高版本、Excel 2016 for Mac、Excel 2016 或更高版本、Excel Online。快速开始本快速开始指南适用…...

编程日记 2025/12/3 14:53:45

大模型应用与实战：专栏概要与内容目录

文章目录大模型应用与实战📚 核心内容模块一、大模型推理与部署1.1 推理框架应用实践1.2 框架源码深度解析1.3 高并发部署优化1.4 国产化平台适配二、Agent框架专题2.1 Langchain系列2.2 Qwen-Agent系列2.3 Dify应用实践2.4 框架对比与迁移三、微调技术研究3.1 微…...

编程日记 2026/4/24 9:17:33

ZooKeeper 的典型应用场景：从概念到实践

引言在分布式系统的生态中，ZooKeeper 作为一个协调服务框架，扮演着至关重要的角色。它的设计目的是提供一个简单高效的解决方案来处理分布式系统中常见的协调问题。本文将详细探讨 ZooKeeper 的典型应用场景，包括但不限于配置管理、命名服务…...

编程日记 2026/2/25 10:33:31

Arbess基础教程-创建流水线

Arbess(谐音阿尔卑斯) 是一款开源免费的 CI/CD 工具，本文将介绍如何使用 Arbess 配置你的第一条流水线，以快速入门上手。 1. 创建流水线根据不同需求来创建不同的流水线。 1.1 配置基本信息配置流水线的基本信息，如分组，环境&…...

编程日记 2026/4/26 11:57:57

科普书《从一到无穷大》的科普知识推翻百年集论

科普书《从一到无穷大》的科普知识推翻百年集论黄小宁 “我们给两组无穷大数列中的各个数一一配对，如果最后这两组都一个不剩，这两组无穷大就是相等的；如果有一组还有些数没有配出去，这一组就比另一组大些，或者说强些…...

编程日记 2026/4/10 8:40:21

【键盘识别】实例分割

第一步键盘检测方案一 canny边缘检测 canny边缘检测检测结果不稳定，容易因为复杂背景或光线变换检测出其他目标。如图是用canny边缘检测方法标出的检测出的边缘的四个红点。参考的是这篇文章OpenCV实战之三 | 基于OpenCV实现图像校正_opencv 图像校正-CSDN博客方案二…...

编程日记 2026/4/10 16:29:34

25/2/7 ＜机器人基础＞雅可比矩阵计算雅可比伪逆

雅可比矩阵计算雅可比矩阵的定义假设我们有一个简单的两个关节的平面机器人臂，其末端执行器的位置可以表示为： 其中： L1 和 L2 是机器人臂的长度。θ1 和 θ2是关节的角度。计算雅可比矩阵雅可比矩阵 JJ 的定义是将关节速度与末…...

编程日记 2026/4/23 1:24:29

apisix的real-ip插件使用说明

k8s集群入口一般都需要过负载均衡，然后再到apisix。这时候如果后台业务需要获取客户端ip，可能拿到的是lb或者网关的内网ip。这里一般要获取真实ip需要做几个处理。 1. 负载均衡上，一般支持配置获取真实ip参数，需要配置上。然…...

编程日记 2026/4/8 6:38:32

位图的深入解析：从数据结构到图像处理与C++实现

在学习优选算法课程的时候，博主学习位运算了解到位运算的这个概念，之前没有接触过，就查找了相关的资料，丰富一下自身，当作课外知识来了解一下。位图（Bitmap）是一种用于表示图像的数据结构&…...

编程日记 2026/2/17 23:01:12

Python实现GO鹅优化算法优化支持向量机SVM分类模型项目实战

说明：这是一个机器学习实战项目（附带数据代码文档视频讲解），如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景随着信息技术的迅猛发展，数据量呈爆炸式增长，如何从海量的数据中提取有价值…...

编程日记 2026/4/21 11:40:42

Deno vs Node.js：性能对比深度解析

1. 引言 Deno 和 Node.js 都是基于 V8 引擎的 JavaScript 运行时环境，然而它们在架构、模块管理、安全性和性能方面存在显著差异。Deno 由 Node.js 的原始作者 Ryan Dahl 开发，旨在解决 Node.js 设计上的一些问题，比如包管理、安全模型和 Ty…...

编程日记 2026/1/22 15:36:45

我用AI做数据分析之数据清洗

我用AI做数据分析之数据清洗 AI与数据分析的融合效果怎样？ 这里描述自己在使用AI进行数据分析（数据清洗）过程中的几个小故事： 1. 变量名的翻译有一个项目是某医生自己收集的数据，变量名使用的是中文，分…...

编程日记 2026/4/11 8:37:46

备战蓝桥杯：双指针（滑动窗口）算法之逛花展

P1638 逛画展 - 洛谷 | 计算机科学教育新生态这道题我们只要用一个kind和一个mp[N]的数组就能解决了我们的解法1就是暴力枚举，先固定2，从2开始找连续的满足所有种类的最短的子数组，然后固定5，3，1，3&…...

编程日记 2026/3/25 6:03:53

【sqlite】python操作sqlite3（含测试）

个人小项目或者小团队，sqllite很适用，数据库封装操作如下 #!/usr/bin/env python # -*- coding: utf-8 -*- # Time : 2025-02-08 13:57 # Author : duxiaowei # File : connect_sqllite.py # Software: PyCharm """ sqllite操作, …...

编程日记 2026/3/22 8:21:39

mybatis 是否支持延迟加载？延迟加载的原理是什么？

1. MyBatis 是否支持延迟加载？ 是的，MyBatis 支持延迟加载。延迟加载的主要功能是推迟数据加载的时机，直到真正需要时再去加载。这种方式能提高性能，尤其是在处理关系型数据时，可以避免不必要的数据库查询。具体来说…...

编程日记 2026/4/1 15:59:52

collabora online+nextcloud+mariadb在线文档协助

1、环境龙蜥os 8.9 docker 2、安装docker dnf -y install dnf-plugins-core dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sed -i shttps://download.docker.comhttps://mirrors.tuna.tsinghua.edu.cn/docker-ce /etc/yum.repos.…...

编程日记 2026/4/13 4:37:18

深度学习中的Checkpoint是什么？

诸神缄默不语-个人CSDN博文目录文章目录引言1. 什么是Checkpoint？2. 为什么需要Checkpoint？3. 如何使用Checkpoint？3.1 TensorFlow 中的 Checkpoint3.2 PyTorch 中的 Checkpoint3.3 transformers中的Checkpoint 4. 在 NLP 任务中的应用5. 总…...

编程日记 2026/4/13 9:00:09

字符串高频算法：无重复字符的最长子串

题目 3. 无重复字符的最长子串 - 力扣（LeetCode） 解题思路思路方法: 滑动窗口 [!简单思路] [^1]以示例一中的字符串 abcabcbb 为例，找出从每一个字符开始的，不包含重复字符的最长子串，其中最长的那个字符串即为答…...

编程日记 2026/2/15 3:43:47

用深度学习模型构建海洋动物图像分类保姆教程

使用深度学习模型构建深度学习海洋动物图像分类模型的完整步骤如下，分为关键阶段和详细操作说明： 1. 数据准备与预处理 1.1 数据集组织按类别分文件夹存储图像，例如：dataset/train/class1/class2/...val/class1/class2/...test…...

编程日记 2026/4/7 19:39:28

51单片机俄罗斯方块计分函数

/************************************************************************************************************** * 名称：scoring * 功能：计分 * 参数：NULL * 返回：NULL * 备注：采用非阻塞延时 ****************…...

编程日记 2026/1/11 0:28:55

Android开发获取缓存，删除缓存

Android开发获取缓存，删除缓存 app设置中往往有清理缓存的功能。会显示当前缓存时多少，然后可以点击清理缓存直接上代码： object CacheHelper {/*** 获取缓存大小* param context* return* throws Exception*/JvmStaticfun getTotalCache…...

编程日记 2025/11/26 16:59:22

前言

一.HTML表单的基本结构

基本结构

示例

二.常用表单控件

文本输入框

选择控件

文件上传

按钮

综合案例

三.<label>标签的作用

四.注意事项

相关文章：

三.`<label>`标签的作用