ホームページのお問い合わせフォームの仕様上のトラブル解決方法

Question

前提・実現したいこと

ホームページのお問い合わせフォームの名前入力時に
クレジットカード情報が表示されます。
これを非表示にさせることは出来ないものでしょうか？
cssやhtml、jsで解決できるものなのでしょうか？

発生している問題・エラーメッセージ

ホームページ制作後、お問い合わせフォームの確認していたところ
一人の方から、クレジットカード情報が名前入力時に表示されるとの内容でした
名前入力部分のコードは下記のとおりです

該当のソースコード

<dt>名前<span>Your Name</span></dt> <dd class="required"><input type="text" id="name_1" name="name_1" value=""　autocomplete="off" /> <input type="text" id="name_2" name="name_2" value=""　autocomplete="off" /></dd>

試したこと

クレジットカード情報が名前入力時に表示される方は、マイクロソフトエッジを利用しています。
Chromeやfirefoxなどで見ている人はクレジットカード情報が表示されません

クレジットカード情報を非表示にすることは出来ないものでしょうか？
autocompleteのことを色々検索し、autocomplete=none や　jsでのautocomplete=off も
行ったのですが全く解決しませんでした

Answer 1

過去に入力した情報がブラウザに残っているとかでは？

MDN
autocomplete="off"にすればよいです。それらの情報は結局のところそのユーザーにしか見れません。
もしそれでも解決しないようならブラウザのキャッシュの削除か、あまりお勧めはしませんがname属性の変更を行えばよいみたいです。

Comments

[takuden]

ご返事ありがとうございます。
ブラウザのキャッシュの削除が早いと思うのですが、ブラウザのことよく知らない人が利用すると
こういう状況になるので、html js などで対応したかったです。
name属性変更試してみます。エッジがどのようなname属性に反応するかが、よくわからず、難しいです
アドバイスありがとうござしました

[kyoya0819]

こんな指摘はお望みではないかもしれませんが、結局今回の一件の何が問題化というと、
1, 作成者がWEBの仕様を知らなかったこと
2, 利用者に対し適切な説明ができなかったこと
3, あらかじめこれらの一件を想定できなかったこと
の３点です。

逆にこの３点が克服できていれば今回のような一件は起きなかったわけです。

じゃあどうすればよかったか。
一番良いのは一連の動作を実機で検証することです。
途方もない作業に思えますが、これをするとしないでは大違いです。

とりあえずは、リリース前に主要ブラウザ
Windows: Edge, (IE11)
mac OS: Safari
うえ二つのいずれか: Chrome, FireFox, Opera
Android: Chrome
iOS, iPadOS: Safari
あたりを確認すればほぼすべてのブラウザでの挙動が確認できます。
ただし、これが全てではない（バージョンの違い等）のでどこまで確認するかは納期や人数によりけりです。

参考にしていただければ幸いです。

Answer 2

autocomplete="off"やautocomplete="name"など試しましたが、どれも無効にはなりませんでした。
name属性をランダムに変更するjsの場合、name値がアクセスするたびに変更になるので、メールフォームなどの自動返信メールは出来ませんでした。
解決方法としてはサイト閲覧者のブラウザ側での設定の変更になるのかと思います