HTMLフォームでオートコンプリートを無効にするW3Cの有効な方法はありますか？

424

xhtml1-transitional.dtddoctype を使用する場合、次のHTMLでクレジットカード番号を収集します

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

W3Cバリデータの警告にフラグを立てます。

「オートコンプリート」属性はありません。

フォームの機密フィールドでブラウザのオートコンプリートを無効にするW3C /標準の方法はありますか？

html  standards  forms  w3c 
— マットb
ソース
10
ユーザーのオートコンプリート設定をいじるのが本当にしたいことですか？彼らはそれをオンにしている場合、おそらくそれが好きです。オートコンプリートは、あなたが彼らの願いを妨害してはならないなど、多くのユーザーは、フォントサイズを変更することができますボタンのように、完全にブラウザ側の機能である
— rmeador
113
クレジットカード番号のように機密性の高いものでも？覚えておきたい人はあまりいないと思います。特に、ほとんどのブラウザではオートコンプリートがデフォルトでオンになっているためです。悪いことを覚えておきたい場合は、Googleツールバーなどのフォームに入力するものを使用できます。
— matt b
13
私の使用例は少し異なります-自分のオートコンプリートをローリングしていて、ブラウザーのオートコンプリートと競合させたくありません。autocomplete = "off"が無効であることを発見しただけですが、他に簡単な解決策はないようです（jsで注入するのはばかげています）
— thepeer
13
@rmeadorは、標準の自動提案ボックスの代わりに、よりユーザーフレンドリーな代替手段を提供したい場合があるためです。@corydorasはOSXの重みを押し付けないでください。この質問の解決には役立ちません。
— ジョシュM.
12
問題は、顧客の過失が100％であっても、不正な取引が発生した場合、銀行は販売者に責任を負わせることです。したがって、状況によっては、顧客の機能を無効にすることが正当です。
— Alexandre H. Tremblay

回答:

421

ここでは、フォームの自動補完機能に問題（および解決策を）説明してMDCから良い記事です。Microsoftも同様の記事をここに公開しています。

正直なところ、これがユーザーにとって重要なものである場合、このように標準を「破る」ことが適切であると思われます。たとえば、Amazonは 'autocomplete'属性をかなり使用しており、うまく機能しているようです。

警告を完全に削除する場合は、JavaScriptを使用して、それをサポートするブラウザー（IEおよびFirefoxが重要なブラウザー）に属性を適用できます。 someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

最後に、サイトがHTTPSを使用している場合、IEはオートコンプリートを自動的にオフにします（私の知る限り、他のブラウザも同様です）。

更新

この回答にはまだかなりの賛成票があるため、HTML5ではフォーム要素の 'autocomplete'属性を使用できることを指摘しておきます。これについては、W3C のドキュメントを参照してください。

— ニック・プレスタ
ソース
41
Firefoxはhttpsでオートコンプリートをオフにしないようですが、それは有用な知識です。ありがとう！
— matt b
3
Safariはautocomplete = "off"属性を考慮しません。stackoverflow.com/questions/22817801/…を
— Skurpi
1
autocomplete使用することができるだけでなくform要素、およびoff値は、少なくともで動作chromium-40.0.2214.115
— X-ユーリ
w3cはHTML5.1のオートコンプリートの標準を拡張しているようです（このコメントの時点ではドラフトです）w3c.github.io/html/…–
— Justin
1
何も機能しない場合は、テキストボックスの代わりにテキストエリアを使用してオートコンプリートをオフにします。
— Bsienn
64

W3Cが（X）HTML4で機能する方法を提案していたとしたら、私は非常に驚きます。オートコンプリート機能は完全にブラウザベースであり、過去数年間に導入されました（HTML4標準が作成された後）。

ただし、HTML5に含まれていても驚くことはありません。

