Is it possible to design the html from form builder

Question

I made select form in 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');
             },

    ));

in twig.

{{ form_widget(form.icon) }}

it shows the radiobutton selector html like this.

<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>

However,this html is not cool,just align the radio button. I would like to design this html. such as using table or something

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

Is it possible?

---

Thanks for your reply

I have read the link and choose the most simple way.

put this at the top of twig and made some progress.

But I am facing two problems

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

it shows the html like this

<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

radio button is inside the td tag (good!!),but label is out side the

where does this label appears?????

how can I delete or control this???

I understood this label is defferent from the 'label' that I can choose at the formBuilder.

2) problem

when I use 'checked' as sample says

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

it says like this checked property is used in even normal form_div_layout.html.twig

I have no clue about this.

Please help me . thanks

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

Answer 1

You can override the form theme in twig by using your new form layout like

{% form_theme formObject 'NamespaceYourBundle:Form:form_div_layout.html.twig' %}

and in form_div_layout.html.twig redefine your field blocks like for radio button you can customize it

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

For label block you can use it like

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

And now finally override the expanded widget

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

Edit to override label block for choice_widget_expanded you can define your block and use it like in below

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

And for the custom label too form_label_custom now for every choice field with expanded property (not all fields) your new label will be in action

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

Answer 2

Check out Form theming.

You have to create fields.html.twig and include into yout twig file like:

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

In fileds.html.twig add radio widget (check out). Here you can now add tables, divs etc. Inside {% block radio_widget %}.

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