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

【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 开发中非常重要的组成部分。它们是与用户交互的主要方式&#xff0c;能够收集用户输入的数据。表单的灵活性使它们成为 HTML 中最复杂的结构之一&#xff0c;但若使用正确的结构和元素&#xff0c;可以确保其可用性和无障碍性。 表单的基本结构 HTML 表单使用…...

Spring Boot 3 集成 Spring Security(3)数据管理

文章目录 准备工作新建项目引入MyBatis-Plus依赖创建表结构生成基础代码 逻辑实现application.yml配置SecurityConfig 配置自定义 UserDetailsService创建测试 启动测试 在前面的文章中我们介绍了 《Spring Boot 3 集成 Spring Security&#xff08;1&#xff09;认证》和 《…...

书生大模型实战营第四期-入门岛-4. maas课程任务

书生大模型实战营第四期-入门岛-4. maas课程任务 任务一、模型下载 任务内容 使用Hugging Face平台、魔搭社区平台&#xff08;可选&#xff09;和魔乐社区平台&#xff08;可选&#xff09;下载文档中提到的模型&#xff08;至少需要下载config.json文件、model.safetensor…...

Spring ApplicationListener监听

【JavaWeb】Spring ApplicationListener-CSDN博客 ApplicationEvent以及Listener是Spring为我们提供的一个事件监听、订阅的实现&#xff0c;内部实现原理是观察者设计模式&#xff0c;设计初衷也是为了系统业务逻辑之间的解耦&#xff0c;提高可扩展性以及可维护性。事件发布…...

K8s调度器扩展(scheduler)

1.K8S调度器 筛选插件扩展 为了熟悉 K8S调度器扩展步骤&#xff0c;目前只修改 筛选 插件 准备环境&#xff08;到GitHub直接下载压缩包&#xff0c;然后解压&#xff0c;解压要在Linux系统下完成&#xff09; 2. 编写调度器插件代码 在 Kubernetes 源代码目录下编写调度插件…...

IntelliJ IDEA 中,自动导包功能

在 IntelliJ IDEA 中&#xff0c;自动导包功能可以极大地提高开发效率&#xff0c;减少手动导入包所带来的繁琐和错误。以下是如何在 IntelliJ IDEA 中设置和使用自动导包功能的详细步骤&#xff1a; 一、设置自动导包 打开 IntelliJ IDEA&#xff1a; 启动 IntelliJ IDEA 并打…...

Spring事务笔记

目录 1.Spring 编程式事务 2.Transactional 3.事务隔离级别 4.Spring 事务传播机制 什么是事务? 事务是⼀组操作的集合, 是⼀个不可分割的操作. 事务会把所有的操作作为⼀个整体, ⼀起向数据库提交或者是撤销操作请求. 所以这组操作要么同时成 功, 要么同时失败 1.Spri…...

SQLite 管理工具 SQLiteStudio 3.4.5 发布

SQLiteStudio 3.4.5 版本现已发布&#xff0c;它带来了大量的 bug 修复&#xff0c;并增加了一些小功能。SQLiteStudio 是一个跨平台的 SQLite 数据库的管理工具。 具体更新内容包括&#xff1a; 现在可以使用 Collations Editor 窗口在数据库中注册 Extension-based collatio…...

QT 实现组织树状图

1.实现效果 在Qt中使用QGraphicsItem和QGraphicsScene实现树状图,你需要创建自定义的QGraphicsItem类来表示树的节点,并管理它们的位置和连接,以下是实现效果图。 2.实现思路 可以看见,上图所示,我们需要自定义连线类和节点类。 每个节点类Node,需要绘制矩形框体文字…...

go-学习

文章目录 简介标识符字符串的拼接&#xff0c;关键字数据类型声明变量常量算术运算符关系运算符逻辑运算符位运算赋值运算符其他运算符 简介 Go 语言的基础组成有以下几个部分&#xff1a; 1.包声明 2.引入包 3.函数 4.变量 5.语句 & 表达式 6.注释 package main import &q…...

【面试分享】主流编程语言的内存回收机制及其优缺点

以下是几种主流编程语言的内存回收机制及其优缺点&#xff1a; 一、Java 内存回收机制&#xff1a; Java 使用自动内存管理&#xff0c;主要通过垃圾回收器&#xff08;Garbage Collector&#xff0c;GC&#xff09;来回收不再被使用的对象所占用的内存。Java 的垃圾回收器会定…...

STM32-- 串口发送数据

