HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのmonth入力タイプの使い方を徹底解説！月と年を選択するフォームの作成方法

HTMLのmonth入力タイプとは？

HTMLで月の入力フィールドを作成するには、<input type="month"> を使用します。この入力タイプを利用することで、ユーザーは「月」と「年」を簡単に選択できるようになります。

month入力タイプにフォーカスすると、日付選択用のポップアップカレンダーが自動的に表示されるため、ユーザーはキーボードで直接入力しなくても、直感的な操作で月と年を指定できます。誕生日の月や契約開始月など、年月だけを取得したい場面で非常に便利です。

注意点：month入力タイプは、FirefoxおよびInternet Explorerではサポートされていません。Google Chromeなどの対応ブラウザでのみ正しく動作します。クロスブラウザ対応が必要な場合は、代替のJavaScriptライブラリ（例：jQuery UI Datepickerなど）の導入を検討しましょう。

HTMLのmonth入力タイプの使い方を徹底解説！月と年を選択するフォームの作成方法

month入力タイプのサンプルコード

以下のコードを実行すると、HTMLでmonth入力タイプを使用する方法を実際に確認できます。フォームには学生名と生まれた月・年を入力するフィールドが含まれており、送信ボタンを押すことで入力値を取得できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML input month</title>
   </head>
   <body>
      <form action = "" method = "get">
         Details:<br><br>
         Student Name<br><input type="name" name="sname"><br>
         Month and Year of Birth<br><input type="month" name="bmonth"><br>
         <input type="submit" value="Submit">
      </form>
   </body>
</html>

上記の例では、<input type="month"> の部分が月と年の選択フィールドになります。対応ブラウザで表示すると、クリック時にカレンダーピッカーが立ち上がり、月と年を選択できることが確認できます。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTML DOM の input month 型（type）プロパティの使い方を解説

    HTML DOM の input month 型（type）プロパティは、HTML ドキュメント内にある「月」入力フィールド（<input type=month>）の type 属性の値を取得するために使用されます。このプロパティを読み取ることで、対象の入力要素がどの種類（type）であるかをプログラムから確認できます。構文type プロパティの基本的な構文は以下のとおりです。object.typeサンプルコードここでは、HTML DOM の input month 型プロパティを使った具体的な例を見ていきましょう。ボタンをクリックすると、画面上に入力フィールドの type 値が表