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

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

HTML DOM の Input Search form プロパティは、指定された入力検索フィールド（type="search"）を含むフォームへの参照を返すために使用されます。検索フィールドがフォームの外に配置されている場合は、単純に NULL が返されます。なお、このプロパティは読み取り専用です。

構文

input search の form プロパティの構文は以下のとおりです。

searchObject.form

サンプルコード

HTML DOM Input search form プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input search form Property</h1>
<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>下のボタンをクリックするとフォームのidを取得できます</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
    function formId() {
        var P=document.getElementById("SEARCH1").form.id;
        document.getElementById("Sample").innerHTML = "検索フィールドを含むフォームのidは: "+P ;
    }
</script>
</body>
</html>

実行結果

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

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

GET FORM ボタンをクリックすると、以下のようにフォームの id が出力されます。

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

コードの解説

上のサンプルでは、以下のような処理を行っています。

1. 検索フィールドの作成

まず、type="search"、id="SEARCH1"、name="fruits" を持つ <input> 要素を作成しています。この検索フィールドは、id 属性が「FORM_1」に設定されたフォームの内側に配置されています。

<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>

2. ボタンの配置

次に、ユーザーがクリックしたときに formId() メソッドを実行する「GET FORM」ボタンを作成しています。

<button type="button" onclick="formId()">GET FORM</button>

3. formId() メソッドの処理

formId() メソッドでは、getElementById() メソッドを使って type="search" の入力フィールドを取得し、その検索フィールドを含むフォームオブジェクトの id プロパティの値を取得します。取得した値は変数 P に代入され、innerHTML プロパティを通じて id が「Sample」の段落内に表示されます。

function formId() {
    var P=document.getElementById("SEARCH1").form.id;
    document.getElementById("Sample").innerHTML = "検索フィールドを含むフォームのidは: "+P ;
}

まとめ

  • form プロパティは、検索フィールドを含むフォームへの参照を返します。
  • 検索フィールドがどのフォームにも属していない場合は null が返ります。
  • 読み取り専用のプロパティのため、JavaScript から値を設定することはできません。
  • フォームの操作やバリデーション処理を行う際に、所属フォームの特定に役立ちます。
  1. HTML DOM Input Search の disabled プロパティとは？使い方を解説

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

  2. HTML DOM Input Search の defaultValue プロパティとは？設定・取得方法をわかりやすく解説

    HTML DOM の Input Search defaultValue プロパティは、検索フィールド（type=search）の初期値（デフォルト値）を設定または取得するために使用されます。要素の defaultValue とは、value 属性に割り当てられた値のことを指します。defaultValue プロパティと value プロパティの違いは次の通りです。defaultValue プロパティは元々設定されていたデフォルト値を保持し続けるのに対し、value プロパティはユーザーが検索フィールドに入力した内容に応じて変化します。この違いを理解しておくことが、フォーム操作において重要なポ