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

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

HTML DOMのInput Color formプロパティは、カラーピッカー（<input type="color">）が属しているフォーム（form要素）への参照を取得するために使用されます。このプロパティを読み取ることで、入力フィールドがどのフォームに囲まれているかをJavaScriptから簡単に判別できます。

構文

Input Color formプロパティの基本的な構文は以下の通りです。

  • フォームオブジェクトへの参照を返す場合：
inputColorObject.form

戻り値として、該当するカラー入力フィールドを含むフォームオブジェクトが返されます。もしカラー入力がどのフォームにも属していない場合は、nullが返されます。

サンプルコード

ここでは、Input Color formプロパティを使って、カラー入力フィールドが属するフォームのIDを取得し、画面に表示する例を紹介します。

<!DOCTYPE html>
<html>
<head>
<title>Input Color Form</title>
</head>
<body>
<form id="formForColorsInput">
Color Picker: <input type="color" id="Color" >
</form>
<button onclick="getFormID()">Get Form ID</button>
<div id="divDisplay"></div>
<script>
   function getFormID() {
      var inputColor = document.getElementById("Color");
      var divDisplay = document.getElementById("divDisplay");
      divDisplay.textContent = 'Form ID for color input: '+inputColor.form.id;
   }
</script>
</body>
</html>

コードの解説

  • <form id="formForColorsInput">：カラー入力フィールドを囲む親フォームです。
  • <input type="color">：カラーピッカーを表示する入力フィールドです。
  • getFormID()関数：ボタンがクリックされると実行され、inputColor.form.idによってフォームのIDを取得します。
  • textContent：取得したフォームIDをdiv要素内に出力します。

実行結果

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

「Get Form ID」ボタンをクリックする前：

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

「Get Form ID」ボタンをクリックした後：

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

ボタンをクリックすると、「Form ID for color input: formForColorsInput」というテキストが表示され、カラー入力フィールドが属するフォームのIDが正しく取得できていることが確認できます。

まとめ

Input Color formプロパティを使用すると、JavaScriptからカラーピッカーが所属するフォーム要素へアクセスできます。フォームの送信先やバリデーション処理など、フォームに関連する動的な操作を行いたい場合に便利なプロパティです。なお、対応ブラウザとしてはChrome、Firefox、Edge、Operaなどの主要なモダンブラウザで動作します。

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

    HTML DOMのInput Text formプロパティは、対象となるテキスト入力フィールド（input type=text）が属しているフォームへの参照を取得するために使用されます。もしテキストフィールドがどのフォームにも含まれていない場合は、nullが返されます。なお、このプロパティは読み取り専用です。つまり、値を参照することはできますが、JavaScriptから直接書き換えることはできません。構文Input Text formプロパティの基本的な構文は以下のとおりです。textObject.formサンプルコードここでは、実際にformプロパティを使って、テキストフィールドが所属するフ

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

    HTML DOMのInput Radioオブジェクトにおけるformプロパティは、指定されたラジオボタンが属するフォーム（form要素）への参照を返すために使用されます。もしラジオボタンがどのフォームにも含まれていない場合は、NULLを返します。このプロパティは読み取り専用です。 構文 Input Radioのformプロパティの構文は以下のとおりです。 radioObject.form 使用例 ここで、Input Radioのformプロパティを使った具体的な例を見てみましょう。 <!DOCTYPE html> <html> <body> <h1&g