Symfony2的 - 如何把对复选框/收音机标签和输入在同一行？(Symfony2 - How t

在我的表单中我有一些复选框，但默认情况下， 我有 ：

• 第一无线电部件
• 第一个标签
• 第二无线电插件
• 标签

下面是Symfony2中生成的HTML代码：

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

我想是有：

第一无线电窗口小部件的第一个标签
第二无线电小部件的第二标签

HTML代码将是：

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

我想我已经覆盖choice_widget但不知道如何把输入和标签在同一行

这里是我可能需要重写choice_widget：

    {% block choice_widget %}
        {% spaceless %}
            {% if expanded %}
                <div {{ block('widget_container_attributes') }}>
                   {% for child in form %}
                      {{ form_widget(child) }}  {{ form_label(child) }}
                   {% endfor %}
                </div>
            {% else %}
                <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
                {% if empty_value is not none %}
                     <option value="">{{ empty_value|trans }}</option>
                {% endif %}
                {% if preferred_choices|length > 0 %}
                    {% set options = preferred_choices %}
                    {{ block('widget_choice_options') }}
                        {% if choices|length > 0 and separator is not none %}
                            <option disabled="disabled">{{ separator }}</option>
                       {% endif %}
                {% endif %}
                {% set options = choices %}
                {{ block('widget_choice_options') }}
                </select>
           {% endif %}
      {% endspaceless %}
   {% endblock choice_widget %}

Answer 1:

我有同样的问题，我无法找到一个解决方案，所以我的工作了我自己。 你是正确的，你需要重写{% block choice_widget %}块。 第一步是除去{{ form_label(child) }}从线路{% if expanded %}部打印出一个单独的标签。

{% block choice_widget %}
{% spaceless %}
    {% if expanded %}
        <div {{ block('widget_container_attributes') }}>
        {% for child in form %}
            {{ form_widget(child) }}
        {#  {{ form_label(child) }} <--------------------- remove this line #}  
        {% endfor %}
        </div>
    {% else %}
    <select {{ block('widget_attributes') }}{% if multiple %} multiple="multiple"{% endif %}>
        {% if empty_value is not none %}
            <option value="">{{ empty_value|trans }}</option>
        {% endif %}
        {% if preferred_choices|length > 0 %}
            {% set options = preferred_choices %}
            {{ block('widget_choice_options') }}
            {% if choices|length > 0 and separator is not none %}
                <option disabled="disabled">{{ separator }}</option>
            {% endif %}
        {% endif %}
        {% set options = choices %}
        {{ block('widget_choice_options') }}
    </select>
    {% endif %}
{% endspaceless %}
{% endblock choice_widget %}

现在，你只需要处理打印在标签{% block checkbox_widget %}块。

{% 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 %}

您将需要为做同样的{% block radio_widget %} ，因为否则它不会有一个标签了。

{% 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 %}

Answer 2:

从阿尔贝托高纳和詹姆斯，Symfony的2.4至BS3无线电和复选框集成正确的解决方案帮助如下：

在你看来，你必须：

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

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

然后在你的fields.html.twig（它覆盖https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig ;看到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 %}

Answer 3:

注：更新了的Symfony 2.3（见鲍勃˚F解决https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig ）：

覆盖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 %}

覆盖复选框（引导款式）：

{% 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 %}

覆盖单选按钮

{% 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 %}

Answer 4:

当呈现标签将包括一个for属性-此链接label的input - 看到的文档label在这里改变输出到你的建议是连接的另一种方式label和input

如果你想在标签中显示你需要改变你的模板，输入左边：

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

这使得label的前input ，然后这会在下面的输出

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

然后，您可以申请一些CSS样式，使其显示内嵌：

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

默认情况下-没有任何的CSS label会的前排队input与此HTML布局-但inline-block可以让你同时使用width属性，以确保所有字段都正确一字排开-不论标签文本的长度

工作示例这里

Answer 5:

把表单输入标签标签内会造成断HTML。

你的目标是什么？ 如果你只是希望让浏览器中的同一行的标签和输入秀，那么你可以使用CSS：

input, label {
 display: inline;
}

Answer 6:

在Symfony的2.4，这并不完全正常工作。

{% 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 %}

...标签不可用。 您需要添加以下内容：

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

因此，一个完整的解决方案是：

{% 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 %}

Answer 7:

标签是非常容易的，所以我个人倾向于手动渲染。

快速和肮脏在树枝：

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

我也喜欢，如果有Symfony的这一点，但任何一个简单的解决方案。

当然，以上的答案是也许更优雅，什么不是。 ;）

Answer 8:

您可以在此改变这样的form_row功能（修改，以适应Twitter的引导寺庙标签/复选框）：（因为为例，它的“复选框”，但我认为用“电台”它的工作原理相同）

{% 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 %}

文章来源: Symfony2 - How to put label and input for checkboxes/radios in a same line?