使用 Symfony 自定义表单
Customizing a form with Symfony
我已经使用 bootstrap 创建了一个表单,但我想通过添加 class 等来自定义它。我在文档上什么也没找到。
这是 HTML 中的正常形式:
<form id="form" method="POST">
<div class="form-group">
<label class="control-label">Pseudo</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" placeholder="xX_Pseudo_Cool_93_Xx" name="form[username]" id="emailSignUp" type="email" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label">Email</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" placeholder="email@example.com" name="form[email]" id="emailSignUp" type="email" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Mot de passe</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input class="form-control" placeholder="Mot de passe" name="password" id="password" type="password" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Confirmer le mot de passe</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input class="form-control" placeholder="Confirmer le mot de passe" name="passwordConfirm" id="passwordConfirm" type="password" required>
</div>
</div>
<div class="checkbox">
<label>
<input id="term" type="checkbox" required>
En créant votre compte, vous acceptez nos <a href="{{ path('policy') }}">termes et conditions & politique de confidentialité</a>
</label>
</div>
<button type="submit" id="btnsignup" class="btn btn-primary" style="width: 127px;">S'inscrire</button>
</form>
这是实际有效的表单,但它没有任何内容,而且它是与 Symfony 一起使用的:
{{ form_start(form) }}
{{ form_row(form.username) }}
{{ form_row(form.email) }}
{{ form_row(form.plainPassword.first) }}
{{ form_row(form.plainPassword.second) }}
<button type="submit">Register!</button>
{{ form_end(form) }}
所以,我想做的是根据我的 HTML.
实际定制 Symfony 表单
感谢阅读。
您需要像文档中那样声明表单 https://symfony.com/doc/4.1/forms.html
使用表单 class 或在控制器中使用表单生成器(表单 class 是更好的选择)。
然后,在定义字段时使用以下代码:
->add('subtitle', 'text',
array(
'label' => 'Subtitle',
'attr' => array(
'placeholder' => 'The subtitle',
'class' => 'form-control'
),
'required' => false,
)
您可以在选项的 attr
部分指定将在 html 文件中呈现 class 的 class
键。
另一种方法是在模板中设置 class。为此,不是调用 form_row(form.username)
,而是仅使用传递属性的字段调用渲染函数,如下所示:
<div class="form-group">
{{ form_label(form.username, null, {"label_attr": {"class": "col-sm-2 control-label" }}) }}
<div class="col-sm-10">
{{ form_widget(form.username, {"attr": {"class": "form-control" } }) }}
</div>
</div>
这里有更多信息:https://symfony.com/doc/current/form/form_customization.html
我已经使用 bootstrap 创建了一个表单,但我想通过添加 class 等来自定义它。我在文档上什么也没找到。
这是 HTML 中的正常形式:
<form id="form" method="POST">
<div class="form-group">
<label class="control-label">Pseudo</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" placeholder="xX_Pseudo_Cool_93_Xx" name="form[username]" id="emailSignUp" type="email" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label">Email</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input class="form-control" placeholder="email@example.com" name="form[email]" id="emailSignUp" type="email" required="required">
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Mot de passe</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input class="form-control" placeholder="Mot de passe" name="password" id="password" type="password" required>
</div>
</div>
<div class="form-group">
<label class="control-label" for="password">Confirmer le mot de passe</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></span>
<input class="form-control" placeholder="Confirmer le mot de passe" name="passwordConfirm" id="passwordConfirm" type="password" required>
</div>
</div>
<div class="checkbox">
<label>
<input id="term" type="checkbox" required>
En créant votre compte, vous acceptez nos <a href="{{ path('policy') }}">termes et conditions & politique de confidentialité</a>
</label>
</div>
<button type="submit" id="btnsignup" class="btn btn-primary" style="width: 127px;">S'inscrire</button>
</form>
这是实际有效的表单,但它没有任何内容,而且它是与 Symfony 一起使用的:
{{ form_start(form) }}
{{ form_row(form.username) }}
{{ form_row(form.email) }}
{{ form_row(form.plainPassword.first) }}
{{ form_row(form.plainPassword.second) }}
<button type="submit">Register!</button>
{{ form_end(form) }}
所以,我想做的是根据我的 HTML.
实际定制 Symfony 表单感谢阅读。
您需要像文档中那样声明表单 https://symfony.com/doc/4.1/forms.html
使用表单 class 或在控制器中使用表单生成器(表单 class 是更好的选择)。
然后,在定义字段时使用以下代码:
->add('subtitle', 'text',
array(
'label' => 'Subtitle',
'attr' => array(
'placeholder' => 'The subtitle',
'class' => 'form-control'
),
'required' => false,
)
您可以在选项的 attr
部分指定将在 html 文件中呈现 class 的 class
键。
另一种方法是在模板中设置 class。为此,不是调用 form_row(form.username)
,而是仅使用传递属性的字段调用渲染函数,如下所示:
<div class="form-group">
{{ form_label(form.username, null, {"label_attr": {"class": "col-sm-2 control-label" }}) }}
<div class="col-sm-10">
{{ form_widget(form.username, {"attr": {"class": "form-control" } }) }}
</div>
</div>
这里有更多信息:https://symfony.com/doc/current/form/form_customization.html