在本文中,我們將在 HTML 中使用帶有日期字段的輸入類型字段。
我們在 元素中使用 type=”date” 來創(chuàng)建讓用戶輸入日期的輸入字段,可以使用驗證輸入的文本框或特殊的日期選擇器界面。
該值包括年、月和日。
語法
以下是在 HTML 中使用輸入類型字段和日期字段的語法。
<input type="date" id="date" name="date">
登錄后復制
示例
以下是在 HTML 中使用輸入類型字段和日期字段的示例程序。
<!DOCTYPE html> <html> <body> <form > <label for="birthday">Date:</label> <input type="date" id="date" name="date"> <input type="submit"> </form> </body> </html>
登錄后復制
現(xiàn)在我們可以從日期選擇器中選擇一個日期。
將日期添加到具有范圍的輸入字段
我們還可以使用 max 和 min 屬性以及日期屬性來創(chuàng)建輸入字段的范圍。
語法
以下是使用 max 和 min 屬性以及日期屬性來創(chuàng)建輸入字段范圍的語法。
<input type="date" name="party" min="2022-06-10" max="2024-04-30">
登錄后復制
示例
以下是使用 max 和 min 屬性以及日期屬性來創(chuàng)建輸入字段范圍的示例程序。
<!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>
登錄后復制
我們可以看到日期選擇器禁用了所有其他值。并創(chuàng)建了我們在上面的示例中指定的范圍。
在上面的示例程序中,我們設(shè)置了 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中使用輸入類型字段和日期字段?的詳細內(nèi)容,更多請關(guān)注www.92cms.cn其它相關(guān)文章!