Entrada Nest dentro de f.label (generación de formulario carriles)

Question

Quiero utilizar el método f.label para crear mis etiquetas de elementos de formulario, sin embargo, quiero tener el elemento de formulario anidado dentro de la etiqueta. es posible?

- De W3C -

Para asociar una etiqueta con otro control de manera implícita, el elemento de control debe estar dentro de los contenidos del elemento LABEL. En este caso, la ETIQUETA solo puede contener un elemento de control. La etiqueta en sí misma puede colocarse antes o después del control asociado.

En este ejemplo, nos asociamos implícitamente dos etiquetas con los controles de entrada de texto dos:

<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

Puede anidar el asistente de formulario dentro de una etiqueta usando un bloque. Aquí hay un ejemplo usando HAML, pero también funciona con ERB.

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

Answer 2

Esto no es posible utilizar los rieles incorporadas label o label_tag ayudantes porque no toman un bloque. Sin embargo, si quieres anidar, ¿por qué no usarías el elemento HTML directamente? —

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

Answer 3

Se puede utilizar un FormBuilder personalizada para permitir que el ayudante de etiqueta para aceptar un bloque. Es tan simple como esto:

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 

continuación, puede utilizar el constructor de la forma como esto:

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

Answer 4

Uso esta pequeña solución

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

le dará esta

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

contenido

Answer 5

Como Dan Garland anteriormente mencionado anteriormente, definitivamente se puede entradas de los nidos dentro de las etiquetas con un simple bloque. Proporciono esta respuesta como un ejemplo usando ERB y específicamente para mostrar exactamente cómo debe obtener Bootstrap button groups to work like radio buttons ya que requieren esta anidación. Me tomó un tiempo darme cuenta, así que espero que esto ayude a alguien más.

Para este ejemplo (carriles 4,2), el grupo de botones le permite a un usuario seleccionar entre 3 opciones de distancia diferentes:

<%= 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. Todavía no puedo publicar capturas de pantalla para mostrar cómo se ve, pero una vez que obtenga suficientes puntos de reputación, lo haré.