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

HTML DOM 入力月（month）の name プロパティとは？取得・変更方法を解説

HTML DOM の入力月（input month）の name プロパティは、HTML 文書内で type="month" が指定された入力フィールドの name 属性の値を取得および変更するために使用されます。

構文

name プロパティの基本的な構文は以下のとおりです。

1. name 属性の値を取得する場合

object.name

2. name 属性の値を変更する場合

object.name = "text"

設定できる値は文字列で、フォーム送信時にサーバーへ渡されるフィールド名として機能します。

サンプルコード

それでは、HTML DOM の入力月 name プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    html{
        height:100%;
    }
    body{
        text-align:center;
        color:#fff;
        background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
        center/cover no-repeat;
        height:100%;
    }
    p{
        font-weight:700;
        font-size:1.2rem;
    }
    input{
        width:35%;
        border:2px solid #fff;
        background-color:transparent;
        color:#fff;
        font-weight:bold;
        padding:8px;
    }
    .btn{
        background:#0197F6;
        border:none;
        height:2rem;
        border-radius:2px;
        width:35%;
        margin:2rem auto;
        display:block;
        color:#fff;
        outline:none;
        cursor:pointer;
    }
    .show{
        font-size:1.5rem;
        font-weight:bold;
    }
</style>
</head>
<body>
<h1>DOM Input month name プロパティの例</h1>
<input type="month" class="monthInput" value="2019-02" name="I'm Month input
field!! ">
<p>こんにちは。私の名前（name属性）を見てみたくありませんか？</p>
<p>その場合はボタンをクリックしてください</p>
<button onclick="showName()" class="btn">Show Name</button>
<div class="show"></div>
<script>
    function showName() {
        var monthInput = document.querySelector(".monthInput");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML=monthInput.name;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような出力が得られます。

HTML DOM 入力月（month）の name プロパティとは？取得・変更方法を解説

画面に表示された「Show Name」ボタンをクリックすると、JavaScript の showName() 関数が実行され、月入力フィールド（type="month"）に設定されている name 属性の値が取得されて画面上に表示されます。

HTML DOM 入力月（month）の name プロパティとは？取得・変更方法を解説

ポイントまとめ

  • object.name で現在設定されている name 属性の値を参照できます。
  • object.name = "任意の文字列" で動的に name 属性を書き換えられます。
  • name 属性はフォーム送信時にキーとして使われるため、JavaScript から柔軟に制御できると便利です。
  1. HTML DOM Input Timeのnameプロパティとは？取得・設定方法を実例で解説

    HTML DOM の Input Time name プロパティは、<input type=time> 要素の name 属性の値を文字列として返すプロパティです。値の取得だけでなく、新しい文字列を代入することで name 属性を動的に変更することも可能です。構文name プロパティの基本的な構文は以下のとおりです。値を取得する場合inputTimeObject.name値を設定する場合inputTimeObject.name = 文字列使用例ここでは、Input Time の name プロパティを使った具体的なサンプルコードを紹介します。ボタンのクリックによって name 属性

  2. HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

    HTML DOMのInput URLオブジェクトにおけるnameプロパティは、入力フィールド(type=url)のname属性の値を文字列として返します。また、新しい文字列を代入することで、name属性の値を変更することも可能です。 nameプロパティとは name属性は、フォーム送信時にサーバーへデータを渡す際の識別子として利用される重要な属性です。JavaScriptからこの値を動的に取得したり書き換えたりすることで、柔軟なフォーム操作が実現できます。 構文 nameプロパティの基本的な構文は以下の通りです。 値を取得する場合 inputURLObject.name 値を設定する場合 in