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

HTMLDOMフォームのオートコンプリートプロパティ

HTML DOMフォームのオートコンプリートプロパティは、フォーム要素のオートコンプリート属性に関連付けられています。 autocompleteプロパティを使用して、指定されたフォームのオートコンプリート属性値を設定または返すことができます。このプロパティは、以前にテキストフィールドに書き込まれたテキストに基づいて、入力フィールドがユーザーによって書き込まれるテキストをオートコンプリートするかどうかを指定します。

フォームでオートコンプリートがオンに設定されている場合、特定の入力フィールドでオートコンプリートプロパティをオフにすることができます。その逆も同様です。

構文

以下は、-

の構文です。

オートコンプリートプロパティを設定します-

formObject.autocomplete = on|off

ここで、「オン」はデフォルトであり、ブラウザは前のテキストに基づいてユーザー値をオートコンプリートしようとします。オフに設定すると、ブラウザはユーザー入力を完了せず、ユーザーは自分で値を入力する必要があります。

例

オートコンプリートプロパティの例を見てみましょう-

<!DOCTYPE html>
<html>
<head>
<style>
   form{
      border:2px solid blue;
      margin:2px;
      padding:4px;
   }
</style>
<script>
   function changeAuto() {
      document.getElementById("FORM1").autocomplete = "on";
      document.getElementById("Sample").innerHTML = "The input text will now be autocomplete
";
   }
</script>
</head>
<body>
<h1>Form autocomplete property example</h1>
<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

出力

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

HTMLDOMフォームのオートコンプリートプロパティ

[変更]ボタンをクリックして、[ユーザー名]フィールドにテキストを入力すると-

HTMLDOMフォームのオートコンプリートプロパティ

上記の例では-

id =“ Form1”でオートコンプリートを“ off”に設定したフォームを作成しました。これは、このテキストをオートコンプリートするために、ユーザーがWebブラウザーの助けを借りずに自分で値を入力する必要があることを意味します。フォームにはテキストフィールドとパスワードフィールドも含まれています-

<form id="FORM1" autocomplete="off">
<label>User Name <input type="text" name="usrN"></label> <br><br>
<label>Password <input type="password" name="pass"></label>
</form>

次に、ユーザーがクリックしたときにchangeAuto（）メソッドを実行するボタンCHANGEを作成しました-

<button onclick="changeAuto()">CHANGE</button>

changeAuto（）メソッドは、getElementById（）メソッドを使用してフォーム要素を取得し、オートコンプリートプロパティを「オフ」から「オン」に設定します。 IDが「Sample」の段落のinnerHTMLプロパティを使用して、ユーザーにテキストを表示することでこの変更を示します-

function changeAuto() {
   document.getElementById("FORM1").autocomplete = "on";
   document.getElementById("Sample").innerHTML = "The input text will now be autocomplete ";
}

  1. HTMLDOMオブジェクトフォームプロパティ

    HTML DOM Object formプロパティは、要素の囲みフォームの参照を返します。 以下は構文です- フォームへの参照を返す オブジェクト ObjectElement.form オブジェクトフォームプロパティの例を見てみましょう − 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Object form</title> <style>    form {       width:70%;   &nbs

  2. HTMLDOMタイトルテキストプロパティ

    HTML DOM Title textプロパティは、ドキュメントの要素の値を設定/返します。 以下は構文です- 文字列値を返す titleElementObject.text テキストを設定する 文字列値に titleElementObject.text = string タイトルテキストの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title id="titleSelect">HTML DOM Title text</title> <style