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

HTML DOMのInput Monthオブジェクトとは？使い方・プロパティ・メソッドを徹底解説

HTML DOMのInput Monthオブジェクトは、HTMLの <input type="month"> 要素をJavaScriptから操作するためのインターフェースです。この要素を使うと、年と月を選択できる入力フィールドを簡単に作成できます。

ここでは、Input Monthオブジェクトの作成方法、主なプロパティやメソッド、そして実際のコード例まで詳しく解説します。

Input Monthオブジェクトの作成方法

Input Monthオブジェクトは、document.createElement() メソッドを使って動的に生成できます。基本的な構文は以下の通りです。

var monthInput = document.createElement("INPUT");
monthInput.setAttribute("type", "month");

まず createElement() で input 要素を作成し、続いて setAttribute() で type 属性に「month」を指定することで、月選択用の入力フィールドが完成します。

Input Monthオブジェクトの主なプロパティ

HTML DOMのInput Monthオブジェクトには、以下のような便利なプロパティが用意されています。これらを活用することで、フィールドの値や状態を柔軟に制御できます。

プロパティ説明
autocomplete月入力フィールドの autocomplete 属性の値を取得・設定します。
autofocusページ読み込み時に、その月入力フィールドへ自動的にフォーカスを当てるかどうかを取得・設定します。
disabled月入力フィールドが無効化されているかどうかを取得・設定します。
defaultValue月入力フィールドのデフォルト値（初期値）を取得・設定します。
formHTMLドキュメント内で、その月入力フィールドを含む form 要素への参照を返します。
listその月入力フィールドに関連付けられた datalist 要素への参照を返します。
max月入力フィールドの max 属性（選択可能な最大の月）の値を取得・設定します。
min月入力フィールドの min 属性（選択可能な最小の月）の値を取得・設定します。
name月入力フィールドの name 属性の値を取得・設定します。
readOnly月入力フィールドが読み取り専用かどうかを取得・設定します。
requiredフォーム送信前に、その月入力フィールドの入力が必須かどうかを取得・設定します。
step月入力フィールドの step 属性（値の刻み幅）の値を取得・設定します。
type月入力フィールドの type 属性の値を返します。
value月入力フィールドの value 属性の内容を取得・設定します。

Input Monthオブジェクトのメソッド

Input Monthオブジェクトには、フィールドの値を増減させるための2つのメソッドが用意されています。

メソッド説明
stepUp()引数で指定した数だけ、月入力フィールドの値を増加させます。
stepDown()引数で指定した数だけ、月入力フィールドの値を減少させます。

実装例：Input Monthオブジェクトのサンプルコード

それでは、実際にHTML DOMのInput Monthオブジェクトを使ったサンプルを見てみましょう。ボタンをクリックすると、月入力フィールドが動的に生成されるシンプルな例です。

<!DOCTYPE html>
<html>
<head>
<style>
    body{
        text-align:center;
        background-color:#fff;
        color:#0197F6;
    }
    h1{
        color:#23CE6B;
    }
    .btn{
        background-color:#fff;
        border:1.5px dashed #0197F6;
        height:2rem;
        border-radius:2px;
        width:60%;
        margin:2rem auto;
        display:block;
        color:#0197F6;
        outline:none;
        cursor:pointer;
    }
</style>
</head>
<body>
<h1>DOM Input Monthオブジェクトの例</h1>
<button onclick="createMonthField()" class="btn">月入力フィールドを作成する</button>
<script>
    function createMonthField() {
        var monthInput = document.createElement("INPUT");
        monthInput.setAttribute("type", "month");
        monthInput.setAttribute("value", "2019-07");
        document.body.appendChild(monthInput);
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のように表示されます。

HTML DOMのInput Monthオブジェクトとは？使い方・プロパティ・メソッドを徹底解説

「月入力フィールドを作成する」ボタンをクリックすると、ボタンの下に新しい月入力フィールドが生成されます。

HTML DOMのInput Monthオブジェクトとは？使い方・プロパティ・メソッドを徹底解説

まとめ

HTML DOMのInput Monthオブジェクトを使えば、<input type="month"> の月入力フィールドをJavaScriptから自由に操作できます。min や max による範囲指定、required や readOnly による入力制御、stepUp()/stepDown() による値の増減など、フォームのユーザビリティ向上に役立つ機能が豊富に揃っています。日付関連のフォームを実装する際には、ぜひ活用してみてください。

  1. HTML DOM HRオブジェクトとは？作成方法と使い方を解説

    HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme

  2. HTML DOM Ulオブジェクトとは？<ul>要素の操作方法とサンプルコードを解説

    HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。 <ul> 要素の作成方法 新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。 var ulObject = document.createElement(UL) HTML5で非推奨となったプロパティ ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注