20

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

  • 第一个收音机小部件
  • 第一个标签
  • 第二个收音机小部件
  • 标签

这是 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 %}
4

9 回答 9

31

我有同样的问题，我无法找到解决方案，所以我自己解决了。您是正确的，您确实需要覆盖该{% 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 %}
于 2012-08-19T23:12:28.923 回答
13

在 Alberto Gaona 和 James 的帮助下，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 %}
于 2014-04-22T10:00:37.397 回答
11

注意：更新了 Symfony 2.3 的 Bob 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 %}
于 2013-10-15T14:24:20.683 回答
2

呈现标签时，它将包含一个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;
}​

默认情况下 - 没有任何 CSSlabel将在input此 HTML 布局之前对齐 - 但inline-block允许您也使用该width属性来确保所有字段都正确排列 - 无论标签文本的长度如何

这里的工作示例

于 2012-07-17T07:26:37.857 回答
1

将表单输入放在标签标签内会导致 HTML 损坏。

你的目标是什么？如果您只是想让标签和输入显示在浏览器的同一行，那么您可以使用 css：

input, label {
 display: inline;
}
于 2012-07-16T18:17:05.293 回答
1

在 Symfony 3+ 中，您可以简单地通过 label_attr 将 radio-inline 类传递给您的表单：

$builder->add('type', ChoiceType::class, [
    'expanded' => true, 
    'label_attr' => ['class' => 'radio-inline']
]);

无需创建自定义小部件等等...

您可以通过查看供应商目录（src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig）中 Symfony 提供的 bootstrap_4_layout.html.twig 来猜测这些内容

希望这可以帮助。

于 2019-08-06T10:14:33.830 回答
0

在 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 %}
于 2014-04-04T02:00:31.857 回答
0

标签非常简单，所以我个人更喜欢手动渲染它。

在你的树枝上又快又脏：

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

如果 Symfony 有一个更简单的解决方案，我会很高兴的。

当然，上面的答案可能更优雅，什么不是。;)

于 2017-04-25T16:53:16.373 回答
-1

您可以像这样覆盖 form_row 函数（修改为适合 twitter bootstrap 的寺庙标签/复选框）：（在该示例中它是“复选框”，但我认为使用“收音机”它的工作原理相同）

{% 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 %}
于 2012-08-02T14:23:06.883 回答