資料結構
網路
關係型資料庫管理系統
作業系統
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+ 次觀看
