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

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

HTML DOMのInput Email defaultValueプロパティは、メールアドレス入力フィールド（<input type="email">）に設定されたデフォルト値を取得・設定するためのプロパティです。

このプロパティの重要な特徴として、ユーザーが入力フィールドに文字を入力するとvalue属性の値は変化しますが、defaultValueの値は変化しないという点が挙げられます。つまり、defaultValueはHTML上で最初に指定された初期値を保持し続けるため、フォームのリセット処理などに活用できます。

構文

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

値を取得する場合

inputEmailObject.defaultValue

値を設定する場合

inputEmailObject.defaultValue = '文字列'

サンプルコード

ここでは、Input EmailのdefaultValueプロパティを使った具体的な例を見ていきましょう。以下のコードでは、メール入力欄の初期値を表示し、ボタンをクリックすると初期値に戻す処理を実装しています。

<!DOCTYPE html>
<html>
<head>
<title>Input Email 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>Email-defaultValue</legend>
<label for="EmailSelect">User Email :
<input type="email" id="EmailSelect" value="xyz@abc.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var inputEmail = document.getElementById("EmailSelect");
    divDisplay.textContent = 'defaultValue: '+inputEmail.defaultValue;
    function getDefaultValue() {
        var currentValue = inputEmail.value;
        divDisplay.textContent = 'Value - '+inputEmail.value+' resets to - '+inputEmail.defaultValue;
        inputEmail.value = inputEmail.defaultValue;
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、以下のような動作になります。

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

ページ読み込み時には、defaultValueプロパティで取得した初期値「xyz@abc.com」が画面に表示されます。

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

メール入力欄の値を変更した状態

ユーザーがメールアドレスを書き換えると、valueプロパティの値は変更されますが、defaultValueは元の初期値のまま維持されます。

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

「Reset Default Value」ボタンをクリックした後

ボタンをクリックすると、inputEmail.value = inputEmail.defaultValue;によって、変更された値が初期値に戻されます。これにより、defaultValueを利用したリセット機能が実現できていることが確認できます。

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

まとめ

defaultValueプロパティは、HTMLで最初に指定したvalue属性の値を常に保持している点がポイントです。ユーザーの入力によって変わるvalueプロパティと使い分けることで、フォームの初期値管理やリセット処理を簡単に実装できます。

  1. HTML DOM 入力週（Input Week）のdefaultValueプロパティの使い方を解説

    Input Week（週入力）の defaultValue プロパティは、週入力フィールドに対応するデフォルト値を設定・取得するためのプロパティです。value 属性はユーザーが週入力をリセットすると変化しますが、defaultValue の値は変化しません。この性質により、フォームを初期状態に戻す処理などで活用できます。 構文 以下が構文です。 文字列値を取得する場合 inputWeekObject.defaultValue defaultValue に文字列を設定する場合 inputWeekObject.defaultValue = string サンプルコード それでは、Inpu

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

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