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

HTML DOM フォームの autocomplete プロパティの使い方を徹底解説

HTML DOM の autocomplete プロパティは、form 要素が持つ autocomplete 属性と連動するプロパティです。このプロパティを使うことで、指定したフォームの autocomplete 属性値を取得（参照）したり、設定したりすることができます。

autocomplete 機能は、ユーザーが入力フィールドに文字を入力する際、過去に入力した履歴をもとにブラウザが自動的にテキストを補完してくれるかどうかを制御します。フォーム全体で autocomplete を有効にしている場合でも、特定の入力フィールドだけ無効化することが可能です。逆に、フォーム全体を無効にしていても、個別のフィールドで有効にすることもできます。

構文

autocomplete プロパティを設定する場合の構文は以下の通りです。

formObject.autocomplete = on|off

デフォルト値は「on」であり、ブラウザはユーザーの過去の入力履歴に基づいて値の補完を試みます。「off」に設定した場合は、ブラウザによる自動補完が行われず、ユーザー自身がすべての値を手動で入力する必要があります。

使用例

ここで、autocomplete プロパティの具体的な使用例を見てみましょう。

<!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 = "入力テキストが自動補完されるようになりました";
    }
</script>
</head>
<body>
<h1>Form autocomplete プロパティの例</h1>
<form id="FORM1" autocomplete="off">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>
<br>
<button onclick="changeAuto()">CHANGE</button>
<p id="Sample"></p>
</body>
</html>

出力結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM フォームの autocomplete プロパティの使い方を徹底解説

CHANGE ボタンをクリックし、ユーザー名フィールドに文字を入力すると、次のように変化します。

HTML DOM フォームの autocomplete プロパティの使い方を徹底解説

コードの解説

この例では、まず id=“FORM1” を持ち、autocomplete が「off」に設定されたフォームを作成しています。この状態では、ブラウザによる補完機能が働かないため、ユーザーは自分で値を入力しなければなりません。フォームにはテキストフィールドとパスワードフィールドが含まれています。

<form id="FORM1" autocomplete="off">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>パスワード <input type="password" name="pass"></label>
</form>

次に、クリックされると changeAuto() メソッドを実行する CHANGE ボタンを作成しました。

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

changeAuto() メソッド内では、getElementById() メソッドを使ってフォーム要素を取得し、その autocomplete プロパティを「off」から「on」に変更しています。さらに、id が「Sample」である段落要素の innerHTML プロパティを利用して、変更内容を示すメッセージをユーザーに表示しています。

function changeAuto() {
    document.getElementById("FORM1").autocomplete = "on";
    document.getElementById("Sample").innerHTML = "入力テキストが自動補完されるようになりました";
}

このように、JavaScript から autocomplete プロパティを操作することで、ページを再読み込みすることなく、動的にフォームの自動補完機能のオン・オフを切り替えることができます。ログインフォームなどで利便性とセキュリティのバランスを取りたい場合に活用できる便利なプロパティです。

  1. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要

  2. HTML DOMのTitle textプロパティとは？使い方とサンプルコードを解説

    HTML DOM の text プロパティは、ドキュメント内の <title> 要素が持つテキスト（タイトル文字列）を取得、または設定するために使用されます。このプロパティを活用することで、JavaScript からページタイトルを動的に読み取ったり変更したりすることが可能になります。 構文（シンタックス） テキスト値を取得する場合 titleElementObject.text テキスト値を文字列として設定する場合 titleElementObject.text = string 設定できる値は文字列のみです。指定した文字列がブラウザのタブやお気に入りに表示されるページタイトルと