数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在表单中使用 HTML5 添加时间选择器？
将时间选择器整合到 Web 表单中是许多 Web 开发人员的常见需求。您可能认为添加时间选择器可能是一项复杂的任务，并且您可能需要使用 JavaScript 库。但令您惊讶的是，使用 HTML 提供的标签，这实际上是一项相对简单的任务。这可以大大减少在 Web 应用程序中实现日期和时间选择器所需的代码量和时间。
要使用 HTML 创建时间控件，我们有 <input type=” time”> 标签，其中时间值可以在 <input> 标签的 TYPE 属性中使用。让我们深入本文，进一步了解如何在表单中添加时间选择器。
HTML <input type=”time”>
Web 表单的时间输入字段是使用 HTML <input type="time"> 元素创建的。它允许用户以预定义的格式输入特定时间值。当您需要用户提交与时间相关的数据时，例如预约时间、活动日程或截止日期，此输入类型特别有用。
根据所使用的浏览器和设备，<input type="time"> 元素提供了一个用户友好的界面来选择时间，方法是显示下拉列表或时间选择器小部件。
语法
以下是 HTML 时间输入字段的语法
<input type="time">
示例
在以下示例中，我们正在创建一个带有时间选择器的简单表单。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #E8DAEF;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<div>
<p>Choose time:</p>
<input type="time" />
</div>
</body>
</html>
当我们运行上述代码时，它将生成一个输出，其中包含文本以及提到的时间输入字段，允许用户选择网页上显示的时间。
示例
考虑另一种情况，我们将与时间选择器一起使用 datalist 标签。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D5F5E3;
color: #DE3163;
}
p {
font-family: verdana;
}
</style>
</head>
<body>
<form action="#">
<p> Avaliable time : <input type="time" name="available" list="tutorial">
<br>
<br>
<br>
<input type="submit" value="Submit">
</p>
</form>
<datalist id="tutorial">
<option value="13:00">
<option value="15:30">
<option value="20:00">
<option value="23:55">
</datalist>
</body>
</html>
运行上述代码后，将弹出一个输出窗口，其中包含时间输入类型，允许用户从网页上显示的代码中提供的选项中选择时间。
示例
让我们看一下下面的示例，我们将使用 min 和 max 属性添加时间选择器。
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
background-color: #D6EAF8;
font-family: verdana;
}
</style>
</head>
<body>
<form action="#">
<label for="tutorial"> Choose slot Time: </label>
<input id="tutorial" type="time" name="slot" min="10:00" max="16:00" />
<br>
<br>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
当我们运行上述代码时，将弹出一个输出窗口，其中包含提到的时间类型输入字段以及 min 和 max 属性，允许用户在它们之间选择时间。如果用户选择超出该范围的时间，则会抛出异常。
278 次浏览
