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

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

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

nameプロパティでできること

nameプロパティを活用することで、次のようなことが実現できます。

  • フォーム送信時に、サーバー側でどの入力欄のデータかを識別できる
  • JavaScriptからフォーム要素へアクセスし、値の取得や変更を行える
  • スクリプト側で動的に要素の名前を書き換えることができる

構文

nameプロパティの設定

searchObject.name = name

nameには、検索フィールドに指定したい名前を記述します。

nameプロパティの取得

let name = searchObject.name

このように記述することで、現在設定されているname属性の値を取得できます。

サンプルコード

それでは、Search nameプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、検索フィールドの名前が変更される仕組みです。

<!DOCTYPE html>
<html>
<body>
<h1>Input Search name プロパティ</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" maxlength="5">
</form>
<p>下のボタンをクリックすると、上の検索フィールドの名前が変わります</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
   function changeName() {
      document.getElementById("SEARCH1").name = "SEARCH_2";
      document.getElementById("Sample").innerHTML = "検索フィールドの名前は SEARCH_2 に変更されました";
   }
</script>
</body>
</html>

実行結果

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

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

その後、「CHANGE NAME」ボタンをクリックすると、以下のように検索フィールドのname属性が「SEARCH_2」に変更され、メッセージが表示されます。

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

まとめ

Input Searchのnameプロパティを使えば、JavaScriptから検索フィールドのname属性を読み書きできます。フォーム送信時のデータ識別や、動的なDOM操作において重要な役割を担うため、フォームを扱うWeb開発ではぜひ押さえておきましょう。

  1. HTML DOM 入力検索フィールドの form プロパティの使い方とサンプルコード

    HTML DOM の Input Search form プロパティは、指定された入力検索フィールド（type=search）を含むフォームへの参照を返すために使用されます。検索フィールドがフォームの外に配置されている場合は、単純に NULL が返されます。なお、このプロパティは読み取り専用です。 構文 input search の form プロパティの構文は以下のとおりです。 searchObject.form サンプルコード HTML DOM Input search form プロパティの具体的な使用例を見てみましょう。 <!DOCTYPE html> <html&g

  2. HTML DOM Input Search の disabled プロパティとは？使い方を解説

    disabled プロパティとはHTML DOM の Input Search disabled プロパティは、検索フィールド（<input type=search>）を無効化するかどうかを設定、または取得するためのプロパティです。ブール値（true / false）を受け取り、true を指定すると要素が無効になり、false を指定すると有効になります。デフォルト値は false です。無効化された検索フィールドは自動的にグレーアウト表示され、クリックや文字入力など、ユーザーによる一切の操作が受け付けられなくなります。構文disabled プロパティを設定する構文は以下のとおり