如何制作图像在跨度中的按钮

时间:2016-05-03 18:30:08

标签: html ruby-on-rails forms

我在html中有这个

<form id="contact-form" action="#0" class="ae-form--full">
            <input type="text" placeholder="* Name" required>
            <input type="email" placeholder="* Email" required>
            <textarea placeholder="Message ..." cols="30" rows="4"></textarea>
            <p class="au-xs-ta-right au-pt-4 group-buttons"><a href="#0" class="arrow-button arrow-button--right arrow-button--out">Send<span class="arrow-cont">
                  <svg>
                    <use xlink:href="assets/img/symbols.svg#arrow"></use>
                  </svg></span></a></p>
          </form>

现在我想知道如何使用类来提交提交按钮以及必须在跨度中放置svg图像的位置。

2 个答案:

答案 0 :(得分:1)

<button type="submit" class="btn btn-primary" id="get_drug_search_results">
   <span class="textm"><%= t("labels.find_result") %></span>
   <span class="icon "><%=image_tag("magnifying-glass-grey.png", width: 20, height: 20,:id=> "image")%></span>
</button>

答案 1 :(得分:0)

首先,你应该使用像form_for这样的rails表单助手 我喜欢使用simple_form

你仍然看起来应该是这样的。

<%= form_for @contact do |f| %>
  <%= f.label :name %>:
  <%= f.text_field :name %><br />

  <%= f.label :email %>:
  <%= f.text_field :email %><br />

  <%= f.label :message %>:
  <%= f.text_area(:message, cols: 20, rows: 40) %><br />
    <%= button_tag(type: 'submit', class: "btn btn-primary") do %>
      Save <span class="icon-ok icon-white"></span> 
    <% end %>
<% end %>

尝试制作你的btn

<%= button_tag(type: 'submit', class: "btn btn-primary") do %>
  Save <span class="icon-ok icon-white"></span> 
<% end %>

Simple_form示例

<%= simple_form_for @contact do |f| %>
  <%= f.input :name %>
  <%= f.input :email %>
  <%= f.input :message %>
  <span>
    <%= f.button :submit %>
  </span>
<% end %>

我不确定你是否知道控制器中应该有:

def new 
  @contact = Contact.new
end 

我希望这有助于