編集：思ったとおり、HTML5にはその機能があります。ページをHTML5として定義するには、次のdoctypeを使用します（つまり、これをソースコードの最初のテキストとして配置します）。まだドラフト形式であるため、すべてのブラウザがこの標準をサポートしているわけではないことに注意してください。

<!DOCTYPE html>
— ヘンリック・ポール
ソース
7
すべてのブラウザーは、古いバージョンのKonquerorがサポートすることを期待しています。IE6でもサポートされています。行くDoctypeです。
— BalusC 2010
56

HTML 4：いいえ

HTML 5：はい

オートコンプリート属性は列挙された属性です。属性には2つの状態があります。上の状態でのキーワードマップ、オフ 、オフ状態にキーワードマップ。属性も省略できます。欠損値のデフォルトはオン状態です。オフの状態は、デフォルトでは、フォーム内のフォームコントロールがに彼らのオートフィルのフィールド名を設定していることを示しますオフ。オン状態は、デフォルトで、フォーム内のフォームコントロールのautofillフィールド名が「オン」に設定されることを示します。

リファレンス：W3

— RuudKok
ソース
@ freestock.tkええ、他のどれよりもはっきりしています。シンプルさが重要です。
— OverCoder 2016
32

いいえ。ただし、ブラウザのオートコンプリートは、多くの場合、name以前に入力されたフィールドと同じ属性を持つフィールドによってトリガーされます。ランダムなフィールド名を作成する巧妙な方法を整えることができた場合、オートコンプリートは以前に入力されたフィールドの値をプルすることができません。

入力フィールドに " email_<?= randomNumber() ?>"のような名前を付け、POSTまたはGET変数を介してこのデータループを受け取るスクリプトで、パターン " email_[some number]"に一致するものを探す場合、これを取り除くことができます（これは（実際には）ブラウザに関係なく、成功が保証されています。

— ファントムワトソン
ソース
6
これは自動テストを難しくします。
— David Waters、
14
テストソフトウェアが、乱数が付加されている可能性のあるフィールドのチェック/読み取りを処理できない場合にのみ、自動テストを困難にします。自動テストソフトウェアをアップグレードする時期かもしれません。
— corydoras
8
オートコンプリート情報は引き続きブラウザのデータディレクトリに保存されますか？
— Joey Adams
2
たぶん。しかし、実際にユーザーに再び表示されることは期待されていません。
— ファントムワトソン
1
Chromeでは現在、特定のサイトの名前属性ではなく、type = "password"属性を使用しています。name = "newpassword" autocomplete = 'off' type = "password"があり、自動入力されます！タイプを変更しても自動入力は行われない
— Enigma Plus
23

JavaScriptで設定してみませんか？

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

完璧ではありませんが、HTMLは有効です。

— グレッグ
ソース
8
検証エラーの回避策としてJavaScriptを使用することは、敷物の下にほこりを掃くようなものです。HTMLドキュメントが有効になる可能性がありますが、結果のHTML + JSページは無効になります。
— fregante 2012
11

jQueryを使用する場合、次のようなことができます。

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

必要な場所でautocompleteOffクラスを使用します。

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

すべての入力をにしたい場合はautocomplete=off、それを単純に使用できます。

$(document).ready(function(){$("input").attr("autocomplete","off");});
— トトチェ
ソース
4
HTML5 doctypeを使用するだけの方が簡単で優れています。
— BalusC 2010
5
とにかく、これは本当に有効なhtmlではありません。html autocomplete以外の方法で（無効な）属性を設定しているだけです
— matt b
このコードは私には機能しません。$('input.autocompleteOff').val('');大丈夫そうなのを使ってきました。
— dqd 2011
5
検証エラーの回避策としてJavaScriptを使用することは、敷物の下にほこりを掃くようなものです。HTMLドキュメントが有効になる可能性がありますが、結果のHTML + JSページは無効になります。
— fregante 2012
8

