資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在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>
6000+ 瀏覽量
