在使用SymfonyPHP框架构建Web应用时,表单的创建和提交是常见的需求。本文将分享一个关于表单渲染问题及其解决方法的案例。
在创建表单时,可能会遇到各种情况,比如需要根据用户的选择显示或隐藏某些表单元素。以下是一个包含复选框和日期选择的表单示例代码:
$builder->add(
'hs_diploma', ChoiceType::class, array(
'mapped' => false,
'expanded' => true,
'multiple' => true,
'choices' => array(
'Diploma' => 'diploma',
),
))
->add(
'hs_dip_date', DateType::class, array(
'mapped' => false,
'format' => 'dd MMM y',
'label' => 'date:',
'years' => range(2017, 1960, -1),
))
->add(
'ged', ChoiceType::class, array(
'mapped' => false,
'expanded' => true,
'multiple' => true,
'choices' => array(
'G.E.D.' => 'ged_checked',
),
))
->add(
'ged_date', DateType::class, array(
'mapped' => false,
'format' => 'dd MMM y',
'label' => 'date:',
'years' => range(2017, 1960, -1),
));
在HTML中,这些元素被放置在一个表格中,但问题在于日期标签和选择器被放置在了不同的行,而需要它们在同一行显示。
Twig是一个灵活的模板引擎,允许自定义表单的渲染方式。可以尝试在Twig模板中调整元素的排列,如下所示:
{{ form_widget(form.hs_diploma) }}{{ form_label(form.hs_dip_date) }}
{{ form_widget(form.hs_dip_date) }}{{ form_widget(form.ged) }}{{ form_label(form.ged_date) }}
{{ form_widget(form.ged_date) }}
然而,这种方法并没有解决问题。通过浏览器的开发者工具检查元素,发现每个复选框和日期选择器都被包裹在单独的标签中,而标签则在外部。
Symfony提供了多种字段类型,包括ChoiceType和DateType。可以通过设置字段类型的属性来解决渲染问题。以下是调整后的代码:
$builder->add(
'hs_diploma', ChoiceType::class, array(
'mapped' => false,
'expanded' => true,
'multiple' => true,
'choices' => array(
'Diploma' => 'diploma',
),
'attr' => array(
'style' => 'float:left',
),
))
->add(
'hs_dip_date', DateType::class, array(
'mapped' => false,
'format' => 'dd MMM y',
'label' => 'date:',
'label_attr' => array(
'style' => 'float:left;margin-left:8px',
),
'attr' => array(
'style' => 'float:left',
),
'years' => range(2017, 1960, -1),
));