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

HTMLDOM入力検索defaultValueプロパティ

HTML DOM入力検索defaultValueプロパティは、検索フィールドのdefaultValueを設定または取得するために使用されます。要素のdefaultValueは、value属性に割り当てられた値です。 valueプロパティとdefaultValueプロパティの違いは、defaultValueプロパティは元のデフォルト値を保持し、valueプロパティ値は検索フィールドへのユーザー入力に基づいて変更されることです。

構文

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

searchObject.defaultValue = value

ここで、「value」は検索フィールドのデフォルト値です。

例

SearchdefaultValueプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<body>
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO">
</form>
<p>Change the above search field default value by clicking on the CHANGE button</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>

出力

これにより、次の出力が生成されます-

HTMLDOM入力検索defaultValueプロパティ

変更ボタンをクリックすると-

HTMLDOM入力検索defaultValueプロパティ

上記の例では-

最初に、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（）メソッドを使用して、タイプ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 ;
}
に変更されました
  1. HTMLDOM入力検索に必要なプロパティ

    HTMLDOM入力のSearchrequiredプロパティは、要素のrequired属性に関連付けられています。必須プロパティは、フォームがサーバーに送信される前に検索フィールドに入力する必要があるかどうかを設定して返すために使用されます。これにより、必要な属性を持つ検索フィールドがユーザーによって空のままにされた場合、フォームは送信されません。 構文 以下は、-の構文です。 必要なプロパティの設定- searchObject.required = true|false ここで、trueは検索フィールドに入力する必要があることを表し、falseはフォームを送信する前にフィールドに入力する

  2. HTMLDOM入力テキストdefaultValueプロパティ

    HTML DOM入力テキストdefaultValueプロパティは、テキストフィールドのdefaultValueを設定または取得するために使用されます。要素のdefaultValueは、value属性に割り当てられた値です。 valueプロパティとdefaultValueプロパティの違いは、後者は指定された元のデフォルト値を保持し、valueプロパティ値は入力フィールドへのユーザー入力に基づいて変更されることです。 構文 以下は、defaultValueプロパティを設定するための構文です- textObject.defaultValue = value ここで、「value」はテキストフィー