数据结构
网络
关系型数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 HTML 中使用时间输入类型？
Html 提供各种标签来设计用户界面。有一类特定的标签可以随时提供选项，供用户选择日期和时间类型的数据。
要使用 HTML 创建时间控件，我们有 <input type=”time”> 标签，其中时间值可以在 <input> 标签的 TYPE 属性中使用。
默认情况下，时间控件将以 24 小时格式显示输出。时间可以表示为 hh:mm（小时：分钟）格式，或者如果要提及秒，则格式将为 hh:mm:ss。小时值可以在 0-24 之间选择，分钟值可以在 0-59 之间选择。
让我们看一个创建时间类型输入元素的程序。
示例
<html> <body> <form> <label for="meet">Meeting Time :</label> <input type="time" id="time1"> </form> </body> </html>
当选择时钟图标时，它将打开计时器选项，从中可以选择时间。
我们还可以为时间选择器设置默认值，在这种情况下，它最初将显示默认时间，而不是空白。要设置默认值，我们可以使用 VALUE 属性。
示例
<html> <body> <form> <label for="meet">Meeting Time :</label> <input type="time" id="time1" value="13:20"> </form> </body> </html>
我们还可以为时间选择器控件指定范围，因为在某些情况下可能需要限制时间输入，例如工作时间限制、商店营业时间等。对于此类信息，应使用 min、max 和 step 属性设置范围，如果用户选择超出给定范围的值，则会显示错误消息。
示例
<html> <body> <form> <table border="3" bordercolor="black"> <caption>Online Doctor Appointment Form</caption> <tr> <td>Doctor Name</td> <td>Speciality</td> <td>Appointment Date</td> <td>Available Time</td> </tr> <tr> <td>Dr Kapoor</td> <td>Orthopedic Surgeon</td> <td><input type="datetime-local"></td> <td> <input type="time" id="time1" value="09:12" min="09:00" max="12:00"> </td> <td><input type="submit" value="Schedule"></td> </tr> </table> </form> </body> </html>
在此程序中，我们还使用了 datetime-local 控件来指定“预约日期”。时间控件用于创建时间选择器。可用时间使用 VALUE 属性（9:30 – 12:00）显示在字段中，如果用户选择除
提到的之外的时间，则会生成错误。
假设，如果要强制用户从时间选择器中选择值，则可以使用 REQUIRED 属性。
除了设置时间范围外，我们还可以向下拉列表中添加一些特定值。现在让我们考虑一个航班跟踪应用程序的示例，例如 flightview.com。在此应用程序中，我们可以通过输入航班详细信息或路线信息来跟踪航班。除此之外，还可以指定航班时间，用户可以从可用时间中选择。
为此，我们可以在 HTML 表单中使用 <datalist> 标签。这可以通过在 <input> 标签中使用 list 属性将其与 <input> 标签链接。
示例
<html> <body> <form name="form1"> <label for="fli">Flight Timings :</label> <input type="time" list="avail"> <datalist id="avail"> <option value="06:00"> <option value="07:00"> <option value="08:00"> </datalist> <br><br> <input type="submit" value="Book"> </form> </body> </html>
22K+ 次观看
