3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】form_withのsubmitボタンを画像にする方法

Posted at

はじめに

オリジナルアプリ作成の際に実装したので、アウトプットします!

実装したいこと

Railsのform_withのsubmitボタンを画像に変更する。

実装方法

image_submit_tagを使う!

qiita.html.erb
<%= form_with(url: search_foods_path, local: true, method: :get, class: "search-form") do |f| %>
  <%= f.text_field :keyword, placeholder: '料理名で検索', class: 'input-box' %>
  <div class="search-button">
    <%= image_submit_tag("search.png", class: 'search-icon') %>
  </div>
<% end %>

その他の方法

button_tag要素をしようして、typeにsubmitを指定する。
そして、ブロックでimage_tag要素を渡す! 

qiita.html.erb
<%= form_with(url: search_foods_path, local: true, method: :get, class: "search-form") do |f| %>
  <%= f.text_field :keyword, placeholder: '料理名で検索', class: 'input-box' %>
  <%= button_tag type: :submit, class: "search-button" do %>
    <%= image_tag "search.png", class:"search-icon" %>
  <% end %>  
<% end %>

##参考リンク

https://railsdoc.com/page/image_submit_tag
https://railsdoc.com/page/button_tag

##終わりに
間違い等あればご指摘いただけると嬉しいです!

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?