HTML5 新表单元素详解

一、HTML5 新的 <input> 类型

HTML5 引入了多种新的 <input> 类型，使得表单的输入更加语义化和用户友好。

1. <input type="email">

<input type="email"> 用于接收电子邮件地址，浏览器会自动进行格式验证。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Email Input Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- email 类型的 input，用于接收电子邮件地址 --><div class="input-field"><label for="email">Email:</label><input type="email" id="email" name="email" placeholder="example@example.com" required></div><button type="submit">Submit</button></form>
</body>
</html>

2. <input type="date">

<input type="date"> 用于接收日期输入，浏览器会提供日期选择器。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Date Input Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- date 类型的 input，用于接收日期输入 --><div class="input-field"><label for="date">Date:</label><input type="date" id="date" name="date" required></div><button type="submit">Submit</button></form>
</body>
</html>

3. <input type="url">

<input type="url"> 用于接收 URL 地址，浏览器会自动进行格式验证。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>URL Input Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- url 类型的 input，用于接收 URL 地址 --><div class="input-field"><label for="url">Website:</label><input type="url" id="url" name="url" placeholder="https://example.com" required></div><button type="submit">Submit</button></form>
</body>
</html>

4. 其他新类型

除了 email、date、url 之外，HTML5 还引入了其他新类型，如 color、number、range 等。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Other Input Types Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- color 类型的 input，用于选择颜色 --><div class="input-field"><label for="color">Favorite Color:</label><input type="color" id="color" name="color"></div><!-- number 类型的 input，用于接收数值 --><div class="input-field"><label for="number">Age:</label><input type="number" id="number" name="number" min="1" max="100"></div><!-- range 类型的 input，用于选择范围 --><div class="input-field"><label for="range">Range:</label><input type="range" id="range" name="range" min="0" max="100"></div><button type="submit">Submit</button></form>
</body>
</html>

二、HTML5 新的表单元素

HTML5 引入了一些新的表单元素，使表单功能更加丰富。

1. <datalist>

<datalist> 元素用于提供一个预定义的选项列表供其他控件使用。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Datalist Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- datalist 提供预定义选项 --><div class="input-field"><label for="browser">Choose your browser:</label><input list="browsers" id="browser" name="browser" placeholder="Type to search..."><datalist id="browsers"><option value="Chrome"><option value="Firefox"><option value="Safari"><option value="Opera"><option value="Edge"></datalist></div><button type="submit">Submit</button></form>
</body>
</html>

2. <output>

