【Web前端】如何构建简单HTML表单?
HTML 表单是 Web 开发中非常重要的组成部分。它们是与用户交互的主要方式,能够收集用户输入的数据。表单的灵活性使它们成为 HTML 中最复杂的结构之一,但若使用正确的结构和元素,可以确保其可用性和无障碍性。

表单的基本结构
HTML 表单使用 <form> 元素来定义。这个元素包围了所有输入控件。以下是一个简单的表单结构:
<form action="/submit" method="POST"><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="email">邮箱:</label><input type="email" id="email" name="email" required><input type="submit" value="提交">
</form>
<form> 元素
<form> 元素是创建表单的容器,其中的基本属性包括:
-
action:指明提交表单数据的目标 URL。 -
method:指定提交数据的 HTTP 方法(GET 或 POST)。
表单中的标签 (<label>)
<label> 元素用于为表单控件提供可点击的标签,这样用户可以更方便地选择输入控件。下面是一个示例:
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
在这个示例中,<label> 的 for 属性与输入控件的 id 属性相对应。点击标签会自动聚焦到相应的输入框。
多个标签
多个标签可以同时与同一输入控件相关联。我们可以使用多个 <label> 元素去描述同一输入框,但每个标签需要有不同的 ID。
<label for="feedback1">反馈 1:</label>
<label for="feedback1">反馈 2:</label>
<input type="text" id="feedback1" name="feedback" required>
可访问性
使用 <label> 元素有助于提高表单的可用性和无障碍性。屏幕阅读器可以更好地朗读字段说明,从而使视障人士能够更好地完成表单。
表单分组 (<fieldset> 和 <legend>)
为了将表单的相关控件分组,HTML 提供了 <fieldset> 元素。你可以使用 <legend> 元素来为分组提供标题。
使用 <fieldset>
以下是一个使用 <fieldset> 和 <legend> 的示例:
<fieldset><legend>个人信息</legend><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="age">年龄:</label><input type="number" id="age" name="age" required>
</fieldset>
视觉效果
<fieldset> 的使用不仅有助于逻辑组织表单结构,还能为用户提供视觉上的引导。屏幕阅读器会读取 <legend> 标签的内容,使表单控件更加易于理解。
表单控件
常用的表单控件
- 文本框:用于单行文本输入。
- 文本域(textarea):用于多行文本输入。
- 单选框(radio):用于一组选项中的单选。
- 复选框(checkbox):用于多选项的选择。
- 下拉列表(select):用于从多个选项中选择。
接下来,我们将构建一个关于读书的问卷表单,以展示如何充分利用以上元素和控件。
<form action="/submit-survey" method="POST"><fieldset><legend>读书问卷</legend><label for="name">姓名:</label><input type="text" id="name" name="name" required><label for="email">邮箱:</label><input type="email" id="email" name="email" required><label for="favoriteBook">最喜欢的书:</label><input type="text" id="favoriteBook" name="favoriteBook" required><label>你通常多久读一本书?</label><label><input type="radio" name="readingFrequency" value="每天"> 每天</label><label><input type="radio" name="readingFrequency" value="每周"> 每周</label><label><input type="radio" name="readingFrequency" value="每月"> 每月</label><label>你喜欢的书籍类型:</label><label><input type="checkbox" name="genres" value="小说"> 小说</label><label><input type="checkbox" name="genres" value="非小说"> 非小说</label><label><input type="checkbox" name="genres" value="自助"> 自助</label><label><input type="checkbox" name="genres" value="历史"> 历史</label><label for="comments">额外评论:</label><textarea id="comments" name="comments" rows="4" cols="50"></textarea><input type="submit" value="提交"></fieldset>
</form>
姓名和邮箱:实现了基本的文本输入和电子邮件输入,均为必填项。
最喜欢的书:使用单行文本输入收集用户最爱的书名。
阅读频率:使用单选框,允许用户在每天、每周和每月之间选择。
书籍类型:使用复选框,允许用户选择他们喜欢的多种书籍类型,反映多选的意图。
额外评论:使用文本域收集用户的额外反馈。
在表单的末尾,添加了一个提交按钮,以便用户完成输入后能够发送数据。
表单验证
HTML5 提供了基本的表单验证功能,如使用 required、minlength、maxlength 和 pattern 属性。如下是一个示例:
<label for="num">数量(需满足读5本以上!):</label>
<input type="number" id="num" name="num" min="5" required>
上述示例中,表单验证会确保用户需满足读5本以上。
自定义验证消息
你还可以使用 JavaScript 来添加自定义表单验证消息。以下是 JavaScript 示例:
<script>
document.querySelector('form').addEventListener('submit', function(event) {var numInput = document.querySelector('#num');if (numInput.value < 5) {alert('需满足读5本以上!');event.preventDefault(); // 阻止表单提交}
});
</script>相关文章:
【Web前端】如何构建简单HTML表单?
HTML 表单是 Web 开发中非常重要的组成部分。它们是与用户交互的主要方式,能够收集用户输入的数据。表单的灵活性使它们成为 HTML 中最复杂的结构之一,但若使用正确的结构和元素,可以确保其可用性和无障碍性。 表单的基本结构 HTML 表单使用…...
Spring Boot 3 集成 Spring Security(3)数据管理
文章目录 准备工作新建项目引入MyBatis-Plus依赖创建表结构生成基础代码 逻辑实现application.yml配置SecurityConfig 配置自定义 UserDetailsService创建测试 启动测试 在前面的文章中我们介绍了 《Spring Boot 3 集成 Spring Security(1)认证》和 《…...
书生大模型实战营第四期-入门岛-4. maas课程任务
书生大模型实战营第四期-入门岛-4. maas课程任务 任务一、模型下载 任务内容 使用Hugging Face平台、魔搭社区平台(可选)和魔乐社区平台(可选)下载文档中提到的模型(至少需要下载config.json文件、model.safetensor…...
Spring ApplicationListener监听
【JavaWeb】Spring ApplicationListener-CSDN博客 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听、订阅的实现,内部实现原理是观察者设计模式,设计初衷也是为了系统业务逻辑之间的解耦,提高可扩展性以及可维护性。事件发布…...
K8s调度器扩展(scheduler)
1.K8S调度器 筛选插件扩展 为了熟悉 K8S调度器扩展步骤,目前只修改 筛选 插件 准备环境(到GitHub直接下载压缩包,然后解压,解压要在Linux系统下完成) 2. 编写调度器插件代码 在 Kubernetes 源代码目录下编写调度插件…...
IntelliJ IDEA 中,自动导包功能
在 IntelliJ IDEA 中,自动导包功能可以极大地提高开发效率,减少手动导入包所带来的繁琐和错误。以下是如何在 IntelliJ IDEA 中设置和使用自动导包功能的详细步骤: 一、设置自动导包 打开 IntelliJ IDEA: 启动 IntelliJ IDEA 并打…...
Spring事务笔记
目录 1.Spring 编程式事务 2.Transactional 3.事务隔离级别 4.Spring 事务传播机制 什么是事务? 事务是⼀组操作的集合, 是⼀个不可分割的操作. 事务会把所有的操作作为⼀个整体, ⼀起向数据库提交或者是撤销操作请求. 所以这组操作要么同时成 功, 要么同时失败 1.Spri…...
SQLite 管理工具 SQLiteStudio 3.4.5 发布
SQLiteStudio 3.4.5 版本现已发布,它带来了大量的 bug 修复,并增加了一些小功能。SQLiteStudio 是一个跨平台的 SQLite 数据库的管理工具。 具体更新内容包括: 现在可以使用 Collations Editor 窗口在数据库中注册 Extension-based collatio…...
QT 实现组织树状图
1.实现效果 在Qt中使用QGraphicsItem和QGraphicsScene实现树状图,你需要创建自定义的QGraphicsItem类来表示树的节点,并管理它们的位置和连接,以下是实现效果图。 2.实现思路 可以看见,上图所示,我们需要自定义连线类和节点类。 每个节点类Node,需要绘制矩形框体文字…...
go-学习
文章目录 简介标识符字符串的拼接,关键字数据类型声明变量常量算术运算符关系运算符逻辑运算符位运算赋值运算符其他运算符 简介 Go 语言的基础组成有以下几个部分: 1.包声明 2.引入包 3.函数 4.变量 5.语句 & 表达式 6.注释 package main import &q…...
【面试分享】主流编程语言的内存回收机制及其优缺点
以下是几种主流编程语言的内存回收机制及其优缺点: 一、Java 内存回收机制: Java 使用自动内存管理,主要通过垃圾回收器(Garbage Collector,GC)来回收不再被使用的对象所占用的内存。Java 的垃圾回收器会定…...
STM32-- 串口发送数据
while(USART_GetFlagStatus(USART2,USART_FLAG_TXE)RESET);?? 答: 这行代码: while(USART_GetFlagStatus(USART2, USART_FLAG_TXE) RESET);的作用是等待串口 USART2 的发送数据寄存器(TXE,Transmit Dat…...
数据结构 (13)串的应用举例
前言 数据结构中的串(String),也称为字符串,是一种常见且重要的数据结构,在计算机科学中被广泛应用于各种场景。 一、文本处理 文本编辑器:在文本编辑器中,字符串被用来表示和存储用户输入的文本…...
qt-- - 版本和下载介绍
qt版本很多,每个大版本都有几个版本是长期支持的(LTS),最好使用长期支持的。 例如qt5.15 qt6.2 qt6.8 都是LTS版本的。 qt在线安装需要提供账号,之前安装qt6.8因为账号问题试了很长时间,密码错了。 …...
解锁 Vue 项目中 TSX 配置与应用简单攻略
在 Vue 项目中配置 TSX 写法 在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验,特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤: 一、安装相关依赖 首先,我们需要在命令行中输入以下命令来安装 vitejs/plugin-v…...
ShuffleNet:一种为移动设备设计的极致高效的卷积神经网络
摘要 https://arxiv.org/pdf/1707.01083 我们介绍了一种名为ShuffleNet的计算效率极高的卷积神经网络(CNN)架构,该架构专为计算能力非常有限的移动设备(例如10-150 MFLOPs)而设计。新架构利用两种新操作:逐…...
yum源问题的解决方案
linux课堂作业 问题描述 yum 直接安装tree的问题截图 这个错误表明你的系统没有正确注册到 Red Hat Subscription Management(这个问题不用管),也没有配置有效的 YUM 软件仓库,因此无法安装或更新软件包。 解决方案(…...
在Linux中备份msyql数据库和表的详细操作
目录 前情提要 一、备份mysql数据库 原库展示 (一)新建一个数据库 (二)在linux根目录下找个位置暂时存放 (三)临时sql还原真正存放到库中 (四)查看是否备份成功 备份库成功展示 二、备份表的操作 编辑 原表emp展示 (一)快速新建一个原结构相同的表 (二)原表所…...
实时数仓Kappa架构:从入门到实战
引言 随着大数据技术的不断发展,企业对实时数据处理和分析的需求日益增长。实时数仓(Real-Time Data Warehouse, RTDW)应运而生,其中Kappa架构作为一种简化的数据处理架构,通过统一的流处理框架,解决了传统…...
【老白学 Java】Warship v2.0(四)
Warship v2.0(四) 文章来源:《Head First Java》修炼感悟。 上一篇文章中,老白仔细分析了 v2.0 的设计思路以及实现手段,如果大家有好的设计方案也可以自行尝试。 本篇文章的主要内容是对 Warship 类进行最后的修改&a…...
IPFS去中心化存储实战指南:黑马程序员音乐播放器项目开发完整教程
IPFS去中心化存储实战指南:黑马程序员音乐播放器项目开发完整教程 【免费下载链接】BlockChain 黑马程序员 120天全栈区块链开发 开源教程 项目地址: https://gitcode.com/gh_mirrors/blockchain95/BlockChain 你是否想过如何构建一个真正去中心化的音乐播放…...
CentOS 7下‘Development Tools’和‘开发工具’组有区别吗?实测告诉你答案
CentOS 7下‘Development Tools’与‘开发工具’的隐藏关联:技术细节全解析在Linux系统管理中,yum的软件包组功能一直是个既实用又充满谜团的领域。特别是当系统语言环境与软件包元数据语言不一致时,开发者们常常会遇到一个有趣的现象&#x…...
别再死记硬背了!用Multisim仿真+图解,5分钟搞懂三极管共射放大电路工作原理
用Multisim仿真图解5分钟掌握三极管共射放大电路三极管共射放大电路是电子技术中最基础也最关键的电路之一,但传统教材中复杂的公式推导和静态图解往往让初学者望而生畏。本文将带你用Multisim仿真软件,通过可视化的方式直观理解电路工作原理,…...
64_《智能体微服务架构企业级实战教程》授权与认证之授权认证集成测试
前言 配套视频教程: 在 Bilibili课堂、CSDN课程、51CTO学堂 同步发售,提供:源码+部署脚本+文档。 bilibili课堂视频教程:智能体微服务架构企业级实战教程_哔哩哔哩_bilibili CSDN课程视频教程:智能体微服务架构企业级实战教程_在线视频教程-CSDN程序员研修院 51CTO学堂…...
Redis分布式锁进阶第二十篇
一、本篇前置衔接 第二十篇我们完成了全系列终局复盘,整理了故障排查SOP与企业级落地铁律。常规单资源锁、热点分片锁、隔离锁全部讲透,但真实复杂业务永远不是单一资源:下单要扣库存、扣优惠券、扣积分、冻结余额,多资源并行争抢…...
从入门到实践:EEG公开数据集分类与应用场景全解析
1. EEG公开数据集入门指南刚接触脑电信号分析的研究者,常常会被一个问题困扰:"我应该从哪里获取可靠的EEG数据?"作为一个在这个领域摸爬滚打多年的研究者,我完全理解这种困惑。记得我第一次接触EEG研究时,光…...
【DeepSeek事件驱动架构实战指南】:20年架构师亲授5大核心陷阱与避坑清单
更多请点击: https://kaifayun.com 第一章:DeepSeek事件驱动架构全景认知 DeepSeek事件驱动架构(Event-Driven Architecture, EDA)并非单一技术组件的堆叠,而是一种以事件为第一公民、强调松耦合与异步协作的系统设计…...
【MySQL数据库 | 第一篇】 概述
数据库相关概念: 数据库(Database):数据库是指一组有组织的数据的集合,通过计算机程序进行管理和访问。数据库管理系统:操纵和管理数据库的大型软件SQL:操作关系型数据库的编程语言,定义了一套操作关系型数…...
Owl-Alpha 新手快速上手指南
在处理大规模数据或构建高性能应用时,我们常常会遇到一个棘手的问题:如何在不阻塞主线程的情况下,高效地执行耗时任务?无论是处理图像、解析大型文件,还是进行复杂的数学运算,传统的单线程模式往往会让界面…...
【云雾效果商业级交付标准】:基于Adobe Sensei图像雾度分析报告(N=1,247张MJ生成图),锁定雾浓度≤0.38的7个关键阈值参数
更多请点击: https://intelliparadigm.com 第一章:云雾效果商业级交付标准的定义与行业意义 云雾效果在现代数字体验中已超越视觉装饰范畴,成为空间感知建模、沉浸式交互与品牌情绪传达的核心媒介。商业级交付标准并非仅关注“是否可见雾气”…...