別の方法-セキュリティにも役立ちますが、入力ボックスを表示するたびに別の名前を呼び出すことです：キャプターのように。このように、セッションは1回限りの入力を読み取ることができ、オートコンプリートは何も実行しません。

ブラウザエクスペリエンスを妨害する必要があるかどうかについてのrmeadorの質問に関する一点：私たちは連絡先管理とCRMシステムを開発しており、他の人のデータをフォームに入力するときに、自分の詳細を常に示唆したくない場合があります。

これは私たちのニーズに対応しますが、ユーザーに適切なブラウザを入手するように伝える贅沢があります:)

autocomplete='off'
— エニグマプラス
ソース
8

autocomplete="off" これにより、すべての最新ブラウザーの問題が修正されます。

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

Geckoブラウザーの現在のバージョンでは、autocomplete属性が完全に機能します。以前のバージョンの場合、Netscape 6.2に戻ると、「アドレス」と「名前」のフォームを除いて機能しました

更新

場合によっては、autocomplete属性がオフに設定されていても、ブラウザーはオートコンプリート値を提案し続けることがあります。この予期しない動作は、開発者にとって非常に不可解です。オートコンプリーションを強制的に実行するコツは、属性にランダムな文字列を割り当てることです。次に例を示します。

autocomplete="nope"

このランダムな値はでないためvalid one、ブラウザはあきらめます。

文書化

— エミリオ・ゴート
ソース
最近のブラウザーは、選択によってautocomplete = offを尊重しません。：/残念ながら。
— Alexus
@Alexusは更新をいくつか追加しました...インターネットの変更は非常に高速です
— Emilio Gort
6

ランダムな 'name'属性を使用するとうまくいきます。

フォームの送信時にname属性をリセットして、フォームの送信時に名前でアクセスできるようにします。（名前を格納するためにid属性を使用）

— Opznhaarlems
ソース
5

オートコンプリート属性の場所については、いくつかの混乱があることに注意してください。これは、FORMタグ全体または個々のINPUTタグのいずれかに適用できます。これは、HTML5の前に実際には標準化されていませんでした（両方の 場所を明示的に許可しています）。古いドキュメント、特にこのMozillaの記事では、FORMタグについてのみ言及しています。同時に、一部のセキュリティスキャナーはINPUTタグでオートコンプリートのみを検索し、それが欠落している場合は（親FORMにある場合でも）エラーを出します。この混乱のより詳細な分析がここに掲載されていますオートコンプリート= OFFの混乱は、HTMLフォームの属性。

— クラビエッツ
ソース
3

理想的ではありませんが、レンダリングするたびにテキストボックスのIDと名前を変更できます。データを取得できるようにサーバー側でも追跡する必要があります。

これがうまくいくかどうかわからない、ただの考えでした。

— キーロン
ソース
2

もっと簡単な方法があると思います。（JavaScriptを介して）ランダムな名前で非表示の入力を作成し、ユーザー名をそれに設定します。パスワードを使用して繰り返します。このようにして、バックエンドスクリプトは、オートコンプリートを暗闇に保ちながら、適切なフィールド名を正確に認識します。

私はおそらく間違っていますが、それは単なるアイデアです。

— ヘビとコーヒー
ソース
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
— ジャックタック
ソース
-1

このソリューションは私と連携します：

$('form,input,select,textarea').attr("autocomplete", "nope");

この領域で自動入力を使用する場合：autocomplete="false"要素exに追加：

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
— HưngTrịnh
ソース
-5

有効なオートコンプリートオフ

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
— サウサンプトンWebデザイン
ソース
13
ユーザーがJSをオフにした場合、カード番号を入力できないため注文を完了できませんか？JSを介して属性を補足する方が良いと思います-最悪の場合、JS offはカード番号フィールドにオートコンプリートの可能性を与えますが、少なくとも注文することができます...考えただけです:)
— Terry_Brown
3
これも面白くない。
— Ricardo Pieper 2013年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.