在f.label内嵌入输入(rails表单生成)

时间:2010-03-16 18:46:31

标签: html ruby-on-rails forms label

我想使用f.label方法来创建表单元素标签,但是 - 我希望将表单元素嵌套在标签内。这可能吗?

- 来自W3C -

  

要隐式地将标签与另一个控件相关联,控制元素必须位于LABEL元素的内容中。在这种情况下,LABEL可能只包含一个控制元素。标签本身可以位于相关控件之前或之后。

     

在此示例中,我们隐式地将两个标签与两个文本输入控件相关联:

<form action="..." method="post">
 <p>
  <label>
     First Name
     <input type="text" name="firstname" />
  </label>
  <label>
     <input type="text" name="lastname" />
     Last Name
  </label>
  </p>
</form>

5 个答案:

答案 0 :(得分:23)

您可以使用块将表单助手嵌套在标签内。以下是使用HAML的示例,但它也适用于ERB。

= form_for your_resource do |f|
  = f.label :first_name do
    = f.text_field :first_name

答案 1 :(得分:9)

正如上面提到的Dan Garland,您可以使用简单的块将输入嵌套在标签内。我正在使用ERB作为示例提供此答案,并专门用于显示您需要获取Bootstrap button groups to work like radio buttons的方式,因为它们需要此嵌套。我花了一段时间才弄清楚,所以希望这会帮助别人。

对于此示例(Rails 4.2),按钮组允许用户在3种不同的距离选项中进行选择:

<%= form_for(@location) do |f| %>
  <div class="field form-group">
    <%= f.label :distance %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :distance, class: "btn btn-primary active" do %>
        <%= f.radio_button :distance, 0.3, checked: true %>
        0.3 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 0.5 %>
        0.5 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary" do %>
        <%= f.radio_button :distance, 1 %>
        1 mile
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= f.submit "Submit Location", class: "btn btn-success" %>
  </div>
<% end %>

P.S。我还不能发布截图来展示它的样子,但是一旦我得到足够的重复点,我就会。

答案 2 :(得分:8)

您可以使用自定义FormBuilder来允许标签助手接受块。就这么简单:

class SmartLabelFormBuilder < ActionView::Helpers::FormBuilder
  def label(method, content_or_options_with_block = nil, options = {}, &block)
    if !block_given?
      super(method, content_or_options_with_block, options)
    else
      options = content_or_options_with_block.is_a?(Hash) ? content_or_options_with_block.stringify_keys : {}

      @template.content_tag(:label, options, &block)
    end
  end
end

然后您可以使用这样的表单构建器:

<% form_for(@article, :builder => SmartLabelFormBuilder) do |form| %>
  <% form.label(:title) do %>
    Title
    <%= form.text_field(:title) %>
  <% end %>
<% end %>

答案 3 :(得分:2)

使用这个小解决方法

<%= f.label(:content, "#{f.check_box(:allow_posts)}\n#{:content}\n".html_safe, :class => "checkbox") %>

会给你这个

<label class="checkbox" for="pages_content"><input name="pages[allow_posts]" type="hidden" value="0"><input id="pages_allow_posts" name="pages[allow_posts]" type="checkbox" value="1">

内容

答案 4 :(得分:1)

使用内置的Rails'labellabel_tag帮助程序是不可能的,因为它们不会阻塞。但是,如果您想要嵌套,那么为什么不直接使用HTML元素? -

<label>
  <%= f.text_field :firstname %>
</label>