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

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

HTML DOM の Input URL defaultValue プロパティは、URL入力フィールド（<input type="url">）に対応するデフォルト値（初期値）を取得・設定するためのプロパティです。ユーザーがURL入力欄に文字を入力すると value 属性の値は変化しますが、defaultValue の値は変化しません。

defaultValue プロパティの特徴

  • HTML上で value 属性に指定された初期値を返す
  • ユーザーが入力内容を変更しても、defaultValue の値は元のまま保持される
  • フォームのリセット処理などで元の値に戻したい場合に便利

構文（Syntax）

defaultValue プロパティの構文は以下の通りです。

文字列値を取得する場合

inputURLObject.defaultValue

defaultValue に文字列を設定する場合

inputURLObject.defaultValue = 'string'

サンプルコード（Example）

ここでは、Input URL defaultValue プロパティの具体的な使用例を見てみましょう。以下の例では、ボタンをクリックすると変更されたURLがデフォルト値に戻る仕組みを実装しています。

<!DOCTYPE html>
<html>
<head>
<title>Input URL defaultValue</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-defaultValue</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" size="25" value="https://www.google.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputURL = document.getElementById("URLSelect");
    divDisplay.textContent = 'defaultValue: '+inputURL.defaultValue;
    function getDefaultValue() {
        var currentValue = inputURL.value;
        divDisplay.textContent = 'Value - '+inputURL.value+' resets to - '+inputURL.defaultValue;
        inputURL.value = inputURL.defaultValue;
    }
</script>
</body>
</html>

実行結果（Output）

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

「Reset Default Value」ボタンをクリックする前：

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

URLを変更した状態で「Reset Default Value」ボタンをクリックした後：

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

このように、ユーザーが入力フィールドの値をどれだけ変更しても、defaultValue プロパティを使えば最初に設定されたデフォルト値を簡単に復元できます。

  1. HTML DOM Input URL の value プロパティとは？取得・設定方法を実例付きで解説

    HTML DOM の Input URL value プロパティは、type=url が指定された input 要素の value 属性が定義されている場合に、その値を文字列として返します。さらに、新しい文字列を代入することで、ユーザー側から値を設定（変更）することも可能です。 構文 value プロパティの構文は以下のとおりです。 値を取得する場合 inputURLObject.value 値を設定する場合 inputURLObject.value = 文字列 使用例 Input URL value プロパティの具体的な使い方を、サンプルコードで確認してみましょう。 <!DOCTYPE

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

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