<input type="time">
型別為time的<input>元素建立旨在讓使用者輕鬆輸入時間（小時和分鐘，以及可選的秒數）的輸入欄位。
雖然控制元件的使用者介面外觀基於瀏覽器和作業系統，但功能是相同的。無論 UI 的輸入格式如何，值始終是 24 小時制 hh:mm 或 hh:mm:ss 格式的時間，並帶有前導零。
試一試
設定 value 屬性
您可以透過在建立 <input> 元素時在value屬性中包含有效時間來設定輸入的預設值，如下所示
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" value="13:30" />
使用 JavaScript 設定值
您還可以使用HTMLInputElement value 屬性在 JavaScript 中獲取和設定時間值，例如
const timeControl = document.querySelector('input[type="time"]');
timeControl.value = "15:30";
時間值格式
time 輸入的 value 始終採用 24 小時制格式，包括前導零：hh:mm，而不管輸入格式如何，輸入格式很可能根據使用者的區域設定（或使用者代理）進行選擇。如果時間包含秒數（請參閱使用 step 屬性），則格式始終為 hh:mm:ss。您可以在時間字串中瞭解更多關於此輸入型別使用的時間值格式的資訊。
在此示例中，您可以透過輸入時間並檢視其後續變化來檢視時間輸入的值。
首先，看一下 HTML。這很簡單，標籤和輸入與我們之前看到的相同，但添加了一個帶有<span>的<p>元素來顯示 time 輸入的值
<form>
<label for="startTime">Start time: </label>
<input type="time" id="startTime" />
<p>
Value of the <code>time</code> input:
<code>"<span id="value">n/a</span>"</code>.
</p>
</form>
JavaScript 程式碼向時間輸入新增程式碼以監視input事件，該事件在輸入元素的內容每次更改時都會觸發。發生這種情況時，<span> 的內容將替換為輸入元素的新值。
const startTime = document.getElementById("startTime");
const valueSpan = document.getElementById("value");
startTime.addEventListener(
"input",
() => {
valueSpan.innerText = startTime.value;
},
false,
);
當提交包含 time 輸入的表單時，值將在包含在表單資料中之前進行編碼。時間輸入的表單資料條目將始終採用 name=hh%3Amm 或 name=hh%3Amm%3Ass 的形式，如果包含秒數（請參閱使用 step 屬性）。
其他屬性
除了所有<input>元素共有的屬性之外，time 輸入還提供以下屬性。
注意：與許多資料型別不同，時間值具有週期性域，這意味著值達到最大可能值後，會迴繞到開頭。例如，指定 min 為 14:00 且 max 為 2:00 表示允許的時間值從下午 2:00 開始，執行到午夜到第二天，在凌晨 2:00 結束。請參閱本文的使 min 和 max 跨越午夜部分了解更多資訊。
list
list 屬性的值是位於同一文件中的<datalist>元素的id。<datalist> 提供了一個預定義值的列表，以建議使用者在此輸入中使用。列表中與type不相容的任何值都不會包含在建議的選項中。提供的這些值是建議，而不是要求：使用者可以選擇此預定義列表中的值，也可以提供其他值。
max
一個字串，指示要接受的最新時間，以與上面描述的相同的時間值格式指定。如果指定的字串不是有效時間，則不設定最大值。
min
一個字串，指定要接受的最早時間，以之前描述的時間值格式給出。如果指定的值不是有效時間字串，則不設定最小值。
readonly
一個布林屬性，如果存在，則表示此欄位不能由使用者編輯。但是，其value 仍然可以透過 JavaScript 程式碼直接設定HTMLInputElement value 屬性來更改。
注意：因為只讀欄位不能有值，所以required 對也指定了readonly 屬性的輸入沒有任何影響。
step
step 屬性是一個數字，指定值必須遵循的粒度，或者特殊值 any，如下所述。只有等於步進基礎的值（如果已指定則為min，否則為value，以及如果兩者都不存在則為適當的預設值）才是有效的。
any 的字串值表示不暗示任何步進，並且允許任何值（除了其他約束，例如min 和max）。
注意：當用戶輸入的資料不符合步進配置時，使用者代理可能會舍入到最接近的有效值，在有兩個同樣接近的選項時，傾向於正方向的數字。
對於time輸入型別，step的值以秒為單位，並乘以1000的縮放因子（因為底層數值以毫秒為單位）。step的預設值為60，表示60秒（或1分鐘，或60,000毫秒）。
當將any設定為step的值時，將使用預設的60秒，並且在UI中不會顯示秒數。
使用時間輸入
時間的基本用法
<input type="time">最簡單的用法涉及一個基本的<input>和<label>元素組合，如下所示
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" />
</form>
控制輸入大小
使用step屬性
您可以使用step屬性來改變每次增加或減少時間時跳躍的時間量（例如，在點選小箭頭部件時，時間每次移動10分鐘）。
它接受一個整數，定義您想要增加的秒數；預設值為60秒。以60秒為預設值，大多數使用者代理時間UI顯示小時和分鐘，但不顯示秒數。如果min或max值尚未導致秒數可見，則包含具有任何數值（不包含60的倍數）的step屬性會將秒數新增到UI中。
<form>
<label for="appt-time">Choose an appointment time: </label>
<input id="appt-time" type="time" name="appt-time" step="2" />
</form>
要將分鐘或小時指定為步長，請以秒為單位指定分鐘或小時數，例如120表示2分鐘，或7200表示2小時。
驗證
預設情況下，<input type="time">不會對輸入的值應用任何驗證，除了使用者代理的介面通常不允許您輸入除時間值以外的任何內容之外。這很有幫助，但您不能完全依賴該值是一個正確的時間字串，因為它可能是一個空字串（""），這是允許的。
設定最大和最小時間
您可以使用min和max屬性來限制使用者可以選擇的時間範圍。在下面的示例中，我們設定了最小時間為12:00，最大時間為18:00。
<form>
<label for="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input id="appt-time" type="time" name="appt-time" min="12:00" max="18:00" />
<span class="validity"></span>
</form>
以下是上述示例中使用的CSS。在這裡，我們利用:valid和:invalidCSS屬性根據當前值是否有效來設定輸入的樣式。我們在輸入框旁邊的<span>上新增一個作為生成內容圖示的圖示。
div {
margin-bottom: 10px;
position: relative;
}
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
這裡的結果是
- 只有12:00到18:00之間的時間才會被視為有效；超出該範圍的時間將被標記為無效。
使最小值和最大值跨越午夜
透過將min屬性設定為大於max屬性，有效時間範圍將環繞午夜以生成一個有效的時間範圍。此功能不受任何其他輸入型別支援。
const input = document.createElement("input");
input.type = "time";
input.min = "23:00";
input.max = "01:00";
input.value = "23:59";
if (input.validity.valid && input.type === "time") {
// <input type=time> reversed range supported
} else {
// <input type=time> reversed range unsupported
}
使時間必填
此外，您可以使用required屬性使填寫時間成為必填項。如果您嘗試提交超出設定範圍的時間或空時間欄位，瀏覽器將顯示錯誤。
讓我們來看一個例子；在這裡，我們設定了最小和最大時間，並且還將欄位設定為必填項。
<form>
<div>
<label for="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span>
</div>
<div>
<input type="submit" value="Submit form" />
</div>
</form>
如果您嘗試提交包含不完整時間（或超出設定範圍的時間）的表單，瀏覽器將顯示錯誤。現在嘗試使用示例進行操作。
警告：HTML表單驗證不是指令碼的替代品，這些指令碼確保輸入的資料格式正確。對於某人調整HTML以允許他們繞過驗證或完全刪除驗證來說，這太容易了。某人也可以完全繞過您的HTML並將資料直接提交到您的伺服器。如果您的伺服器端程式碼未能驗證它接收到的資料，則當提交格式不正確的資料（或大小過大、型別錯誤等資料）時，可能會發生災難。
示例
在此示例中，我們使用<input type="time">建立的原生選擇器建立了一個用於選擇時間的介面元素。
HTML
<form>
<label for="appt-time">
Choose an appointment time (opening hours 12:00 to 18:00):
</label>
<input
id="appt-time"
type="time"
name="appt-time"
min="12:00"
max="18:00"
required />
<span class="validity"></span
CSS
input[type="number"] {
width: 100px;
}
input + span {
padding-right: 30px;
}
input:invalid + span::after {
position: absolute;
content: "✖";
padding-left: 5px;
}
input:valid + span::after {
position: absolute;
content: "✓";
padding-left: 5px;
}
結果
技術摘要
規範
| 規範 |
|---|
| HTML標準 # time-state-(type=time) |
瀏覽器相容性
BCD表格僅在瀏覽器中載入