如何在HTML中使用月份輸入類型？-html教學-PHP中文網

首頁

web前端

html教學

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

PHPz

Aug 20, 2023 pm 08:21 PM

html月輸入類型

In HTML, a form comprises of various elements which helps in making a user interface in a web page. Using which we can collect different nature of nature.

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

#One of the commonly used control is

Month

control i.e.

這個控制項基本上為使用者提供了一個類似日曆的下拉式選單，使用者可以從中選擇或選擇月份和年份。

月份

控制項可讓您以 YYYY-MM 的格式選擇日期，其中 YYYY 表示年份，MM 表示月份。

讓我們來看一個簡單的範例，使用

Month

控制項。範例

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

Executing the code given above, a month control will be displayed on the page.

When you click on the calendar icon on the right side of the control, it will open the complete month calendar like this −

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

########## ###一旦下拉式選單打開，您可以從日曆中選擇月份和年份，或者您可以在控制項中輸入月份和年份。 ### ###Once the month and year is selected, it will get stored in String type of value.### ###Let us create a program to display the selected month and year from the control using JavaScript.######Example###

<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>

###In this program, we have used <script> tag to write JavaScript code in which a function is created to display the selected month when onchange() event is triggered. onchange event will be firedueen a date valueen a date value. the control. document.write() will display the value on the next page. We have displayed the date of admission in the formatted output by using <HTML> formatting tags.### ######It is displaying date value in YYYY-MM format.############# ###我們也可以在點擊提交按鈕時顯示輸出。在這種情況下，我們將使用提交按鈕的onclick()事件，而不是onchange()。 ######範例### <pre class='brush:php;toolbar:false;'><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> </pre> ###We can also set the default value of month and year which should be displayed when the web page gets loaded in the browser. To do so, we can use value attribute in <##gt; tag.###gt; tag.##例子### <pre class='brush:php;toolbar:false;'><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> </pre> ###Once this program is executed, it will show “December, 1980” as the default value in the month control.### ###接下來是非常有趣的部分，那就是設定日期範圍，這意味著使用者只能輸入範圍內的日期值，否則程式會顯示錯誤訊息。 ######範例### <pre class='brush:php;toolbar:false;'><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> </pre> ###In this program, you can observe that only December month (year 1980) is active and others are disabled and similarly when you type the year 1981, it will show you hs upto Novave be year uple#. ###If user types the invalid month or year name, it will show an error message like this −###############We can also make use of step attribute using whichwe ####We can also make use of step attribute using whichwe ####We few months for the given year while setting the date range. Look at the example shown below of an event registration form where assuming that a particular event is falling under specific months.######Example### <pre class='brush:php;toolbar:false;'><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> </pre>###</script>

以上是如何在HTML中使用月份輸入類型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML：結構，CSS：樣式，JavaScript：行為Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來：網絡設計的發展和趨勢Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

See all articles