form_withによるname属性とid属性の自動付与

動作環境
Ruby 2.6.5
Rails 6.0.3.2

form_withを使った場合、name属性とid属性が自動で付与されていたことに気づかずにエラーをよく起こしていたので、投稿してみました。

##form_withにmodelを指定し、name属性とid属性が自動で付与される具体例

new.html.erb

<%= form_with model: @hoge, local: true do |f| %>
  <%= f.text_field :fuga %>
  <%= f.submit "投稿する" %>
<% end %>

上記のように、modelを@hogeに指定し、検証ツールにてname属性とid属性を確認すると、**name="hoge[fuga]"、id="hoge_fuga"**となります。nameとidを指定していないのに、自動でname属性とid属性が付与されています。

先ほどのコードでは、name属性とid属性を指定しない場合は自動で付与されるという話でしたが、name属性とid属性を指定した場合はどうなるのかを見ていきましょう。

##form_withを使いname属性とid属性を指定した具体例

new.html.erb

<%= form_with model: @hoge, local: true do |f| %>
  <%= f.text_field :fuga, name:"hogera", id:"piyo" %>
  <%= f.submit "投稿する" %>
<% end %>

先ほどと同様に、検証ツールにてname属性とid属性を確認すると、**name="hogera"、id="piyo"**となります。つまり、name属性とid属性は指定した通りになります。

次に、modelを指定するのではなく、urlを指定した場合はどうなるのかを見ていきましょう。

##form_withにurlを指定し、name属性とid属性が自動で付与される具体例

new.html.erb

<%= form_with url: hoges_path, local: true do |f| %>
  <%= f.text_field :fuga %>
  <%= f.submit "投稿する" %>
<% end %>

先ほどと同様に、検証ツールにてname属性とid属性を確認すると、**name="fuga"、id="fuga"**となります。ここで気を付けたいのが、modelを指定した場合とname属性とid属性が異なっていることです。基本的に、controllerで行いたいactionが同じの場合、modelを指定してもurlを指定しても結果は変わらないのですが、name属性とid属性は異なります。

ちなみに、modelとurlの両方を指定すると、name属性とid属性はmodelを指定した場合と同じになります。

私はname属性とid属性は指定しないと付与されないものだと思っていたので、このことを知ったときには驚きました。また、JavaScriptを用いてname属性を取得することがあったのですが、その際に、modelを指定した時とurlを指定した時のname属性の違いに気づかずに何時間もエラーと闘ってしまうということがありました。

こういったエラーを防ぐために最初からname属性もid属性も指定してあげれば良いのでは？と考えたのですが、そもそも少しでも記述量を減らすために自動で付与しているので、自分で指定せずに自動で付与されたものを使うことが多いようです。