while(USART_GetFlagStatus(USART2,USART_FLAG_TXE)RESET);&#xff1f;&#xff1f; 答&#xff1a; 这行代码&#xff1a; while(USART_GetFlagStatus(USART2, USART_FLAG_TXE) RESET);的作用是等待串口 USART2 的发送数据寄存器&#xff08;TXE&#xff0c;Transmit Dat…...

数据结构 (13)串的应用举例

前言 数据结构中的串&#xff08;String&#xff09;&#xff0c;也称为字符串&#xff0c;是一种常见且重要的数据结构&#xff0c;在计算机科学中被广泛应用于各种场景。 一、文本处理 文本编辑器&#xff1a;在文本编辑器中&#xff0c;字符串被用来表示和存储用户输入的文本…...

qt-- - 版本和下载介绍

qt版本很多&#xff0c;每个大版本都有几个版本是长期支持的&#xff08;LTS&#xff09;&#xff0c;最好使用长期支持的。 例如qt5.15 qt6.2 qt6.8 都是LTS版本的。 qt在线安装需要提供账号&#xff0c;之前安装qt6.8因为账号问题试了很长时间&#xff0c;密码错了。 …...

解锁 Vue 项目中 TSX 配置与应用简单攻略

在 Vue 项目中配置 TSX 写法 在 Vue 项目中使用 TSX 可以为我们带来更灵活、高效的开发体验&#xff0c;特别是在处理复杂组件逻辑和动态渲染时。以下是详细的配置步骤&#xff1a; 一、安装相关依赖 首先&#xff0c;我们需要在命令行中输入以下命令来安装 vitejs/plugin-v…...

ShuffleNet:一种为移动设备设计的极致高效的卷积神经网络

摘要 https://arxiv.org/pdf/1707.01083 我们介绍了一种名为ShuffleNet的计算效率极高的卷积神经网络&#xff08;CNN&#xff09;架构&#xff0c;该架构专为计算能力非常有限的移动设备&#xff08;例如10-150 MFLOPs&#xff09;而设计。新架构利用两种新操作&#xff1a;逐…...

yum源问题的解决方案

linux课堂作业 问题描述 yum 直接安装tree的问题截图 这个错误表明你的系统没有正确注册到 Red Hat Subscription Management&#xff08;这个问题不用管&#xff09;&#xff0c;也没有配置有效的 YUM 软件仓库&#xff0c;因此无法安装或更新软件包。 解决方案&#xff08…...

在Linux中备份msyql数据库和表的详细操作

目录 前情提要 一、备份mysql数据库 原库展示 (一)新建一个数据库 (二)在linux根目录下找个位置暂时存放 (三)临时sql还原真正存放到库中 (四)查看是否备份成功 备份库成功展示 二、备份表的操作 ​编辑 原表emp展示 (一)快速新建一个原结构相同的表 (二)原表所…...

实时数仓Kappa架构:从入门到实战

引言 随着大数据技术的不断发展&#xff0c;企业对实时数据处理和分析的需求日益增长。实时数仓&#xff08;Real-Time Data Warehouse, RTDW&#xff09;应运而生&#xff0c;其中Kappa架构作为一种简化的数据处理架构&#xff0c;通过统一的流处理框架&#xff0c;解决了传统…...

【老白学 Java】Warship v2.0(四)

Warship v2.0&#xff08;四&#xff09; 文章来源&#xff1a;《Head First Java》修炼感悟。 上一篇文章中&#xff0c;老白仔细分析了 v2.0 的设计思路以及实现手段&#xff0c;如果大家有好的设计方案也可以自行尝试。 本篇文章的主要内容是对 Warship 类进行最后的修改&a…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

【决胜公务员考试】求职OMG——见面课测验1

2025最新版&#xff01;&#xff01;&#xff01;6.8截至答题&#xff0c;大家注意呀&#xff01; 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:&#xff08; B &#xff09; A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

FFmpeg:Windows系统小白安装及其使用

一、安装 1.访问官网 Download FFmpeg 2.点击版本目录 3.选择版本点击安装 注意这里选择的是【release buids】&#xff0c;注意左上角标题 例如我安装在目录 F:\FFmpeg 4.解压 5.添加环境变量 把你解压后的bin目录&#xff08;即exe所在文件夹&#xff09;加入系统变量…...

LCTF液晶可调谐滤波器在多光谱相机捕捉无人机目标检测中的作用

中达瑞和自2005年成立以来&#xff0c;一直在光谱成像领域深度钻研和发展&#xff0c;始终致力于研发高性能、高可靠性的光谱成像相机&#xff0c;为科研院校提供更优的产品和服务。在《低空背景下无人机目标的光谱特征研究及目标检测应用》这篇论文中提到中达瑞和 LCTF 作为多…...