如何在HTML中使用輸入類型欄位和日期欄位？
- WBOY轉載
- 2023-09-08 19:53:021270瀏覽
在本文中，我們將在 HTML 中使用帶有日期欄位的輸入類型欄位。
我們在 元素中使用 type="date" 來建立讓使用者輸入日期的輸入字段，可以使用驗證輸入的文字方塊或特殊的日期選擇器介面。
該值包括年、月和日。
文法
以下是在 HTML 中使用輸入類型欄位和日期欄位的語法。
<input type="date" id="date" name="date">
範例
以下是在 HTML 中使用輸入類型欄位和日期欄位的範例程式。
現在我們可以從日期選擇器中選擇一個日期。
將日期新增至具有範圍的輸入欄位
我們也可以使用 max 和 min 屬性以及日期屬性來建立輸入欄位的範圍。
文法
以下是使用 max 和 min 屬性以及日期屬性來建立輸入欄位範圍的語法。
<input type="date" name="party" min="2022-06-10" max="2024-04-30">
範例
以下是使用 max 和 min 屬性以及日期屬性來建立輸入欄位範圍的範例程式。
<!DOCTYPE html>
<html>
<body>
<form >
<label for="birthday">Date:</label>
<input type="date" name="party" min="2022-06-01" max="2022-07-30">
<input type="submit">
</form>
</body>
</html>
我們可以看到日期選擇器停用了所有其他值。並創建了我們在上面的範例中指定的範圍。
在上面的範例程式中，我們設定了 min="2022-06-01" 和 max="2022-07-30"。因此，日期選擇器能夠從最小和最大範圍中選擇日期。
日期屬性作為必填欄位
我們也可以使用輸入欄位的 required 屬性來強制填寫日期。如果我們嘗試提交空日期字段，將會顯示錯誤。
文法
以下語法使用輸入欄位的 required 屬性來強制填寫日期。
<input type="date" name="party" min="2022-06-10" max="2024-04-30" required>
範例
以下範例使用輸入欄位的 required 屬性來強制填寫日期。
<!DOCTYPE html>
<html>
<body>
<form >
<label for="birthday">Date:</label>
<input type="date" name="party" min="2022-06-01" max="2022-07-30" required>
<input type="submit">
</form>
</body>
</html>
當我們嘗試在輸入欄位中提交空日期時，顯示錯誤訊息。
以上是如何在HTML中使用輸入類型欄位和日期欄位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除