如何在 HTML 中使用月份輸入型別？

在 HTML 中，表單包含各種元素，有助於在網頁中建立使用者介面。使用這些元素，我們可以收集不同型別的自然資訊。

常用控制元件之一是月份控制元件，即<input type=”month”>。

此控制元件基本上為使用者提供了一個類似日曆的下拉選單，使用者可以從中選擇或拾取月份和年份。月份控制元件允許您以 YYYY-MM 的格式選擇日期，其中 YYYY 表示年份，MM 表示月份。

讓我們來看一個月份控制元件的簡單示例。

示例

<html>
<body>
   <form name="form1">
      <label for="adm">Date of Admission:</label>
      <input type="month" name="doa">
   </form>
</body>
</html>

執行上面給出的程式碼，頁面上將顯示一個月份控制元件。

當您單擊控制元件右側的日曆圖示時，它將開啟完整的月份日曆，如下所示：


您可以在下拉選單開啟後從日曆中選擇月份和年份，也可以在控制元件中鍵入月份和年份部分。

選擇月份和年份後，它將儲存在字串型別的值中。

讓我們建立一個程式，使用 JavaScript 顯示從控制元件中選擇的月份和年份。

示例

<html>
<head>
   <title>Admission Form</title>
   <script>
      function display(){
         d=form1.doa.value;
         document.write("<center><b>Date of Admission is "+d 
         +"</b></center>");
      }
   </script>
   <form name="form1">
 	   <label for="adm">Date of Admission:</label>
	   <input type="month" name="doa" onchange="display()">
   </form>
<html>

在此程式中，我們使用<script>標籤在其中編寫 JavaScript 程式碼，建立一個函式，在觸發 onchange() 事件時顯示所選月份。當從控制元件中選擇日期值時，將觸發 onchange 事件。document.write() 將在下一頁顯示該值。我們使用<HTML>格式化標記在格式化輸出中顯示入學日期。

它以 YYYY-MM 格式顯示日期值。

我們也可以在單擊提交按鈕時顯示輸出。在這種情況下，我們將使用提交按鈕的 onclick() 事件代替 onchange()。

示例

<html>
<head>
   <title>Admission Form</title>
   <script>
      function display(){
         d=form1.doa.value;
         document.write("<center><b>Date of Admission is "+d
         +"</b></center>");
      }
   </script>
   <form name="form1">
      <label for="adm">Date of Admission:</label>
      <input type="month" name="doa">
      <br>
      <input type="submit" value="Submit" onclick="display()">
   </form>
<html>

我們還可以設定月份和年份的預設值，這些值應在網頁載入到瀏覽器中時顯示。為此，我們可以在<input>標籤中使用 value 屬性。

示例

<html>
<body>
   <form>
      <p>
         Select a month: <input type="month" name="selectedmonth"  value="1980-12">
         <br>
         <input type="submit" value="Send data">
      </p>
   </form>
</body>
</html>

執行此程式後，它將在月份控制元件中顯示“1980年12月”作為預設值。

接下來是非常有趣的部分，即設定日期範圍，這意味著使用者只能在該範圍內輸入日期值，否則程式將顯示錯誤訊息。

示例

<html>
<body>
   <form>
      <p>
         Select a month: <input type="month" name="selectedmonth"       value="1980-12" min="1980-12" max="1981-11">
         <br>
         <input type="submit" value="Send data">
      </p>
   </form>
</body>
</html>

在此程式中，您可以觀察到只有 12 月（1980 年）是活動的，其他月份被停用，同樣，當您鍵入 1981 年時，它將顯示您最多 11 月份，因為我們設定了範圍。

如果使用者鍵入無效的月份或年份名稱，它將顯示如下錯誤訊息：

我們還可以使用 step 屬性，使用該屬性，我們可以在設定日期範圍時跳過給定年份的幾個月。請檢視下面顯示的活動登錄檔單的示例，假設某個特定活動在特定月份舉行。

示例

<html>
<body>
   <form name="form1">
      <table>
      <tr>
         <td><label for="adm">Choose Event :</label></td>
         <td><select name="event">
            <option>Live Concert
            <option>Olympics in Beijing
            <option>World Series(Baseball)
            </select>
         </td>
      </tr>
      <tr>
         <td>
         <label for="adm">Available Event Dates:</label></td>
         <td><input type="month" name="eventdate" step="3"></td>
      </tr>
      <tr>
         <td></td><td><input type="submit" value="Submit"></td>
      </tr>
   </form>
</body>
</html>

更新於： 2022-08-23

6K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告