<output> 元素用于表示计算或用户操作的结果。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Output Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input, .input-field output {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style><script>// 计算两个数的和，并将结果显示在 output 元素中function calculateSum() {var num1 = parseFloat(document.getElementById('num1').value);var num2 = parseFloat(document.getElementById('num2').value);var sum = num1 + num2;document.getElementById('result').value = sum;}</script>
</head>
<body><form oninput="calculateSum()"><div class="input-field"><label for="num1">Number 1:</label><input type="number" id="num1" name="num1"></div><div class="input-field"><label for="num2">Number 2:</label><input type="number" id="num2" name="num2"></div><!-- output 元素显示计算结果 --><div class="input-field"><label for="result">Sum:</label><output id="result" name="result"></output></div><button type="submit">Submit</button></form>
</body>
</html>

3. <progress>

<progress> 元素表示任务的完成进度。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Progress Example</title><style>.input-field {display: block;margin-bottom: 10px;}progress {width: 100%;}</style>
</head>
<body><form><!-- progress 元素显示任务进度 --><div class="input-field"><label for="file">File upload progress:</label><progress id="file" value="32" max="100">32%</progress></div><button type="submit">Submit</button></form>
</body>
</html>

4. <meter>

<meter> 元素表示标量测量值或分数值范围内的度量。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Meter Example</title><style>.input-field {display: block;margin-bottom: 10px;}meter {width: 100%;}</style>
</head>
<body><form><!-- meter 元素显示测量值 --><div class="input-field"><label for="disk">Disk usage:</label><meter id="disk" value="0.6" min="0" max="1" low="0.3" high="0.7" optimum="0.5">60%</meter></div><button type="submit">Submit</button></form>
</body>
</html>

三、表单验证和属性

HTML5 为表单引入了更强大的验证功能，使用新的属性可以方便地进行客户端验证。

1. required

required 属性用于指定输入字段为必填项。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Required Attribute Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- required 属性指定此字段为必填项 --><div class="input-field"><label for="username">Username:</label><input type="text" id="username" name="username" required></div><button type="submit">Submit</button></form>
</body>
</html>

2. pattern

pattern 属性用于指定输入字段的正则表达式模式，浏览器会自动进行格式验证。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Pattern Attribute Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- pattern 属性指定输入的正则表达式模式 --><div class="input-field"><label for="phone">Phone Number (XXX-XXX-XXXX):</label><input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required></div><button type="submit">Submit</button></form>
</body>
</html>

3. min 和 max

min 和 max 属性用于指定输入字段的最小值和最大值，适用于 number、range、date 等类型。

示例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Min and Max Attributes Example</title><style>.input-field {display: block;margin-bottom: 10px;}.input-field input {padding: 8px;border: 1px solid #ccc;border-radius: 4px;width: 100%;}</style>
</head>
<body><form><!-- min 和 max 属性指定输入的最小值和最大值 --><div class="input-field"><label for="age">Age (1-100):</label><input type="number" id="age" name="age" min="1" max="100" required></div><div class="input-field"><label for="start">Start date:</label><input type="date" id="start" name="start" min="2024-01-01" max="2024-12-31" required></div><button type="submit">Submit</button></form>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/20975.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

基于稀疏辅助小波和线性时不变滤波器的惯性传感器步态周期分割方法（MATLAB R2018A）

基于稀疏辅助小波和线性时不变滤波器的惯性传感器步态周期分割方法（MATLAB R2018A）

每个人在肌肉骨骼状况、生理状况、心理特征以及个人行走的“风格”等方面都有各自的特点&#xff0c;因此&#xff0c;每个人都有自己的步态指纹。这意味着可以根据步态特征来进行身份识别。基于步态的身份识别是生物特征识别的一个新兴领域。其机制有3个显著的优点&#xff1a…
阅读更多...
STM32高级控制定时器应用之检测输入PWM周期和占空比

STM32高级控制定时器应用之检测输入PWM周期和占空比

目录 概述 1 PWM 输入模式 1.1 原理介绍 1.2 应用实例 1.3 示例时序图 2 使用STM32Cube配置工程 2.1 软件环境 2.2 配置参数 2.3 生成项目文件 3 功能实现 3.1 PWM占空比函数 3.2 输入捕捉回调函数 4 功能测试 4.1 测试软件框架结构 4.2 实验实现 4.2.1 测试实…
阅读更多...
整数之间的赋值问题

整数之间的赋值问题

前言&#xff1a;我们在初学C语言的时候&#xff0c;总是避免不了一些数据类型的转换&#xff0c;例如int-->char&#xff0c;char-->int&#xff0c;如果我们仅仅只学习这些语法&#xff0c;而不去了解底层原理&#xff0c;对于这些输出的内容&#xff0c;我们可能会感觉…
阅读更多...
2024还不会安装NodeJs

2024还不会安装NodeJs

2024还不会安装NodeJs 1、官网下载 由于本地是windows&#xff0c;所以选择 Prebuilt Installer 64位 NodeJs官网下载 LTS长期支持版本 当然这里我用的 Snipastate 截屏软件&#xff0c;这里也配下载链接 Snipasate下载链接 2、配置环境变量 由于是自己的电脑&#xff0c…
阅读更多...
SpringBoot启动流程分析之设置系统属性spring.beaninfo.ignore、自定义banner图（五）

SpringBoot启动流程分析之设置系统属性spring.beaninfo.ignore、自定义banner图（五）

SpringBoot启动流程分析之设置系统属性spring.beaninfo.ignore、自定义banner图&#xff08;五&#xff09; 参考 目录 文章目录 SpringBoot启动流程分析之设置系统属性spring.beaninfo.ignore、自定义banner图&#xff08;五&#xff09;1、设置sping.beaninfo.ignore属性2、…
阅读更多...
代码随想录leetcode200题之动态规划算法

代码随想录leetcode200题之动态规划算法

目录 1 介绍2 训练3 参考 1 介绍 本博客用来记录代码随想录leetcode200题之动态规划算法相关题目。 2 训练 题目1&#xff1a;509. 斐波那契数 C代码如下&#xff0c; class Solution { public:int fib(int n) {if (n < 1) { //特判return n;}int a 0, b 1;for (int …
阅读更多...
C语言进程编程：探索操作系统的核心机制

C语言进程编程：探索操作系统的核心机制

C语言进程编程&#xff1a;探索操作系统的核心机制 在C语言的广阔领域中&#xff0c;进程编程无疑是一块充满挑战与机遇的阵地。进程作为操作系统分配资源的基本单位&#xff0c;其编程涉及到系统调用、进程控制、通信与同步等多个复杂而关键的概念。本文将围绕四个方面、五个…
阅读更多...
限流算法整理——滑动窗口限流算法

限流算法整理——滑动窗口限流算法

限流算法描述 滑动窗口限流需要将每个窗口空间划分为无限小的窗口区间&#xff0c;并且动态调整区间的起始点&#xff0c;并且在调整完毕之后需要判断各个区间&#xff0c;累加各个区间的请求&#xff0c;查看是否到达最大的阈值&#xff0c;以此返回允许请求还是拒绝请求 算…
阅读更多...
计算机常用的英语单词

计算机常用的英语单词

在计算机科学与技术领域&#xff0c;有一些常用的英语单词和术语是学习者需要掌握的。以下是一些常见的计算机必会英语单词&#xff0c;分为不同的类别&#xff1a; 1. 编程语言和技术&#xff1a; Algorithm - 算法Programming - 编程Code - 代码Variable - 变量Function - …
阅读更多...
PyTorch学习（11）：PyTorch的形状变换(view, reshape)与维度变换(transpose, permute)

PyTorch学习（11）：PyTorch的形状变换(view, reshape)与维度变换(transpose, permute)

PyTorch学习&#xff08;1&#xff09;&#xff1a;torch.meshgrid的使用-CSDN博客 PyTorch学习&#xff08;2&#xff09;&#xff1a;torch.device-CSDN博客 PyTorch学习&#xff08;9&#xff09;&#xff1a;torch.topk-CSDN博客 PyTorch学习&#xff08;10&#xff09;…
阅读更多...
数据库与数据库管理系统 MySQL的安装 SQL语言学习：DDL、DML

数据库与数据库管理系统 MySQL的安装 SQL语言学习：DDL、DML

day51 数据库 数据库&#xff08;database&#xff09;就是一个存储数据的仓库。为了方便数据的存储和管理&#xff0c;它将数据按照特定的规律存储在磁盘上。 通过数据库管理系统&#xff0c;可以有效地组织和管理存储在数据库中的数据&#xff0c;如数据库管理系统MySQL 数据…
阅读更多...
Java学习Lambda表达式

Java学习Lambda表达式

Lambda表达式 有且只有一个未实现的方法叫做Lambda表达式&#xff0c;可以实现函数式编程 // 这个注解是用来检查你写的函数是否是函数式接口 FunctionalInterfaceinterface Myinterface {int sum(int a, int b);default String priteTitle(String name, int age, String sex)…
阅读更多...
Kubernetes资源调度策略及实现机制

Kubernetes资源调度策略及实现机制

目录 一、资源调度策略 1.默认调度器&#xff08;Default Scheduler&#xff09; 2.自定义调度器&#xff08;Custom Scheduler&#xff09; 3.亲和性与反亲和性&#xff08;Affinity and Anti-Affinity&#xff09; 4.污点与容忍&#xff08;Taint and Tolerations&#…
阅读更多...
时间序列差分顺序的讨论

时间序列差分顺序的讨论

生成出一组时间序列数据 服从标准正态分布的50个 随机数据 分别给出4步季节差分&#xff0c;再进行1步1阶差分的结果 和 1步1阶差分再进行 4步季节差分 的结果 讨论&#xff1a; 先进行4步季节差分再进行1步1阶差分与先进行1步1阶差分再进行4步季节差分的结果看起来是相同的
阅读更多...
计算机网络复习（2）性能指标 带宽

计算机网络复习（2）性能指标 带宽

计算机网络的性能指标是衡量网络效率、可靠性和服务质量的重要参数&#xff0c;它们帮助我们理解网络如何工作以及如何优化网络性能。以下是计算机网络中几个关键的性能指标的详细介绍&#xff1a; 1. 速率 (Rate) / 比特率 (Bit Rate) / 数据率 (Data Rate) 速率指的是数据在…
阅读更多...
Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子：潍柴雷沃智慧农业无人驾驶

Nvidia Jetson/Orin +FPGA+AI大算力边缘计算盒子：潍柴雷沃智慧农业无人驾驶

潍柴雷沃智慧农业科技股份有限公司&#xff0c;是潍柴集团重要的战略业务单元&#xff0c;旗下收获机械、拖拉机等业务连续多年保持行业领先&#xff0c;是国内少数可以为现代农业提供全程机械化整体解决方案的品牌之一。潍柴集团完成对潍柴雷沃智慧农业战略重组后&#xff0c;…
阅读更多...
kaggle：房价预测

kaggle：房价预测

比赛链接 结果展示 结果链接 8848是密码 文章目录 数据处理调包部分拒绝掉包岭回归理论代码实践结果 自助采样理论代码 集成学习前言Bagging理论Bagging-Ridge代码Bagging-Ridge实践Bagging-Ridge结果 Tricks 数据处理 #打开文件 import pandas as pd dataset1pd.read_csv(&q…
阅读更多...
Arduino编程变量：深度探索与实际应用

Arduino编程变量：深度探索与实际应用

Arduino编程变量&#xff1a;深度探索与实际应用 在Arduino编程中&#xff0c;变量扮演着至关重要的角色。它们用于存储程序运行过程中的临时数据&#xff0c;是实现各种功能和算法的关键。然而&#xff0c;对于初学者来说&#xff0c;变量的理解和使用往往充满了困惑和挑战。…
阅读更多...
Java 基础面试300题 （111-140）

Java 基础面试300题 （111-140）

Java 基础面试300题 &#xff08;111-140&#xff09; 111.什么是Java包&#xff1f; 有什么优点&#xff1f; 包是相关Java类型的集合。包中可以包括相关的类、接口和枚举。使用包来组织软件代码有几方面的优点&#xff1a; 包有助于将相关代码保存在一起。包有助于避免命名…
阅读更多...
How to install a dataset from huggingface?

How to install a dataset from huggingface?

当我从抱抱脸上git clone imdb数据集时&#xff0c;plain_text里的文件是这样的&#xff1a;
阅读更多...
最新文章

Copyright @ 2022~2023