如何在表單中使用 HTML 新增日期選擇器？

表單是任何應用程式中至關重要且典型的元件。它們包含用於輸入名稱、性別、電子郵件等內容的輸入欄位。日期選擇器用於多個表單中以填充日期型別的輸入。我們知道，透過日期選擇器從日曆中選擇特定日期。日期選擇器是一個互動式下拉選單，可以輕鬆地從日曆中選擇日期，而不是手動輸入日期。在許多情況下，它還用於儲存使用者的出生日期。

讓我們深入本文，以更好地瞭解如何在表單中使用 HTML 新增日期選擇器。這可以透過使用以下方法來實現：

HTML <input type="date">

帶有 type="date" 的 <input> 元素建立輸入欄位，使用者可以在其中使用驗證輸入的文字框或特定的日期選擇器介面輸入日期。結果值包含時間，但不包含年份、月份或日期。時間和日期+時間輸入透過 time 和 datetime-local 輸入型別支援。

語法

以下是 HTML <input type="date"> 的語法：

<input type="date">

讓我們看看以下示例，以更深入地瞭解如何在表單中使用 HTML 新增日期選擇器。

示例

讓我們看看 <input type="date"> 用法的常規示例。

<!DOCTYPE html>
<html>
<body>
   <label for="nane">Name:</label>
   <input type="text" id="name" name="name">
   <br />
   <label for="DOB">Enter Date Of Birth:</label>
   <input type="date" id="DOB" name="DOB">
</body>
</html>

執行以上程式碼後，將彈出輸出視窗，顯示名稱的輸入欄位和日期選擇器下拉日曆，供使用者選擇出生日期。

示例

以下是一個示例，我們將向日期選擇器新增 min 和 max 屬性。

<!DOCTYPE html>
<html>
<body>
   <form> Enter Vacation Date: <input type="date" name="Vacation" min="2023-05-06" max="2023-05-25">
      <br /> Reason : <input type="text" name="reason">
   </form>
</body>
</html>

當以上程式碼執行時，它將生成一個包含日期選擇器的輸出，其中提到了 min 和 max 屬性，允許使用者在它們之間選擇日期，以及在網頁上顯示的輸入欄位。

示例

在以下示例中，我們將新增輸入型別 "datetime-local" 並使用 value 屬性。

<!DOCTYPE html>
<html>
<body>
   <label for="time">Choose Party Date And Time :</label>
   <input id="time" type="datetime-local" name="time" value="2023-05-05T11:55" />
</body>
</html>

執行以上程式碼後，將彈出輸出視窗，允許使用者在派對開始時使用 datetime-local 輸入日期和時間。

示例

考慮以下示例，我們將檢查使用者輸入的有效性。

<!DOCTYPE html>
<html>
<body>
   <form>
      <div>
         <label for="party"> Choose Preferred Date And Time: </label>
         <input id="party" type="datetime-local" name="partydate" min="2023-05-05T07:30" max="2023-05-30T16:30" required />
         <span class="validity"></span>
      </div>
      <div>
         <input type="submit" value="Book For Party!">
      </div>
   </form>
</body>
</html>

當我們執行以上程式碼時，將彈出輸出視窗，顯示日期和時間選擇器供使用者選擇，以及一個提交按鈕。當用戶點選按鈕時，它會檢查輸入是否有效。

更新於： 2023年9月26日

997 次檢視

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告