WEB前端表单及表格标签综合案例
表单标签综合案例:
源代码:
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>音乐节报名表单</title><style>/* 全局样式 */
body {font-family: Arial, sans-serif;max-width: 600px;margin: 0 auto;padding: 20px;color: #333;
}h1 {text-align: center;color: black;
}p {text-align: center;color: dimgray;margin-bottom: 25px;
}/* 表单样式 */
.fo {background-color: #f9f9f9;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}.form-group {margin-bottom: 15px;
}label {display: block;font-weight: bold;margin-bottom: 5px;
}input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="range"],
select,
textarea {width: 100%;padding: 8px;border: 1px solid #ccc;border-radius: 4px;box-sizing: border-box;
}input[type="color"] {height: 35px;width: 50px;padding: 2px;cursor: pointer;
}input[type="radio"],
input[type="checkbox"] {margin-right: 5px;
}textarea {resize: vertical;
}/* 按钮样式 */
.form-actions {display: flex;justify-content: flex-start;gap: 10px;margin-top: 20px;
}input[type="submit"] {background-color: #4CAF50;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}input[type="reset"] {background-color: #f44336;color: white;padding: 10px 20px;border: none;border-radius: 4px;cursor: pointer;
}input[type="submit"]:hover,
input[type="reset"]:hover {opacity: 0.9;
} </style>
</head>
<body><h1>【音乐节名称】报名名单</h1><p>欢迎参加我们盛大的音乐节,请仔细填写一下表格</p><form class="fo"><div class="form-group"><label for="username">姓名:</label><input type="text" id="username" name="用户姓名" placeholder="请输入姓名" required></div><div class="form-group"><label for="password">登录密码:</label><input type="password" id="password" name="登录密码" placeholder="请输入密码,以便后续信息查询" required></div><div class="form-group"><label for="email">邮箱:</label><input type="email" id="email" name="邮箱" placeholder="请输入邮箱,以便接受音乐节相关通知" required></div><div class="form-group"><label for="number">电话:</label><input type="tel" id="number" name="电话" placeholder="请输入电话,以便接受音乐节相关通知" required></div><div class="form-group"><label for="age">年龄:</label><input type="number" id="age" name="age" min="1" max="120" placeholder="请输入您的年龄" required></div><div class="form-group"><label for="date">生日:</label><input type="date" id="date" name="生日" placeholder="年/月/日" required></div><div class="form-group"><label for="arrivalTime">预计到达时间:</label><input type="time" id="arrivalTime" name="arrivalTime"></div><div class="form-group"><label for="stayPeriod">音乐节停留日期时间:</label><input type="datetime-local" id="stayPeriod" name="stayPeriod"></div><div class="form-group"><label for="preferredMonth">您希望未来举办音乐节的月份:</label><input type="month" id="preferredMonth" name="preferredMonth"></div><div class="form-group"><label for="preferredWeek">您希望未来举办音乐节的周次:</label><input type="week" id="preferredWeek" name="preferredWeek"></div><div class="form-group"><label for="satisfaction">您对本次音乐节宣传的满意度:</label><input type="range" id="satisfaction" name="satisfaction" min="0" max="100" value="50"></div><div class="form-group"><label for="favoriteColor">您希望音乐节主色调:</label><input type="color" id="favoriteColor" name="favoriteColor"></div><div class="form-group"><label for="profilePic">上传您的靓照(用于音乐节留念墙):</label><input type="file" id="profilePic" name="profilePic"></div><div class="form-group"><p>性别:</p><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label></div><div class="form-group"><p>您喜欢的音乐类型(可多选):</p><input type="checkbox" id="rock" name="musicTypes" value="rock"><label for="rock">摇滚</label><input type="checkbox" id="pop" name="musicTypes" value="pop"><label for="pop">流行</label><input type="checkbox" id="jazz" name="musicTypes" value="jazz"><label for="jazz">爵士</label><input type="checkbox" id="electronic" name="musicTypes" value="electronic"><label for="electronic">电子</label></div><div class="form-group"><label for="travelMethod">您来参加音乐节的交通方式:</label><select id="travelMethod" name="travelMethod"><option value="bus">巴士</option><option value="car">自驾</option><option value="train">火车</option><option value="plane">飞机</option></select></div><div class="form-group"><label for="comments">留言(如特殊需求、建议等):</label><textarea id="comments" name="comments" rows="4" cols="50" placeholder="请留下您的宝贵意见"></textarea></div><div class="form-actions"><input type="submit" value="提交报名信息"><input type="reset" value="重置表单"></div></form>
</body>
</html>
页面截图:
表格标签综合案例:
源代码:
<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表格标签</title><style>/* 全局样式 */
body {font-family: Arial, Helvetica, sans-serif;padding: 20px;color: #333;
}h1 {text-align: center;color: #789;
}h2 {color: burlywood;border-bottom: 1px solid #789;padding-bottom: 5px;
}p {color: gray;
}ul {list-style-type: disc;
}ol {color: goldenrod;
}li {font-weight: bold;
}table {width: 100%;border-collapse: collapse;
}th,
td {padding: 10px;border: 1px solid #ccc;
}thead {background-color: #f2f2f2;
}td[color="yellow"] {color: yellow;
}</style>
</head>
<body><h1>热门数码产品评测汇总</h1><p>在当今数字化时代,数码产品层出不穷。为了帮助大家更好地挑选适合自己的数码产品,以下是近期热门数码产品的详细评测。</p><h2>一、手机类</h2><p>手机已经成为我们生活中不可或缺的一部分,下面为您介绍几款热门手机。</p><ul><li>苹果 iPhone 16:作为苹果公司的最新款手机,它延续了一贯的高品质和流畅系统。搭载了全新的处理器,性能强劲。</li><li>华为 P70:华为在拍照领域一直表现出色,P70 更是在拍照技术上有了新的突破,同时拥有强大的信号处理能力。</li><li>小米 15:小米以性价比著称,小米 15 在保持高性价比的同时,也在性能和功能上有了很大提升。</li></ul><table><thead><tr><th>手机型号</th><th>处理器</th><th>摄像头像素</th><th>电池容量</th><th>价格</th></tr></thead><tbody><tr><td>苹果 iPhone 16</td><td>A18</td><td>主摄 4800 万</td><td>3500mAh</td><td>7999 元起</td></tr></tbody></table><h2>二、平板电脑类</h2><p>平板电脑适合娱乐、办公等多种场景,以下是几款热门平板电脑的介绍。</p><ol><li>苹果 iPad Pro 2024:拥有强大的性能和出色的屏幕显示效果,适合专业人士进行创意工作。</li></ol>
</body>
</html>
页面截图:
相关文章:
WEB前端表单及表格标签综合案例
表单标签综合案例: 源代码: <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>…...
HTML应用指南:利用POST请求获取全国德邦快递服务网点位置信息
德邦快递作为中国领先的综合性物流服务提供商,自1996年成立以来,始终致力于为客户提供高效、安全的大件快递及其他物流解决方案。德邦快递凭借其强大的直营模式、“最后一公里”的优质服务以及对科技的持续投入,在竞争激烈的物流市场中占据了重要位置。特别是在大件快递领域…...
【Linux网络】应用层自定义协议与序列化
应用层自定义协议与序列化 应用层 我们程序员写的一个个解决我们实际问题,满足我们日常需求的网络程序,都是在应用层. 协议是一种"约定".Socket的接口,在读写数据时,都是按"字符串"的方式来发送接收的.如果我们要传输一些"结构化的数据"怎么办…...
Excel提取单元格特定符号左右两边内容
公式: RIGHT(字符串, 字符个数) :从字符串右边开始,提取指定字数内容 公式应用: RIGHT(A1, LEN(A1) - SEARCH(“-”, A1))—提取单元格A1中符号“-”右边的字符串 LEN(A1) - SEARCH(“-”, A1) 即是返回符号“-”右边的字符串长…...
集群/微服务/分布式
目录 介绍 集群 微服务 优点 缺点 如何管理和监控微服务架构中的多个微服务? 服务治理 配置管理 监控与告警 容器化与编排 安全管理 分布式 三者关系 分布式和集群的区别是什么? 概念 工作方式 节点角色 应用场景 故障处理 微服务 微…...
安装docker
安装docker 一、关闭防火墙和SELinux 1.1systemctl stop firewalld 1.2setenfoce 0 二、配置内核转发以及网桥过滤 2.1vi /etc/sysctl.d/k8s.conf 2.2sysctl -p /etc/sysctl.d/k8s.conf :让文件生效 2.3modprobe br_netfilter:加载模块 若未生效成功…...
热力图是什么?三分钟学会热力图数据分析怎么做!
目录 一、热力图是什么? (一)基本概念 (二)常见类型 (三)优点 二、热力图分析工具 (一)FineBI (二)Tableau (三)P…...
Spring、SpringMVC、SpringBoot、SpringCloud 联系与区别
Spring、SpringMVC、SpringBoot、SpringCloud 联系与区别 一、引言 在 Java 企业级开发中,Spring 家族框架是绕不开的核心技术栈。从基础架构到 Web 开发,再到微服务架构,Spring 系列框架通过层层抽象,逐步简化开发复杂度。本文…...
操作系统导论——第26章 并发:介绍
本章介绍为单个运行进程提供的新抽象:线程(thread)。经典观点是一个程序只有一个执行点(一个程序计数器,用来存放要执行的指令),但多线程(multi-threaded)程序会有多个执…...
如何使用测试软件 Jmeter
第一步,点击 编辑 添加线程组 第二步,右键单击线程组,添加取样器 HTTP 请求 第三步,设置请求路径 第四步,添加 查看结果树 用于查看请求响应 最后点击绿色小三角启动即可...
HarmonyOS NEXT 免费无广告看电影app:从想法到实现的经验总结
学习一项新技能,最好也是最快的方法就是动手实战。学习鸿蒙也一样,给自己定一个小目标,直接找项目练,这样进步是最快的。最近,我在网上看到360周董的一句话:“想干什么就去干,干得烂总比不干强!…...
《算法导论(第4版)》阅读笔记:p14-p16
《算法导论(第4版)》学习第 9 天,p14-p16 总结,总计 3 页。 一、技术总结 无。 二、英语总结(生词:2) 1. in light of (1)释义 idiom. in light of 是美式用法,英式用法是 in the light of。take sth into consideration(鉴…...
kuka, fanuc, abb机器人和移动相机的标定
基础知识 : 一, 9点标定之固定相机标定: 图1: 固定位置相机拍照 因为相机和机器人的基坐标系是固定的, 所以在海康威视相机的9点标定功能栏中, 填上海康使用“圆查找”捕捉到的坐标值, 再将机器人显示的工具坐标系在基坐标系的实时位置pos_act值填入物理坐标X, Y中即可 图2:…...
【MyBatis-6】MyBatis动态SQL:灵活构建高效数据库查询的艺术
在现代企业级应用开发中,与数据库的交互是不可或缺的核心部分。MyBatis作为一款优秀的持久层框架,因其简洁、灵活和高效而广受开发者喜爱。其中,动态SQL功能更是MyBatis的一大亮点,它允许开发者根据不同条件灵活构建SQL语句&#…...
从零开始理解FlashAttention:算法细节图解
🧠 向所有学习者致敬! “学习不是装满一桶水,而是点燃一把火。” —— 叶芝 我的博客主页: https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区! 🚀 让我们一起努力,共创…...
js原型污染 + xss劫持base -- no-code b01lersctf 2025
题目信息:Found this new web framework the other day—you don’t need to write any code, just JSON. 我们先来搞清楚究竟发生了什么 当我们访问 /index /*** 处理 /:page 路径的 GET 请求* param {Object} req - 请求对象* param {Object} reply - 响应对象* returns {Pro…...
面试题:Java集合框架高频面试题总结
# Java集合框架高频面试题总结 ## 集合框架概述 1. **Java集合框架的主要组成部分** - Collection接口 - List: 有序可重复 - Set: 无序不可重复 - Queue: 队列 - Map接口: 键值对存储 2. **集合框架的继承体系** - Collection - List → Arra…...
【大模型ChatGPT+ArcGIS】数据处理、空间分析、可视化及多案例综合应用
在数字化和智能化的浪潮中,GIS(地理信息系统)和GPT(生成式预训练模型)的结合正日益成为推动科研、城市规划、环境监测等领域发展的关键技术。GIS以其强大的空间数据处理、先进的空间分析工具、灵活的地图制作与可视化能…...
使用JMETER中的JSON提取器实现接口关联
一、JSON提取器介绍 JSON提取器是JMETER工具中用于从JSON响应中提取数据的重要组件,常常用于接口关联场景中(参数传递)。 二、添加JSON提取器 举例(积分支付接口请求数据依赖于创建订单接口响应的payOrderId) 1.在…...
Filecoin存储管理:如何停止Lotus向特定存储路径写入新扇区数据
Filecoin存储管理:如何停止Lotus向特定存储路径写入新扇区数据 引言背景问题场景解决方案步骤1:修改sectorstore.json文件步骤2:重新加载存储配置步骤3:验证更改 技术原理替代方案最佳实践结论 引言 在Filecoin挖矿过程中&#x…...
Elasticsearch太重?它的超轻量的替代品找到了!
简要介绍 在海量数据时代,快速而精准地找到所需信息至关重要。如果您正为此苦恼,或者您是 Elasticsearch 的用户,并对其资源消耗或性能有所关注,那么今天我要向您介绍一款名为 Manticore Search 的开源搜索数据库,它或…...
【计算机视觉】OpenCV实战项目: Fire-Smoke-Dataset:基于OpenCV的早期火灾检测项目深度解析
Fire-Smoke-Dataset:基于OpenCV的早期火灾检测项目深度解析 在当今数字化时代,火灾检测技术的智能化发展至关重要。传统的火灾检测方法依赖于烟雾传感器或人工监控,往往存在响应延迟或误报的问题。而随着计算机视觉技术的飞速发展࿰…...
STM32--PWM--函数
TIM_OCInitTypeDef TIM_OCInitTypeDef 是 STM32 标准外设库中用于配置定时器输出比较(Output Compare, OC)功能的结构体,主要用于 PWM 生成、单脉冲输出等场景。 typedef struct {uint16_t TIM_OCMode; // 输出比较模式uint16_t TIM_…...
软件测试应用技术(3) -- 软件评测师(十六)
5 事件驱动架构软件测试 5.1 事件驱动架构软件测试概述 事件驱动架构,简称EDA,是常用的架构范式中的一种,其关注事件的产生、识别、处理、响应。对于事件驱动架构系统的测试应特别注意其业务逻辑处理上的异步特性导致的缺陷和事件队列处理中…...
人工智能之数学基础:二次型
本文重点 二次型作为线性代数领域的重要概念,架起了代数方程与几何分析之间的桥梁。从古典解析几何中的圆锥曲线方程到现代优化理论中的目标函数,二次型以其简洁的数学表达和丰富的结构特性,在数学物理、工程技术和经济金融等领域发挥着不可替代的作用。 二次型的基本概念…...
MongoDB 创建索引原则
MongoDB索引创建原则 MongoDB索引是提高查询性能的关键工具,以下是创建索引的核心原则和最佳实践: 一、索引基础原则 1. 索引本质:索引类似书籍目录,通过B-Tree数据结构对字段值排序存储,使查询复杂度从O(n)降为…...
空间复杂度** 与 **所需辅助空间**
当我们说一个算法的 空间复杂度是 O(1),通常特指“辅助空间”是 O(1),即:除了输入数据本身之外,算法只使用常数级别的额外空间。 ✅ 正确认解: O(1) 空间复杂度 ≈ O(1) 辅助空间 这表示: 不随输入规模增长…...
Spring Web MVC快速入门
什么是Spring Web MVC Spring Web MVC 是基于 Servlet API 构建的原始 Web 框架,从⼀开始就包含在 Spring 框架中。它的正式名称“Spring Web MVC”来⾃其源模块的名称(Spring-webmvc),但它通常被称为"Spring MVC". View(视图) 指在应⽤程序…...
RT-Thread 深入系列 Part 1:RT-Thread 全景总览
摘要: 本文将从 RTOS 演进、RT-Thread 的版本分支、内核架构、核心特性、社区与生态、以及典型产品应用等多维度,全面呈现 RT-Thread 的全景图。 关键词:RT-Thread、RTOS、微内核、组件化、软件包管理、SMP 1. RTOS 演进与 RT-Thread 定位 2…...
黄金、碳排放期货市场API接口文档
StockTV 提供了多种期货市场的数据接口,包括获取K线图表数据、查询特定期货的实时行情等。以下为对接期货市场的详细接口说明。 一、获取K线图表数据 通过调用/futures/kline接口,您可以获取指定期货合约的历史K线数据(例如开盘价、最高价、…...
SpringAI框架中的RAG知识库检索与增强生成模型详解
SpringAI框架中的RAG知识库检索与增强生成模型详解 一、RAG简介 RAG(Retrieval-Augmented Generation)可以通过检索知识库,克服大模型训练完成后参数冻结的局限性,携带知识让大模型根据知识进行回答。 二、SpringAI框架支持的R…...
LVGL- 按钮矩阵控件
1 按钮矩阵控件 lv_btnmatrix 是 LVGL(Light and Versatile Graphics Library) v8 中提供的一个非常实用的控件,用于创建带有多个按钮的矩阵布局。它常用于实现虚拟键盘、数字键盘、操作面板、选择菜单等场景,特别适用于嵌入式设…...
C++学习-入门到精通-【5】类模板array和vector、异常捕获
C学习-入门到精通-【5】类模板array和vector、异常捕获 类模板array和vector、异常捕获 C学习-入门到精通-【5】类模板array和vector、异常捕获一、array对象array对象的声明使用array对象的例子使用常量变量指定array对象的大小 二、基于范围的for语句三、利用array对象存放成…...
`待办事项css样式
vue <template> <div class"box"> <div class"head"> <h2>待办事项</h2> <input type"text" placeholder"请输入您的待办事项,按回车添加"> </div> <div class"main&q…...
spring ai alibaba 使用 SystemPromptTemplate 很方便的集成 系统提示词
系统提示词可以是.st 文件了,便于修改和维护 1提示词内容: 你是一个有用的AI助手。 你是一个帮助人们查找信息的人工智能助手。 您的名字是{name} 你应该用你的名字和{voice}的风格回复用户的请求。 每一次回答的时候都要增加一个65字以内的标题形如:【…...
Vue3 官方宣布淘汰 Axios,拥抱Alova.js
过去十年,Axios 凭借其简洁的API设计和浏览器/Node.js双环境支持,成为前端开发者的首选请求库。但随着现代前端框架的演进和工程化需求的升级,Alova.js 以更轻量、更智能、更符合现代开发范式的姿态登场。 一、Axios的痛点 1,冗余的适配逻辑,比如Axios的通用配置(但实际…...
2025年数维杯C题数据收集方式分享
2025年数维杯C题”清明时节雨纷纷,何处踏青不误春?“需要我们根据题目的要求自行数据,下图为目前已经收集到的问题一二数据集,本文将为大家详细的介绍具体收集数据方式以及处理方式。 通过网盘分享的文件:分享数据集 …...
手写 vue 源码 === ref 实现
目录 响应式的基本实现 Proxy 与属性访问器 Proxy 的工作原理 属性访问器(Getter/Setter) 为什么解构会丢失响应性 ref 和 toRefs 的解决方案 proxyRefs:自动解包 ref 总结 Vue3 的响应式系统是其核心特性之一,它通过 Pro…...
Python爬虫抓取Bilibili弹幕并生成词云
1. 引言 Bilibili(B站)是国内知名的视频分享平台,拥有海量的弹幕数据。弹幕是B站的核心特色之一,用户通过弹幕进行实时互动,这些数据对于分析视频热度、用户情感倾向等具有重要价值。 本文将介绍如何利用Python爬虫技…...
【Python 字典(Dictionary)】
Python 中的字典(Dictionary)是最强大的键值对(key-value)数据结构,用于高效存储和访问数据。以下是字典的核心知识点: 一、基础特性 键值对存储:通过唯一键(Key)快速访…...
k8s之探针
探针介绍: 编排工具运行时,虽说pod挂掉会在控制器的调度下会重启,出现pod重启的时候,但是pod状态是running,无法真实的反应当时pod健康状态,我们可以通过Kubernetes的探针监控到pod的实时状态。 Kubernetes三种探针类…...
upload-labs靶场通关详解:第三关
一、分析源代码 代码注释如下: <?php // 初始化上传状态和消息变量 $is_upload false; $msg null;// 检查是否通过POST方式提交了表单 if (isset($_POST[submit])) {// 检查上传目录是否存在if (file_exists(UPLOAD_PATH)) {// 定义禁止上传的文件扩展名列表…...
LeetCode:101、对称二叉树
递归法: /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {…...
zst-2001 历年真题 UML
UML - 第1题 ad UML - 第2题 依赖是暂时使用对象,关联是长期连接 依赖:依夜情 关联:天长地久 组合:组一辈子乐队 聚合:好聚好散 bd UML - 第3题 adc UML - 第4题 bad UML - 第5题 d UML - 第6题 …...
对称加密以及非对称加密
对称加密和非对称加密是两种不同的加密方式,它们在加密原理、密钥管理、安全性和性能等方面存在区别,以下是具体分析: 加密原理 对称加密:通信双方使用同一把密钥进行加密和解密。就像两个人共用一把钥匙,用这把钥匙锁…...
Java反射 八股版
目录 一、核心概念阐释 1. Class类 2. Constructor类 3. Method类 4. Field类 二、典型应用场景 1. 框架开发 2. 单元测试 3. JSON序列化/反序列化 三、性能考量 四、安全与访问控制 1. 安全管理器限制 2. 打破封装性 3. 安全风险 五、版本兼容性问题 六、最佳…...
C++跨平台开发实践:深入解析与常见问题处理指南
一、跨平台开发基础架构设计 1.1 跨平台架构的核心原则 分层设计模式: 平台抽象层(PAL):将平台相关代码集中管理 核心逻辑层:完全平台无关的业务代码 平台实现层:针对不同平台的特定实现 代码组织最佳实践: pro…...
【“星睿O6”AI PC开发套件评测】+ MTCNN 开源模型部署和测试对比
经过了前几篇文章的铺垫,从搭建 tensorflow 开发环境,到测试官方 onnx 模型部署到 NPU,接着部署自己的 mnist tensorflow 模型到 NPU。这是一个从易到难的过程,本篇文章介绍开源复杂的人脸识别模型 mtcnn 到 “星睿O6” NPU 的部署…...
JAVA实战开源项目:装饰工程管理系统 (Vue+SpringBoot) 附源码x
本文项目编号 T 179 ,文末自助获取源码 \color{red}{T179,文末自助获取源码} T179,文末自助获取源码 目录 一、系统介绍二、数据库设计三、配套教程3.1 启动教程3.2 讲解视频3.3 二次开发教程 四、功能截图五、文案资料5.1 选题背景5.2 国内…...
centos 7 安装 java 运行环境
centos 7 安装 java 运行环境 java -version java version "1.8.0_131" Java(TM) SE Runtime Environment (build 1.8.0_131-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)java -version java version "1.8.0_144" Java(TM) …...