php Symfony2 - 如何将复选框/收音机的标签和输入放在同一行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11507217/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Symfony2 - How to put label and input for checkboxes/radios in a same line?
提问by Reveclair
In my form I have some checkboxes, but by default, I have:
在我的表单中，我有一些复选框，但默认情况下，我有：
- the first radio widget
- the first label
- the second radio widget
- the label
- 第一个收音机小部件
- 第一个标签
- 第二个收音机小部件
- 标签
Here is the html code generated by SYmfony2 :
这是 SYmfony2 生成的 html 代码：
<div>
<input ...>
<label ...></label>
<input ...>
<label ...></label>
</div>
What I wantis to have :
the first radio widget the first label
the second radio widget the second label
什么我想是有：
第一无线电插件的第一标签
的第二无线电插件的第二个标签
The html code would be :
html代码将是：
<label .....><input ....></label>
I think I have to override the choice_widget but don't know how to put input and label on the same line
我想我必须覆盖choice_widget 但不知道如何将输入和标签放在同一行
Here is the choice_widget I may need to override :
这是我可能需要覆盖的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 %}
回答by Bob F.
I had the same problem, and I was unable to find a solution so I worked it out on my own. You are correct that you do need to override the {% block choice_widget %}block. The first step is to remove the {{ form_label(child) }}line from the {% if expanded %}section that prints out a separate label.
我遇到了同样的问题，我无法找到解决方案，所以我自己解决了。您确实需要覆盖该{% 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 %}
Now you will just need to handle printing the label in the {% block checkbox_widget %}block.
现在您只需要处理在{% 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 %}
You will need to do the same for {% block radio_widget %}since it would not otherwise have a label now.
您将需要这样做，{% 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 %}
回答by Xavier13
With help from Alberto Gaona and James, Symfony 2.4 correct solution to integrate BS3 radio AND checkboxes is as follow :
在 Alberto Gaona 和 James 的帮助下，Symfony 2.4 集成 BS3 收音机和复选框的正确解决方案如下：
In your view you have :
在您看来，您有：
{% form_theme form 'AcmeDemoBundle:Form:fields.html.twig' %}
// A radio or checkbox input
{{ form_widget(form.example) }}
Then in your fields.html.twig (which overrides https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig; see http://symfony.com/doc/current/cookbook/form/form_customization.html)
然后在您的 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 %}
回答by Alberto Gaona
NOTE: Updated Bob F solution for Symfony 2.3 (see https://github.com/symfony/symfony/blob/2.3/src/Symfony/Bridge/Twig/Resources/views/Form/form_div_layout.html.twig):
注意：为 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）：
Override choice_widget_expanded:
覆盖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 %}
Override checkbox (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 %}
Override 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 %}
回答by Manse
When a label is rendered it will include a forattribute - this links the labelto the input- see the docs on labelherechanging the output to what you suggested is just another way of linking the labeland the input
当标签被渲染时，它将包含一个for属性 - 这将链接label到input-请参阅label此处的文档将输出更改为您建议的内容只是链接label和的另一种方式input
If you want the label to display to the left of the input you need to change your template to :
如果您希望标签显示在输入的左侧，您需要将模板更改为：
{% for child in form %}
<div>
{{ form_label(child) }} {{ form_widget(child) }}
</div>
{% endfor %}
Which renders the labelbefore the inputand then this creates the following output
它呈现label之前的input然后这会创建以下输出
<div>
<div>
<label ...></label>
<input ...>
</div>
<div>
<label ...></label>
<input ...>
</div>
</div>
You can then apply some CSS styling to make it display inline :
然后，您可以应用一些 CSS 样式以使其显示内联：
?div label {
display: inline-block;
width: 200px;
}?
By default - without any CSS the labelwould line up before the inputwith this HTML layout - but the inline-blockallows you to also use the widthattribute to ensure all fields are lined up correctly - irrespective of the length of label text
默认情况下 - 没有任何 CSSlabel将在input此 HTML 布局之前排列 - 但inline-block允许您也使用该width属性来确保所有字段正确排列 - 无论标签文本的长度如何
回答by MrGlass
Putting the form input inside the label tag would result in broken HTML.
将表单输入放在 label 标签内会导致 HTML 损坏。
What is your goal? If you are simply looking to make the label and input show on the same line in the browser, then you could use css:
你的目标是什么？如果您只是想让标签和输入显示在浏览器的同一行，那么您可以使用 css：
input, label {
display: inline;
}
回答by James
In Symfony 2.4, this doesn't work quite as expected.
在 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 %}
...the label is not available. You need to add the following:
...标签不可用。您需要添加以下内容：
{% if label is empty %}
{% set label = name|humanize %}
{% endif %}
So a complete solution is:
所以一个完整的解决方案是：
{% 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 %}
回答by Yes Barry
A label is pretty trivial, so I personally preferred to render it manually.
标签非常简单，所以我个人更喜欢手动渲染它。
Quick and dirty in your twig:
在你的树枝上又快又脏：
<label for="field">
{{ form_widget(form.field) }} Field Label
</label>
I would have liked if Symfony had a simpler solution for this but whatever.
如果 Symfony 有一个更简单的解决方案，我会很高兴，但无论如何。
Of course the above answers are perhaps more elegant and what not. ;)
当然，上面的答案可能更优雅，但不是。;)
回答by Vincent Pazeller
In Symfony 3+, you can simply pass the radio-inline class to your form via label_attr:
在 Symfony 3+ 中，您可以简单地通过 label_attr 将 radio-inline 类传递给您的表单：
$builder->add('type', ChoiceType::class, [
'expanded' => true,
'label_attr' => ['class' => 'radio-inline']
]);
No need to create custom widgets or so...
无需创建自定义小部件等...
you can guess those things by looking at the bootstrap_4_layout.html.twig offered by Symfony in your vendor directory (src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig)
你可以通过查看 Symfony 在你的供应商目录 (src/Symfony/Bridge/Twig/Resources/views/Form/bootstrap_4_layout.html.twig) 中提供的 bootstrap_4_layout.html.twig 来猜测这些事情
Hope this helps.
希望这可以帮助。
回答by virginie
You can overide the form_row function like that (modified to fit the temple label / checkbox of twitter bootstrap ) : (in that exemple it's "checkbox" but i think with "radio" it works the same)
你可以像这样覆盖 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 %}
