プライバシーを守るために！HTMLフォームのオートコンプリート機能を無効化しよう

2024-04-04

ブラウザのオートコンプリートを無効にする方法

HTMLの input タグには autocomplete 属性があり、この属性を設定することで、オートコンプリート機能を無効化できます。

<input type="text" name="username" autocomplete="off">

上記の場合、username フィールドではオートコンプリート機能が動作しなくなります。

autocomplete 属性の値

off: オートコンプリート機能を無効にする
username: ユーザー名のみオートコンプリート
password: パスワードのみオートコンプリート
email: メールアドレスのみオートコンプリート
tel: 電話番号のみオートコンプリート
credit-card: クレジットカード番号のみオートコンプリート
street-address: 住所のみオートコンプリート
address-line1: 住所1行目のみオートコンプリート

JavaScriptを使用して、オートコンプリート機能を無効にすることもできます。

const inputElement = document.getElementById('username');
inputElement.autocomplete = 'off';

ブラウザ設定

多くのブラウザでは、設定画面からオートコンプリート機能を無効化できます。

Chrome

Chromeを開きます。
右上の3点リーダーをクリックします。
「設定」を選択します。
「パスワード」>「自動ログイン」の項目で「パスワードを保存できるようにする」をオフにします。

Firefox

Firefoxを開きます。
「プライバシーとセキュリティ」タブを選択します。
「履歴」>「フォームデータと履歴」の項目で「オートコンプリート」をオフにします。

Safari

Safariを開きます。
「パスワード」タブを選択します。
「自動入力」の項目で「ユーザー名とパスワード」をオフにします。

Edge

Edgeを開きます。

これらの方法を組み合わせることで、より詳細な制御が可能になります。

ブラウザのオートコンプリート機能は便利ですが、プライバシーの観点から無効化したい場合もあります。上記の方法を参考に、必要に応じてオートコンプリート機能を無効化してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>オートコンプリート無効化サンプル</title>
</head>
<body>
  <form action="/action_page.php" method="post">
    <label for="username">ユーザー名:</label>
    <input type="text" id="username" name="username" autocomplete="off">
    <br>
    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" autocomplete="off">
    <br>
    <input type="submit" value="送信">
  </form>
</body>
</html>

JavaScriptを使用してオートコンプリート機能を無効にする方法も紹介しましたが、より詳細な情報は上記の参考資料を参照してください。
ブラウザ設定からオートコンプリート機能を無効にする方法も紹介しましたが、各ブラウザの設定画面の場所は異なる場合があります。詳細は各ブラウザのヘルプドキュメントを参照してください。