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