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

HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法

はじめに

HTMLの入力フィールドでは、ブラウザのオートコンプリート（自動補完）機能によって、過去に入力した内容が候補として表示されることがあります。この機能を無効にしたい場合は、<input>要素にautocomplete属性を指定します。「off」を設定すれば無効になり、「on」を設定すれば有効になります。

サンプルコード

以下は、姓の入力欄ではオートコンプリートを無効にし、名の入力欄では有効にする例です。

<!DOCTYPE html>
<html>
<head>
<style>
    input{
        font-size: 18px;
        padding: 10px;
        margin: 10px;
        border:1px solid grey;
    }
</style>
</head>
<body>
<h1>Autocomplete on/off Example</h1>
<form>
First name: <input type="text" name="firstName" autocomplete="off"><br>
Last name: <input type="text" name="lastName" autocomplete="on"><br>
<input type="submit">
</form>
<h2>Type in the above fields and refresh page to see autocomplete at work</h2>
</body>
</html>

実行結果

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

HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法

フォームを一度送信した後、再び入力フィールドに文字を入力すると、オートコンプリートの候補が表示されることを確認できます。

HTML入力フィールドのオートコンプリート（自動補完）を無効にする方法

autocomplete属性のポイント

  • autocomplete="off"：自動補完を無効にします。クレジットカード番号やセキュリティに関わる入力欄などに便利です。
  • autocomplete="on"：自動補完を有効にします（既定の動作）。
  • フォーム全体に対して<form autocomplete="off">と指定すれば、フォーム内のすべての入力フィールドで一括して無効化できます。

このように、autocomplete属性を使うことで、入力フィールドごとに柔軟に自動補完の挙動を制御できます。

  1. HTMLで年のみを入力させる方法｜jQuery Datepickerを使った実装手順

    HTMLでは、<input type=month> を使うことで「月」の入力フィールドを簡単に作成できます。この入力タイプを利用すると、ユーザーは月と年を選択できます。しかし、「年だけ」を選択できるポップアップを表示したい場合はどうすればよいのでしょうか？実は、HTML標準仕様には「年」専用の入力タイプ（type=year）は用意されていません。 jQuery Datepickerで年の入力を実現する 年の入力を実現するには、jQueryのDatepicker（デートピッカー）を活用します。テキスト入力タイプ（<input type=text>）と組み合わせてDatep

  2. HTMLのinput要素におけるautocomplete属性の使い方を解説

    autocomplete属性とは<input>要素のautocomplete属性は、入力フィールドのオートコンプリート（自動補完）機能を有効または無効に設定するための属性です。autocompleteが「on」に設定されている場合、ユーザーが以前に入力した値をもとに、Webブラウザが自動的に値を補完してくれます。なお、この自動補完が機能するのは、ユーザーがすでに同じ項目に値を入力したことがある場合のみです。構文<input autocomplete="on|off">上記のように、autocomplete属性には「on」または「off」のいずれかの値