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

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

news 2026/2/8 21:58:07

目录

前言

一.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提供了多种表单控件，满足不同的用户输入需求。以下是一些常用的控件及其描述：

  1. 文本输入框

    • 单行文本框：

      <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：定义文本区域的行数和列数。

  2. 选择控件

    • 复选框：

      <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>：定义列表中的选项。

  3. 文件上传

    <input type="file" name="profile_picture">
    • type="file"：允许用户选择文件上传。

  4. 按钮

    • 提交按钮：

      <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> 与表单控件关联：

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

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

  2. 将表单控件嵌套在 <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&#xff08;超文本标记语言&#xff09;是构建网页的基础&#xff0c;其中表单&#xff08;<form>&…...

编程日记 2025/2/10 14:27:22

【电机控制器】STC8H1K芯片——低功耗

【电机控制器】STC8H1K芯片——低功耗 文章目录 [TOC](文章目录) 前言一、芯片手册说明二、IDLE模式三、PD模式四、PD模式唤醒五、实验验证1.接线2.视频&#xff08;待填&#xff09; 六、参考资料总结 前言 使用工具&#xff1a; 1.STC仿真器烧录器 提示&#xff1a;以下是本…...

编程日记 2025/2/10 14:24:18

win10 llamafactory模型微调相关① || Ollama运行微调模型

目录 微调相关 1.微调结果评估 2.模型下载到本地 导出转换&#xff0c;Ollama运行 1.模型转换&#xff08;非常好的教程&#xff01;&#xff09; 2.Ollama 加载GGUF模型文件 微调相关 1.微调结果评估 【06】LLaMA-Factory微调大模型——微调模型评估_llamafactory评估-C…...

编程日记 2025/2/10 14:20:14

SMU寒假训练周报

训练情况 本周是第一周&#xff0c;训练情况不是很好&#xff0c;因为从期末周到现在一直没训练&#xff0c;不是在复习就是在忙其他的事情&#xff0c;导致状态下滑很严重&#xff0c;没有什么代码的感觉&#xff0c;而且回家之后的事情也挺多&#xff0c;社会实践的时间有时…...

编程日记 2025/2/10 14:19:13

高并发读多写少场景下的高效键查询与顺序统计的方案思路

之前在某平台看到一篇有意思的场景——对于高并发读多写少场景下&#xff0c;如何进行高效键查询与统计早于其创建时间且没有被删除的数量&#xff08;只需要先入先出&#xff0c;不需要从中间删元素&#xff09; 在高并发、读多写少的场景下&#xff0c;业务需求通常聚焦在以…...

编程日记 2025/2/10 14:18:12

Android Studio 配置 Gerrit Code Review

很多大厂&#xff08;华为、荣耀&#xff09;的大型项目都有gerrit代码审查流程&#xff0c;那么我们如何实现不手动敲命令行&#xff0c;就在Android Studio中像平常开发一样&#xff0c;只需要用鼠标点点点&#xff0c;就能将代码推送到gerrit审查仓呢&#xff0c;现在就来跟…...

编程日记 2025/2/10 14:17:09

html为＜td＞添加标注文本

样式说明&#xff1a; /*为td添加相对定位点*/ .td_text {position: relative; }/*为p添加绝对坐标(相对于父元素中的定位点)*/ .td_text p {position: absolute;top: 80%;font-size: 8px; }参考资料&#xff1a;...

编程日记 2025/2/10 14:16:07

(done) openMP学习 (Day10: Tasks 原语)

url: https://dazuozcy.github.io/posts/introdution-to-openmp-intel/#19-%E6%8A%80%E8%83%BD%E8%AE%AD%E7%BB%83%E9%93%BE%E8%A1%A8%E5%92%8Copenmp 本章节内容仅提供引入&#xff0c;关于 task 更详细的细节请看 openMP 手册或者源材料 Day9 介绍了一个优化链表遍历的粗糙方…...

编程日记 2025/2/10 14:14:03

力扣-字符串-28 找出字符串中第一个匹配项的下标

思路 kmp算法的练习&#xff0c;实际上来说在构建next数组和使用next数组都用到了前一位字符串的最长相等前后缀 代码 class Solution { public:void getNext(int *next, string s){int j 0;next[0] 0;for(int i 1; i < s.size(); i){while(j > 0 && s[j] …...

编程日记 2025/2/10 14:13:01

linux 基础知识点之工作队列workqueue

多年前就了解了workqueue着玩意&#xff0c;但理解上就并不是很很深刻&#xff0c;今天重新梳理一下&#xff0c;本文重点的是哪个些现成的demo代码&#xff0c;都是可以直接拿来用的&#xff0c;这就是写这文章的目的和作用&#xff0c;就是为了备份后续工作用到的时候&#x…...

编程日记 2025/2/10 14:09:57

C++蓝桥杯基础篇（二）

片头 嗨&#xff01;小伙伴们&#xff0c;今天我们将学习C蓝桥杯基础篇&#xff08;二&#xff09;&#xff0c;继续练习相关习题&#xff0c;准备好了吗&#xff1f;咱们开始咯~ 第1题 简单计算器输入两个数&#xff0c;以及一个运算符 &#xff0c;-&#xff0c;*&#xff…...

编程日记 2025/2/10 14:07:55

【Android—OpenCV实战】实现霍夫圆检测针对沙盘交通灯信号检测

