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

HTML DOM Input Color の name プロパティの使い方を解説

HTML DOM Input Color の name プロパティとは

HTML DOM の Input Color name プロパティは、カラーピッカー（<input type="color">）要素の name 属性の値を文字列として返します。また、新しい文字列を代入することで、name 属性の値を動的に変更することも可能です。

name 属性は、フォーム送信時にデータを識別するための重要な属性であり、JavaScript から柔軟に操作できることで、動的なフォーム構築や条件分岐処理に役立ちます。

構文

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

値を取得する場合

inputColorObject.name

この構文は、name 属性に設定されている文字列値を返します。

値を設定する場合

inputColorObject.name = '文字列'

この構文は、name 属性に指定した文字列を新しく設定します。

サンプルコード

実際に Input Color name プロパティを使用した例を見てみましょう。ボタンをクリックすると、name 属性の値が「primaryColor」から「secondaryColor」に変更される仕組みです。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Name</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" name="primaryColor">
</form>
<button onclick="changeNameValue()">Change name value</button>
<div id="divDisplay"></div>
<script>
    var inputColor = document.getElementById("Color");
    var divDisplay = document.getElementById("divDisplay");
    divDisplay.textContent = 'Name of color input: '+inputColor.name;
    function changeNameValue() {
        if(inputColor.name == 'primaryColor'){
            inputColor.name = 'secondaryColor';
            divDisplay.textContent = 'Name of color input: '+inputColor.name;
        }
    }
</script>
</body>
</html>

コードのポイント

  • getElementById() メソッドでカラーピッカー要素を取得しています。
  • ページ読み込み時に、textContent を使って現在の name 属性値を画面に表示します。
  • ボタンクリック時に実行される changeNameValue() 関数内で、条件分岐によって name 値を「secondaryColor」へ書き換えています。

実行結果

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

「Change name value」ボタンをクリックする前：

HTML DOM Input Color の name プロパティの使い方を解説

初期状態では、「Name of color input: primaryColor」というテキストが表示されます。

「Change name value」ボタンをクリックした後：

HTML DOM Input Color の name プロパティの使い方を解説

ボタンをクリックすると、name 属性の値が書き換えられ、「Name of color input: secondaryColor」と表示内容が更新されます。

まとめ

Input Color の name プロパティを使えば、カラーピッカーの name 属性値を JavaScript から自由に取得・変更できます。フォームの動的な制御や、複数の入力フィールドを扱う場面でぜひ活用してみてください。

  1. HTML DOM Input Searchのnameプロパティとは？使い方をサンプルコードで解説

    HTML DOMのInput Search nameプロパティは、検索フィールド（<input type=search>）のname属性を設定または取得するために使用されるプロパティです。name属性は、フォームデータがサーバーへ送信された後に、そのデータを識別する役割を果たします。また、JavaScriptからもname属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。 nameプロパティでできること nameプロパティを活用することで、次のようなことが実現できます。 フォーム送信時に、サーバー側でどの入力欄のデータかを識別できる JavaScriptから

  2. HTML DOM Input Submit の name プロパティとは？使い方とサンプルコードを解説

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン