JavaScriptによる無効化

2024-04-02

HTMLフォームでオートコンプリートを無効にする方法

autocomplete属性を使用する

これは、フォーム全体または個々の入力フィールドに対してオートコンプリートを無効にする最も簡単な方法です。

フォーム全体

<form autocomplete="off">
  </form>

個々の入力フィールド

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

上記の方法と同様ですが、より明確にオートコンプリートを無効にすることができます。

<form autocomplete="off">
  </form>

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

パスワードフィールドの場合、autocomplete属性にnew-password値を設定することで、パスワード管理ツールによる自動保存を無効にすることができます。

<input type="password" name="password" autocomplete="new-password">

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

const form = document.querySelector('form');
form.autocomplete = 'off';

// 個々の入力フィールド
const input = document.querySelector('input[name="name"]');
input.autocomplete = 'off';

注意事項

autocomplete属性は、すべてのブラウザでサポートされているわけではありません。
autocomplete属性を無効にしても、ユーザーはブラウザの履歴を使用してフォームに入力内容を自動入力することができます。
セキュリティ上の理由から、パスワードフィールドではオートコンプリート機能を無効にすることを推奨します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルコード</title>
</head>
<body>
  <h1>サンプルコード</h1>
  <form autocomplete="off">
    <label for="name">名前:</label>
    <input type="text" name="name" id="name" autocomplete="off">
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" name="email" id="email" autocomplete="off">
    <br>
    <label for="password">パスワード:</label>
    <input type="password" name="password" id="password" autocomplete="new-password">
    <br>
    <button type="submit">送信</button>
  </form>
</body>
</html>

このコードでは、以下の方法でオートコンプリート機能を無効にしています。

form要素にautocomplete属性をoff値で設定して、フォーム全体でオートコンプリート機能を無効にする。

HTMLフォームでオートコンプリート機能を無効にするその他の方法

CSSを使用する

以下のCSSコードを使用して、フォーム全体または個々の入力フィールドのオートコンプリート機能を無効にすることができます。

form {
  autocomplete: off;
}

input {
  autocomplete: off;
}

novalidate属性を使用する

form要素にnovalidate属性を設定すると、ブラウザによる入力内容の検証が無効になります。これにより、オートコンプリート機能も無効になります。

<form novalidate>
  </form>

JavaScriptを使用して、autocomplete属性を動的に変更することで、オートコンプリート機能を無効にすることができます。

const form = document.querySelector('form');

// フォーム送信時にオートコンプリート機能を無効にする
form.addEventListener('submit', () => {
  form.autocomplete = 'off';
});

// 個々の入力フィールドにフォーカスが当たった時にオートコンプリート機能を無効にする
const inputs = document.querySelectorAll('input');
inputs.forEach(input => {
  input.addEventListener('focus', () => {
    input.autocomplete = 'off';
  });
});