Symfony2 - comment mettre l'étiquette et l'entrée pour les cases à cocher / radios dans une même ligne?

avec L'aide D'Alberto Gaona et James, Symfony 2.4 solution correcte pour intégrer la radio BS3 et les cases à cocher est comme suit:

À votre avis, vous avez :

{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}

// A radio or checkbox input
{{ form_widget(form.example) }}

puis dans vos champs.HTML.brindille (qui remplace https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig ; voir http://symfony.com/doc/current/cookbook/form/form_customization.html)

{# src/Acme/DemoBundle/Resources/views/Form/fields.html.twig #}

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
    {% for child in form %}
        {% if multiple %}
            <div class="checkbox">
        {% else %}
            <div class="radio">
        {% endif %}

        {{ form_widget(child) }}
        </div>
    {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

{% block checkbox_widget %}
{% spaceless %}
{% if label is empty %}
    {% set label = name|humanize %}
{% endif %}
    <label  for="{{ id }}">
        <input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
    </label>
{% endspaceless %}
{% endblock checkbox_widget %}

{% block radio_widget %}
{% spaceless %}
{% if label is empty %}
    {% set label = name|humanize %}
{% endif %}
    <label  for="{{ id }}">
        <input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans({}, translation_domain) }}
    </label>
{% endspaceless %}
{% endblock radio_widget %}

NOTE: mise à jour de la solution Bob F pour Symfony 2.3 (voir https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig):

Remplacer choice_widget_expanded:

{% block choice_widget_expanded %}
{% spaceless %}
    <div {{ block('widget_container_attributes') }}>
    {% for child in form %}
        {{ form_widget(child) }}
    {% endfor %}
    </div>
{% endspaceless %}
{% endblock choice_widget_expanded %}

Remplacer case (bootstrap style):

{% block checkbox_widget %}
{% spaceless %}
    <label  for="{{ id }}" class="checkbox {% if checked %}checked{% endif %}" ><span class="icons"><span class="first-icon fui-checkbox-unchecked"></span><span class="second-icon fui-checkbox-checked"></span></span><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

Remplacer radiobutton

{% block radio_widget %}
{% spaceless %}
    <label  for="{{ id }}"><input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock radio_widget %}

Lorsqu'une étiquette est rendu, il comprendra une for attribut - cet attribut relie le labelinput -voir la documentation sur label ici changer la sortie à ce que vous avez suggéré est juste une autre façon de lier le label et input

si vous voulez que l'étiquette s'affiche à la gauche de l'entrée, vous devez changer votre modèle en:

{% for child in form %}
   <div>
      {{ form_label(child) }}  {{ form_widget(child) }} 
   </div>
{% endfor %}

qui rend le label avant input et puis cela crée suivants sortie

<div>
  <div>
    <label ...></label>
    <input ...>
  </div>
  <div>
    <label ...></label>
    <input ...>
  </div>
</div>

vous pouvez alors appliquer un certain style CSS pour le faire afficher en ligne:

​div label {
    display: inline-block;
    width: 200px;
}​

par défaut-sans CSS le label ligne avant le input avec cette mise en page HTML - mais le inline-block permet d'utiliser les width attribut pour s'assurer que tous les champs sont alignés correctement-quelle que soit la longueur du texte de l'étiquette

exemple ici

mettre l'entrée du formulaire dans la balise de l'étiquette résulterait en HTML cassé.

Quel est votre objectif? Si vous cherchez simplement à faire apparaître l'étiquette et l'entrée sur la même ligne dans le navigateur, alors vous pouvez utiliser css:

input, label {
 display: inline;
}

Dans Symfony 2.4, cela ne fonctionne pas tout à fait comme prévu.

{% block checkbox_widget %}
{% spaceless %}
  <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

...l'étiquette n'est pas disponible. Vous devez ajouter le code suivant:

{% if label is empty %}
  {% set label = name|humanize %}
{% endif %}

Donc une solution complète est:

{% block checkbox_widget %}
{% if label is empty %}
  {% set label = name|humanize %}
{% endif %}
{% spaceless %}
  <label  for="{{ id }}"><input type="checkbox" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}{% if checked %} checked="checked"{% endif %} />{{ label|trans }}</label>
{% endspaceless %}
{% endblock checkbox_widget %}

Une étiquette est assez trivial, donc j'ai personnellement préféré rendre manuellement.

Rapide et sale dans votre twig:

<label for="field">
    {{ form_widget(form.field) }} Field Label
</label>

J'aurais aimé si Symfony avait eu une solution plus simple pour ceci mais peu importe.

bien sûr, les réponses ci-dessus sont peut-être plus élégantes et ce n'est pas le cas. ;)

Vous pouvez outrepasser la fonction form_row comme cela (modifié pour correspondre à l'étiquette de temple / case à cocher de twitter bootstrap ) : (dans cet exemple c'est" checkbox "mais je pense qu'avec" radio " ça marche pareil)

{% extends 'form_div_layout.html.twig' %}

{% block field_row %}
{% spaceless %}
    {% if 'checkbox' in types %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({'for': id}) %}
        {% endif %}
        {% if required %}
            {% set label_attr = label_attr|merge({'class': (label_attr.class|default('') ~ ' required')|trim}) %}
        {% endif %}
        {% if label is empty %}
            {% set label = name|humanize %}
        {% endif %}
        <label class="checkbox" {% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}
           {{ block('checkbox_widget') }}
        </label>
    {% else %}
        {{ parent() }}
    {% endif %}
{% endspaceless %}
{% endblock field_row %}