コンテンツにスキップ

HTML Living Standard/autocomplete属性

出典: フリー教科書『ウィキブックス(Wikibooks)』

autocomplete属性

[編集]

autocomplete属性は、フォーム要素や入力フィールドに対して、ブラウザが入力補完を提供するかどうかを指示するための属性です。この属性を使用することで、ユーザー体験を向上させたり、意図しない補完を防止することができます。

基本構文

[編集]
  
<input type="text" autocomplete="on">  
<input type="password" autocomplete="off">

autocomplete属性の値には以下を指定できます:

  • on:入力補完を有効にします(デフォルト値)。
  • off:入力補完を無効にします。

効果

[編集]

autocomplete属性を指定することで、以下の動作が適用されます:

  • onの場合、ブラウザは過去に入力されたデータや保存された情報を基に補完候補を表示します。
  • offの場合、ブラウザは補完候補を表示しません(ただし、ブラウザや設定によって無効化が完全に機能しない場合があります)。

使用例

[編集]

以下は、autocomplete属性の使用例です。

ユーザー名とパスワード入力で補完を有効化

[編集]
  
<form action="/submit" method="post">  
  <label for="username">ユーザー名:</label>  
  <input type="text" id="username" name="username" autocomplete="on">  

  <label for="password">パスワード:</label>  
  <input type="password" id="password" name="password" autocomplete="on">  

  <button type="submit">送信</button>  
</form>

個人情報入力で補完を無効化

[編集]
  
<form action="/submit" method="post" autocomplete="off">  
  <label for="name">氏名:</label>  
  <input type="text" id="name" name="name" autocomplete="off">  

  <label for="email">メールアドレス:</label>  
  <input type="email" id="email" name="email" autocomplete="off">  

  <button type="submit">送信</button>  
</form>

この例では、ブラウザによる補完が完全に無効化されます。

注意点

[編集]
  • autocomplete="off" を指定しても、ブラウザの自動入力機能が完全に無効化されない場合があります(特にパスワードやクレジットカード情報に関して)。
  • セキュリティが重要な場合(例: 公共のコンピュータでの使用)には、入力補完の設定に加えて、適切なセキュリティ対策を講じる必要があります。
  • 入力補完の使用により、入力ミスが減少し、ユーザーの利便性が向上するため、必要に応じて有効化することを推奨します。

互換性

[編集]
互換性
ブラウザ サポート状況
Chrome 対応
Edge 対応
Firefox 対応
Safari 対応
Opera 対応

関連項目

[編集]

参考文献

[編集]