Nest input inside f.label ( rails form generation )

Question

I want to use the f.label method to create my form element labels, however - i want to have the form element nested inside the label. Is this possible?

-- From W3C --

To associate a label with another control implicitly, the control element must be within the contents of the LABEL element. In this case, the LABEL may only contain one control element. The label itself may be positioned before or after the associated control.

In this example, we implicitly associate two labels with two text input controls:

<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>

Answer 1

You can nest your form helper inside of a label using a block. Here is an example using HAML, but it also works with ERB.

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

Answer 2

As Dan Garland above mentioned previously, you can definitely nest inputs inside labels with a simple block. I'm providing this answer as an example using ERB and specifically to show exactly how you have to get Bootstrap button groups to work like radio buttons as they require this nesting. It took me a while to figure out, so hopefully this will help someone else.

For this example (Rails 4.2), the button group lets a user select between 3 different distance options:

<%= 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. I can't yet post screenshots to show what this looks like, but once I get enough rep points, I will.

Answer 3

You can use a custom FormBuilder to allow the label helper to accept a block. It's as simple as this:

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

Then you can use your form builder like this:

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

Answer 4

Use this little workaround

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

will give you this

<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">

content

Answer 5

This isn't possible using the built-in Rails' label or label_tag helpers because they don't take a block. However, if you want nesting then why wouldn't you just use the HTML element directly?—

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