文章目录 Android OpenCV实战&#xff1a;霍夫圆检测实现沙盘交通灯智能识别&#x1f31f; 引言&#xff1a;当计算机视觉遇见智慧交通&#x1f50d; 霍夫圆检测原理剖析&#x1f50d; 数学之美&#xff1a;参数空间转换&#x1f50d; 关键参数解析 &#x1f6e0; Android实现全…...

编程日记 2025/2/10 14:05:53

WPS如何接入DeepSeek（通过JS宏调用）

WPS如何接入DeepSeek 一、文本扩写二、校对三、翻译 本文介绍如何通过 WPS JS宏调用 DeepSeek 大模型&#xff0c;实现自动化文本扩写、校对和翻译等功能。 一、文本扩写 1、随便打开一个word文档&#xff0c;点击工具栏“工具”。 2、点击“开发工具”。 3、点击“查看代码”…...

编程日记 2025/2/10 13:58:44

图论——环检测

环检测以及拓扑排序 前言复习模版环检测-DFS版本环检测- BFS版本 前言 我觉得学习这些之前,一定要对图的数据结构和抽象模型有概念,并且图构建的代码模版应该手到擒来,不然还是挺折磨的,不是这差一点就是那差一点,写道力扣卡卡的非常烦人. 复习模版 我觉得单拿出来再说这个模…...

编程日记 2025/2/10 13:57:43

Chapter2：C#基本数据类型

参考书籍&#xff1a;《C#边做边学》&#xff1b; 2.C#基本数据类型 2.1 变量与常量 变量是程序运行过程中用于存放数据的存储单元&#xff0c;变量的值的程序运行过程中可以改变&#xff1b; 变量定义&#xff1a; 定义变量时&#xff0c;必须给每个变量起名&#xff0c;通过…...

编程日记 2025/2/10 13:56:40

kafka服务端之控制器

文章目录 概述控制器的选举与故障恢复控制器的选举故障恢复 优雅关闭分区leader的选举 概述 在Kafka集群中会有一个或多个broker&#xff0c;其中有一个broker会被选举为控制器&#xff08;Kafka Controler&#xff09;&#xff0c;它负责管理整个集群中所有分区和副本的状态。…...

编程日记 2025/2/10 13:53:38

Unity笔试常考

线程同步的几种方式 1.信号量pv操作 2.互斥加锁 3.条件变量 五层网络协议指的是哪五层 1.应用层 2.运输层 3.网络层 4.链路层 5.物理层 TCP和UDP区别 tcp 面向连接&#xff0c;保证发送顺序&#xff0c;速度慢&#xff0c;必须在线&#xff0c;三次握手&#xff0c;4次挥手…...

编程日记 2025/2/10 13:52:37

移植BOA服务器到GEC2440开发板

所需软件：boa-0.94.13.tar.tar（下载：http://www.boa.org/boa-0.94.13.tar.gz） 步骤： 设置好交叉编译工具链。 1、解压下载好的压缩包(tar xzvf boa-0.94.13.tar.tar)，并进入解压后的目录(cd boa-0.94.13)，再进行如下操作： 先进入到src目录(下面操作都是在该目录下进行…...

编程日记 2025/2/10 13:47:33

WPS如何接入DeepSeek（通过第三方工具）

WPS如何接入DeepSeek 一、下载并安装OfficeAI插件二、配置OfficeAI插件三、使用DeepSeek功能 本文介绍如何通过 WPS 的第三方工具调用 DeepSeek 大模型&#xff0c;实现自动化文本扩写、校对和翻译等功能。 一、下载并安装OfficeAI插件 1、访问OfficeAI插件下载地址&#xff…...

编程日记 2025/2/10 13:44:29

【安当产品应用案例100集】037-强化OpenVPN安全防线的卓越之选——安当ASP身份认证系统

在当前数字化时代&#xff0c;网络安全已成为企业发展的重要组成部分。对于使用OpenVPN的企业而言&#xff0c;确保远程访问的安全性尤为重要。安当ASP身份认证系统凭借其强大的功能和便捷的集成方式&#xff0c;为OpenVPN的二次登录认证提供了理想的解决方案&#xff0c;特别是…...

编程日记 2025/2/10 13:42:28

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2026/1/24 7:56:15

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

unix/linux，sudo，其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化，本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来，让我们拨开时间的迷雾，一同探寻 sudo 那波澜壮阔（也颇为实用主义）的发展历程。 历史背景：su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前，Unix 系统管理员和需要特权操作的…...

编程新知 2025/11/18 21:31:41

vue3+vite项目中使用.env文件环境变量方法

vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量&#xff0c;这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...

编程新知 2026/1/26 19:12:01

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2026/1/19 2:13:24

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

tomcat入门

1 tomcat 是什么 apache开发的web服务器可以为java web程序提供运行环境tomcat是一款高效&#xff0c;稳定&#xff0c;易于使用的web服务器tomcathttp服务器Servlet服务器 2 tomcat 目录介绍 -bin #存放tomcat的脚本 -conf #存放tomcat的配置文件 ---catalina.policy #to…...

编程新知 2025/7/7 19:44:31

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中，数据清…...

编程新知 2026/1/20 10:06:51

内窥镜检查中基于提示的息肉分割|文献速递-深度学习医疗AI最新文献

Title 题目 Prompt-based polyp segmentation during endoscopy 内窥镜检查中基于提示的息肉分割 01 文献速递介绍 以下是对这段英文内容的中文翻译&#xff1a; ### 胃肠道癌症的发病率呈上升趋势&#xff0c;且有年轻化倾向&#xff08;Bray等人&#xff0c;2018&#x…...

编程新知 2026/2/4 16:35:14