<input type="month">
| ブラウザ |
|
|---|---|
| 分類 | フロー・コンテンツ / フレージング・コンテンツ / インタラクティブ・コンテンツ / フォーム関連要素（リスト化、サブミット可能、リセット可能、再関連付け可能、ラベル付け可能） / パルパブル・コンテンツ |
| 利用場所 | フレージング・コンテンツが置ける場所 |
| 内容 | 空 |
input要素に type="month" を指定すると、年月の入力欄を作成できます。
- この属性値（
month）はHTML 5.1で追加されました。
<input type="month" name="example1">
<input type="month" name="example2" value="2012-02">
| 属性 | 値 | ||
|---|---|---|---|
| 任意属性（共通） | |||
type="" |
部品のタイプ | month |
年月の入力欄 |
name="" |
部品の名前 | 文字列 | 部品を識別するための名前 |
value="" |
送信される値 | 年月 | 入力欄の初期値 （書式： YYYY-MM） |
disabled |
部品の無効化 | （disabled） |
値は省略可能 |
form="" |
 フォームとの関連付け |
ID名 | 関連付けるform要素に指定したID名 |
autofocus |
自動フォーカスの指定 |
（autofocus） |
値は省略可能、1つの文書に1つだけ指定可能 |
| 任意属性 | |||
min="" |
入力できる年月の最小値 |
年月 | 最小値 （書式： YYYY-MM） |
max="" |
入力できる年月の最大値 |
年月 | 最大値 （書式： YYYY-MM） |
step="" |
入力できる年月のステップ |
月数 | この値の間隔で入力を可能にする （初期値は 1） |
any |
ステップを設定しない |
autocomplete="" |
オートコンプリート |
on |
オートコンプリートを有効にする |
off |
オートコンプリートを無効にする | ||
list="" |
入力候補のリスト |
ID名 | 関連付けるdatalist要素に指定したID名 |
readonly |
読み取り専用 | （readonly） |
値は省略可能 |
required |
入力必須 |
（required） |
値は省略可能 |
type属性、name属性、value属性、disabled属性、form属性、autofocus属性の詳細については、input要素のページを参考にしてください。
このタイプの特徴
年月を入力するための入力欄です。
（実際の表示例）
このタイプに対応しているブラウザでは、カレンダーを使って年月を入力することができます。
年月の書式
入力する年月、及びvalue属性、min属性、max属性の値は、次の書式で記述する必要があります。
YYYY-MM2012-02
- 年は4桁、月は2桁で入力します。
<input type="month" name="example" value="2012-02">
min属性とmax属性について
min属性とmax属性は、入力できる年月の範囲を指定します。（どちらかのみを指定することも可能です）
- min属性 … 入力できる年月の最小値を指定します。
- max属性 … 入力できる年月の最大値を指定します。
次の例では、2011年～2013年の年月のみが入力可能となります。
<input type="month" name="example" min="2011-01" max="2013-12">
step属性について
step属性は、入力できる年月のステップ（入力値の間隔）を月数で指定します。type="month" の場合は 1 ヶ月が初期値となります。
次の例では
を指定しているので、3ヶ月間隔で入力できることになります。（例：3月、6月、9月 ...）3
<input type="month" name="example" step="3">
min属性を指定している場合は、その年月からのステップとなります。
<input type="month" name="example" min="2012-02" step="3">
値に any を指定すると、ステップは設定されません。
<input type="month" name="example" step="any">
autocomplete属性について
autocomplete属性は、オートコンプリート機能（入力内容の自動補完）を使うかどうかを指定します。
値には on（使う）または off（使わない）を指定します。この属性を省略した場合は、form要素の設定内容が使用されます。（form要素にも指定されていない場合は on の状態がデフォルトとなります）
<input type="month" name="example" autocomplete="off">
- HTML 5.1では、input要素のautocomplete属性に
on/off以外の値も指定できるようになりました（詳しくは仕様書をご覧ください）。これにより、きめ細やかな設定が行えるようになります。
list属性について
list属性は、入力候補リストの表示を指定します。この属性を使用する場合は、datalist要素で入力候補のリストを作成しておく必要があります。
値には、datalist要素に指定したID名を記述します。（datalist要素は、form要素の外に配置することも可能です）
<input type="month" name="example" list="data1">
<datalist id="data1">
<option value="2012-02"></option>
<option value="2012-03"></option>
<option value="2012-04"></option>
</datalist>
- この属性を指定した場合、Chrome（55）ではリストの表示が優先されます（リスト内のその他を選択するとカレンダーが表示される）。また、Opera（12）ではカレンダーによる入力が優先されます（この属性で指定したリストが表示されない）。
readonly属性について
readonly属性は、そのフォーム部品が読み取り専用であることを指定します。
この属性が指定された部品は、書き換えだけができなくなります。選択することは可能で、データも送信されることになります。
<input type="month" name="example" readonly>
- この属性が指定されたフォーム部品は、妥当性のチェックから除外されます。
required属性について
required属性は、そのフォーム部品が入力必須であることを指定します。
<input type="month" name="example" required>
使用例
<p><input type="month" name="example" min="2011-01" max="2013-12"></p>
- 表示例
- 対応しているブラウザでは、2011年～2013年のカレンダーしか選択できなくなります。
<p>デフォルト：<input type="month" name="example1"> （1ヶ月）</p>
<p>3ヶ月を指定：<input type="month" name="example2" step="3"></p>
<p>3ヶ月を指定：<input type="month" name="example3" min="2012-02" step="3"> （最小値あり）</p>
- 表示例
-
デフォルト： （1ヶ月）
3ヶ月を指定：
3ヶ月を指定： （最小値あり）
- 動作確認のため、送信先としてHTMLファイル（現在のページ）を指定しています。
<form method="get" action="input_month.html">
<p><input type="month" name="example" required> <strong>必須</strong></p>
<p><input type="submit" value="送信する"></p>
</form>
- 表示例
- 対応しているブラウザでは、送信時に入力内容の妥当性がチェックされ、不備があればエラーメッセージが表示されます。