html - rails - Entrada de nido dentro de f.label(generación de forma de rieles)

label text html

Question

Sin embargo, quiero usar el método f.label para crear mis etiquetas de elementos de formulario. Quiero anidar el elemento de formulario dentro de la etiqueta. es posible?

- Desde el W3C -

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

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

<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

Como Dan Garland mencionó anteriormente, definitivamente puede anidar entradas dentro de etiquetas con un bloque simple. Proporciono esta respuesta como ejemplo utilizando ERB y específicamente para mostrar exactamente cómo debe hacer que los grupos de botones de Bootstrap funcionen como botones de radio, ya que requieren este anidamiento. Me tomó un tiempo entenderlo, así que espero que esto ayude a alguien más.

Para este ejemplo (Rails 4.2), el grupo de botones permite al 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 %>

PD: aún no puedo publicar capturas de pantalla para mostrar cómo se ve esto, pero una vez que obtenga suficientes puntos de repetición, lo haré.

Answer 2

Esto no es posible utilizando la label Rails label_tag o los ayudantes label_tag porque no toman un bloque. Sin embargo, si desea anidar, ¿por qué no usaría el elemento HTML directamente?

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

Answer 3

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

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

Answer 4

Puede usar un FormBuilder personalizado para permitir que el ayudante de etiquetas acepte 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

Entonces puedes usar tu creador de formularios de esta manera:

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

Answer 5

Utilice esta pequeña solución

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

te daré esto

<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