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

HTML DOM Input Number の name プロパティとは？取得・変更方法を解説

HTML DOM の Input Number の name プロパティは、HTML ドキュメント内の <input type="number"> で表される数値入力フィールドの name 属性の値を取得・変更するためのプロパティです。
name 属性は、フォーム送信時に入力データを識別する役割を持つ重要な属性です。このプロパティを使えば、JavaScript からその値を動的に読み取ったり書き換えたりすることができます。

構文

name プロパティの基本構文は次の通りです。

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

object.name

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

object.name = "text"

サンプルコード

それでは、HTML DOM Input Number の name プロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると数値入力フィールドの 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 Number の name プロパティの例</h1>
<input type="number" class="numberInput" value="20102" name="私はNumber型の入力フィールドです!!">
<p>こんにちは！ 私の名前（name 属性）を見てみませんか？</p>
<p>よかったら、下のボタンをクリックしてみてください</p>
<button onclick="showName()" class="btn">名前を表示</button>
<div class="show"></div>
<script>
    function showName() {
        var numInput = document.querySelector(".numberInput");
        var showMsg = document.querySelector(".show");
        showMsg.innerHTML = numInput.name;
    }
</script>
</body>
</html>

実行結果

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

HTML DOM Input Number の name プロパティとは？取得・変更方法を解説

「名前を表示」ボタンをクリックすると、type="number" の入力フィールドに設定された name 属性の値が画面下部に表示されます。

HTML DOM Input Number の name プロパティとは？取得・変更方法を解説

ポイントまとめ

  • name プロパティを読み取ると、対象の入力フィールドの name 属性の現在値が文字列として返されます。
  • name プロパティに新しい文字列を代入すると、name 属性の値を動的に変更できます。
  • name 属性はフォーム送信時にデータの識別に使われるため、JavaScript での動的なフォーム制御において非常に有用です。
  1. HTML DOM Input URLのnameプロパティの使い方と取得・設定方法

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

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

    Input Week の name プロパティとはHTML DOM の Input Week name プロパティは、type=week の入力要素（<input type=week>）に name 属性が定義されている場合に、その値を文字列として返します。さらに、このプロパティを使って新しい文字列を設定することも可能です。name 属性はフォーム送信時にデータを識別するために使われる重要な属性であり、JavaScript から動的に参照したり変更したりできることで、柔軟なフォーム操作が実現できます。構文name プロパティの基本的な構文は以下の通りです。値を取得する場合input