【html】期待する入力フォームにメールアドレスがオートフィルされない【Ruby on Rails】

Question

前提・実現したいこと

現在Railsを使用して入力フォームを作成しております。
メールアドレスを入力する欄にオートフィルで、メールアドレスが入るようにしたいのですが、
なぜか名前を入力する欄にメールアドレスが自動入力されてしまいます。
こちら原因わかりましたらご教示いただきたいです。

![]

該当のソースコード

[ビュー]

= form_with model: [:admin, @user], local: true do |f|
  .form-group
    .fas.fa-user &nbsp
    = f.label :name, '名前'
    = f.text_field :name, class: 'form-control text_limit_200'
  .form-group
    .fas.fa-envelope &nbsp
    = f.label :email, 'メールアドレス'
    = f.text_field :email, class: 'form-control text_limit_200', type: 'email'
  .form-check.mb-3.ml-4
    = f.label :admin, class: 'form-check-label' do
      = f.check_box :admin, class: 'form-check-input'
      .fas.fa-user-shield &nbsp
      | 管理者権限
  .form-group
    .fas.fa-key &nbsp
          ・  
          ・
          ・  

[生成されるhtml]

<div class="form-group">
  <div class="fas fa-user">&nbsp;</div>
  <label for="user_name">名前</label>
  <input class="form-control text_limit_200" type="text" name="user[name]" id="user_name">
</div>
<div class="form-group">
  <div class="fas fa-envelope">&nbsp;</div>
  <label for="user_email">メールアドレス</label>
  <input class="form-control text_limit_200" type="email" name="user[email]" id="user_email">
</div>
<div class="form-check mb-3 ml-4">
  <label class="form-check-label" for="user_admin">
    <input name="user[admin]" type="hidden" value="0">
    <input class="form-check-input" type="checkbox" value="1" name="user[admin]" id="user_admin">
    <div class="fas fa-user-shield">&nbsp;</div>管理者権限
  </label>
</div>
          ・  
          ・
          ・  

Answer 1

メールアドレスの入力欄を上側に配置してみては如何でしょうか？

2020/6/28追記
inputタグに

autocomplete="new-password"

を追記してみてください。

Comments

[Jake5]

Yuya-Saudadeさん
ご回答ありがとうございます。
こちらもう少し詳細に教えていただけますでしょうか？
理解が及ばず申し訳ないです。
(ちなみにフォームの並び順は名前、メールアドレスで統一したいです)

[退会済みユーザー]

google chromeの自動入力機能は、ユーザー名（またはメールアドレス）とパスワードを入力してくれるものです。
asuchi0819さんのおっしゃるとおり、autocomplete属性を追加してみてはどうでしょう？
もしかしたらできるかも...です。

[Jake5]

asuchi0819さんへの返信にも記載させていただいたのですが、
名前のラベルにあるautocomplete属性をoffにしてもなぜかオートフィルされてしまうんですよね…

[退会済みユーザー]

すみません、勘違いしていました！

Jake5さんは自動入力をオフにされたいのですね。

[退会済みユーザー]

解答欄に追記しておきました。
ぜひ試して見てください

[Jake5]

返信が遅くなってしまい申し訳ありません。
new-password属性を付与することで無事解決できました。こんなテクニックあるんですね！
勉強になりました、ありがとうございました。

[退会済みユーザー]

解決して何よりです！

Answer 2

autocomplete属性を指定されてみては？
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

Comments

[Jake5]

asuchi0819さん
回答ありがとうございます。
autocomplete属性を追加してみましたが、結果は変わらずでした。

<div class="form-group">
<div class="fas fa-user">&nbsp;</div>
<label for="user_name">名前</label>
<input class="form-control text_limit_200" autocomplete="off" type="text" name="user[name]" id="user_name">
</div>
<div class="form-group">
<div class="fas fa-envelope">&nbsp;</div>
<label for="user_email">メールアドレス</label>
<input class="form-control text_limit_200" type="email" autocomplete="on" name="user[email]" id="user_email">
</div>