Etiquetas para botões de opção em forma de trilhos

147

Minha pergunta é semelhante a esta, mas para um aplicativo Rails.

Tenho um formulário com alguns botões de opção e gostaria de associar rótulos a eles. O labelauxiliar de formulário usa apenas um campo de formulário como parâmetro, mas nesse caso eu tenho vários botões de opção para um único campo de formulário. A única maneira de fazer isso é criar manualmente um rótulo, codificando permanentemente o ID gerado automaticamente para o botão de opção. Alguém sabe de uma maneira melhor de fazer isso?

Por exemplo:

<% form_for(@message) do |f| %>
    <%= label :contactmethod %>
    <%= f.radio_button :contactmethod, 'email', :checked => true %> Email
    <%= f.radio_button :contactmethod, 'sms' %> SMS
<% end %>

Isso gera algo como:

<label for="message_contactmethod">Contactmethod</label>
<input checked="checked" id="message_contactmethod_email" name="message[contactmethod]" value="email" type="radio"> Email
<input id="message_contactmethod_sms" name="message[contactmethod]" value="sms" type="radio"> SMS

O que eu quero:

<input checked="checked" id="message_contactmethod_email" name="message[contactmethod]" value="email" type="radio"><label for="message_contactmethod_email">Email</label>
<input id="message_contactmethod_sms" name="message[contactmethod]" value="sms" type="radio"> <label for="message_contactmethod_sms">SMS</label>

ruby-on-rails forms

— Bryan
fonte

145

<% form_for(@message) do |f| %>
  <%= f.radio_button :contactmethod, 'email', :checked => true %> 
  <%= label :contactmethod_email, 'Email' %>
  <%= f.radio_button :contactmethod, 'sms' %>
  <%= label :contactmethod_sms, 'SMS' %>
<% end %>

— Matt Haley
fonte

91

Também existe outra maneira: passar uma :valueopção para f.labelfará a mesma coisa. por exemplo <%= f.label :contactmethod, 'SMS', :value => 'sms' %>. Isso define o atributo "for" da tag label corretamente, o que faz com que clicar no rótulo selecione o botão de opção apropriado. Na resposta acima, simplesmente usando o labelajudante fará com que o atributo "for" para ser incorreto quando o botão é criado com FormBuilder

— John Douthat

2

Eu só queria dizer que, como um novato no Rails, encontrei essa resposta na qual eu continuo voltando. É o presente que continua dando. Bem, até eu me lembro a sintaxe apropriada de qualquer maneira ... :)

— John Gallagher

também verificar isso se você está olhando para definir o checkedvalor condicionalmente stackoverflow.com/a/4708921/429521

— Felipe Sabino

8

Para futuros leitores, John Douthat tem a resposta correta para esta pergunta. Esta resposta não está mais correta.

— superluminary

230

Passar a :valueopção para f.labelgarantir que o foratributo da tag label seja igual ao ID do correspondenteradio_button

<% form_for(@message) do |f| %>
  <%= f.radio_button :contactmethod, 'email' %> 
  <%= f.label :contactmethod, 'Email', :value => 'email' %>
  <%= f.radio_button :contactmethod, 'sms' %>
  <%= f.label :contactmethod, 'SMS', :value => 'sms' %>
<% end %>

Consulte ActionView :: Helpers :: FormHelper # label

a opção: value, projetada para segmentar rótulos para tags radio_button

— John Douthat
fonte

5

bem, isso pode ter 0 votos porque foi respondido meses depois, mas na verdade é o bom. Advertência: você precisa de Rails> = 2.3.3

— tokland

3

esse método também renderiza a field_with_errorsdiv quando necessário (que não aparece ao usar o :contactmethod_emailmétodo). Essa é a resposta correta!

— precisa

1

Se você deseja que o object_name prefixe qualquer ID, chame os auxiliares de formulário no objeto de formulário:

- form_for(@message) do |f|
  = f.label :email

Isso também garante que todos os dados enviados sejam armazenados na memória, caso haja erros de validação etc.

Se você não pode chamar o método auxiliar de formulário no objeto de formulário, por exemplo, se estiver usando um auxiliar de tag (radio_button_tag etc.), poderá interpolar o nome usando:

= radio_button_tag "#{f.object_name}[email]", @message.email

Nesse caso, você precisará especificar o valor manualmente para preservar os envios.

— James Conroy-Finn
fonte

0

Usar true/ falsecomo valor terá o campo preenchido se o modelo passado para o formulário já tiver esse atributo preenchido:

= f.radio_button(:public?, true)
= f.label(:public?, "yes", value: true)
= f.radio_button(:public?, false)
= f.label(:public?, "no", value: false)

— localhostdotdev
fonte

0

Este é um exemplo do meu projeto para classificação usando radiobotões e seus labels

<div class="rating">
  <%= form.radio_button :star, '1' %>
  <%= form.label :star, '☆', value: '1' %>

  <%= form.radio_button :star, '2' %>
  <%= form.label :star, '☆', value: '2' %>

  <%= form.radio_button :star, '3' %>
  <%= form.label :star, '☆', value: '3' %>

  <%= form.radio_button :star, '4' %>
  <%= form.label :star, '☆', value: '4' %>

  <%= form.radio_button :star, '5' %>
  <%= form.label :star, '☆', value: '5' %>
</div>

— MIA
fonte