是否可以从表单生成器设计html

时间:2014-03-30 10:52:26

标签: php symfony twig

我在buildForm()

中制作了选择表单
 public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('icon','entity',
            array(
            'class' => 'UserBundle:IconPics',
            'property' => 'label', 
            'expanded' => true,
            'data' => $defaultIcon,
            'multiple' => false,    
            'label' => 'form.icon',
             'query_builder' => function ($repository) {
                return $repository->createQueryBuilder('i')
                ->add('where', 'i.enabled = true');
             },

    ));

在树枝上。

{{ form_widget(form.icon) }}

它显示了像这样的radiobutton选择器html。

<div id="fos_user_registration_form_icon">
    <input type="radio" id="fos_user_registration_form_icon_3" name="fos_user_registration_form[icon]" required="required" value="3" checked="checked" />
    <label for="fos_user_registration_form_icon_3" class="required">male</label>
    <input type="radio" id="fos_user_registration_form_icon_4" name="fos_user_registration_form[icon]" required="required" value="4" />
    <label for="fos_user_registration_form_icon_4" class="required">female</label>
    <input type="radio" id="fos_user_registration_form_icon_5" name="fos_user_registration_form[icon]" required="required" value="5" />
    <label for="fos_user_registration_form_icon_5" class="required">old male</label>
    <input type="radio" id="fos_user_registration_form_icon_6" name="fos_user_registration_form[icon]" required="required" value="6" />
</div>

但是,这个html并不酷,只需对齐单选按钮即可。 我想设计这个HTML。 比如使用表格或其他东西

<table><tr>
<td>Button1</td>
<td>label</td>
</tr></table>

有可能吗?


感谢您的回复

我已阅读链接并选择最简单的方式。

把它放在树枝的顶部并取得了一些进展。

但我面临两个问题

{% form_theme form _self %}
{% block radio_widget %}
<td>
<input type="radio" {{ block('widget_attributes') }}{% if value is defined %} value="{{ value }}"{% endif %}/>
</td>
{% endblock radio_widget %}

它显示了像这样的HTML

<td style="border-style:none;">
<input type="radio" id="fos_user_registration_form_icon_3" name="fos_user_registration_form[icon]" required="required" value="3"/></td>
<label for="fos_user_registration_form_icon_3" class="required">male</label>

1.problem

单选按钮位于td标签内(好!!),但标签位于

旁边

此标签出现在哪里?????

如何删除或控制这个?

我知道这个标签不同于&#39;标签&#39;我可以在formBuilder中选择。

2)问题

当我使用&#39;检查&#39;如样本所说

 {% if checked %} checked="checked"{% endif %}

它说像这样的检查属性甚至正常使用 form_div_layout.html.twig

我对此毫无头绪。

请帮帮我。感谢

Variable "checked" does not exist in FOSUserBundle:Registration:register_content.html.twig at line 7
500 Internal Server Error - Twig_Error_Runtime

2 个答案:

答案 0 :(得分:3)

您可以使用新的表单布局(如

)覆盖树枝中的表单主题
{% form_theme formObject 'NamespaceYourBundle:Form:form_div_layout.html.twig' %}

并在form_div_layout.html.twig重新定义您的字段块,例如单选按钮,您可以自定义

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

对于标签块,您可以像

一样使用它
{% block form_label %}
{% spaceless %}
    {% if label is not sameas(false) %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({'for': id}) %} /* you can skip this part for td */
        {% 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 %}
        <td {% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}</td>
    {% endif %}
{% endspaceless %}
{% endblock form_label %}

现在终于覆盖扩展的小部件

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

修改以覆盖choice_widget_expanded的标签栏,您可以定义您的块并使用它,如下所示

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

现在对于具有展开属性(并非所有字段)的每个选项字段的自定义标签form_label_custom,您的新标签将会正常运行

{% block form_label_custom %}
{% spaceless %}
    {% if label is not sameas(false) %}
        {% if not compound %}
            {% set label_attr = label_attr|merge({'for': id}) %} /* you can skip this part for td */
        {% 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 %}
        <td {% for attrname, attrvalue in label_attr %} {{ attrname }}="{{ attrvalue }}"{% endfor %}>{{ label|trans({}, translation_domain) }}</td>
    {% endif %}
{% endspaceless %}
{% endblock form_label_custom %}

How to customize Form Rendering

答案 1 :(得分:0)

查看Form theming

你必须创建fields.html.twig并包含在你的twig文件中,如:

{%form_theme表单&#39; AcmeTaskBundle:Form:fields.html.twig&#39; %}

在fileds.html.twig中添加无线电窗口小部件(check out)。现在,您可以在{%block radio_widget%}内添加表格,div等。

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