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

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

HTML DOM の Input Search defaultValue プロパティは、検索フィールド（type="search"）の初期値（デフォルト値）を設定または取得するために使用されます。要素の defaultValue とは、value 属性に割り当てられた値のことを指します。

defaultValue プロパティと value プロパティの違いは次の通りです。defaultValue プロパティは元々設定されていたデフォルト値を保持し続けるのに対し、value プロパティはユーザーが検索フィールドに入力した内容に応じて変化します。この違いを理解しておくことが、フォーム操作において重要なポイントとなります。

構文（シンタックス）

defaultValue プロパティを設定するための構文は以下の通りです。

searchObject.defaultValue = value

ここで「value」には、検索フィールドに設定したいデフォルト値を指定します。

サンプルコード

それでは、Search defaultValue プロパティの具体的な使用例を見ていきましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>CHANGE ボタンをクリックすると、上の検索フィールドのデフォルト値が変更されます</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<p id="Sample"></p>
<script>
    function changeDefault() {
        document.getElementById("SEARCH1").defaultValue="APPLE";
        var P=document.getElementById("SEARCH1").defaultValue;
        document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
    }
</script>
</body>
</html>

実行結果

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

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

CHANGE ボタンをクリックすると：

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

コードの解説

この例では以下のような処理を行っています。

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

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

次に、ユーザーがクリックすると changeDefault() メソッドを実行する CHANGE ボタンを作成しています。

<button type="button" onclick="changeDefault()">CHANGE</button>

changeDefault() メソッドでは、getElementById() メソッドを使って type="search" の入力フィールドを取得し、その defaultValue プロパティに「APPLE」を設定します。続けて、再度 getElementById() メソッドを使用して検索フィールドの defaultValue プロパティの値を取得し、変数 P に代入します。最後に、この変数の内容を innerHTML プロパティを使って、id="Sample" の段落内に表示しています。

function changeDefault() {
    document.getElementById("SEARCH1").defaultValue="APPLE";
    var P=document.getElementById("SEARCH1").defaultValue;
    document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to "+P ;
}

まとめ

defaultValue プロパティを使えば、JavaScript から検索フィールドの初期値を動的に変更したり取得したりできます。value プロパティとの違いを正しく理解し、フォームのリセット動作や初期状態の管理などに活用しましょう。

  1. HTML DOM Input Searchのrequiredプロパティの使い方を解説

    HTML DOMのInput Searchオブジェクトにおけるrequiredプロパティは、<input>要素のrequired属性と連動するプロパティです。フォームがサーバーへ送信される前に、検索フィールドの入力が必須かどうかを設定・取得するために使用されます。このプロパティを利用することで、ユーザーがrequired属性付きの検索フィールドを空欄のままにした場合、フォームの送信を防ぐことができます。構文requiredプロパティの構文は以下の通りです。プロパティの設定searchObject.required = true|falsetrueを指定すると、フォーム送信前に検索フ

  2. HTML DOM Input Text defaultValue プロパティの使い方を解説

    Input Text defaultValue プロパティとはHTML DOM の Input Text defaultValue プロパティは、テキストフィールドのデフォルト値(defaultValue)を設定または取得するために使用されるプロパティです。要素の defaultValue とは、HTML の value 属性に指定された値を指します。value プロパティとの違いは、defaultValue プロパティが最初に指定された元のデフォルト値を保持し続けるのに対し、value プロパティの値はユーザーが入力フィールドに入力した内容に応じて変化するという点です。つまり、ユーザーがテキ