Symfony表单


Symfony提供了各种内置标签,可以轻松安全地处理HTML表单。Symfony的表单组件执行表单创建和验证过程。它连接模型和视图层。它提供了一组表单元素来从预定义模型创建一个完整的html表单。本章详细解释了表格。

表单域

Symfony框架API支持大量字段类型。我们来详细介绍每种字段类型。

FormType

它用于在Symfony框架中生成一个表单。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\FormType;
// ...  

$builder = $this->createFormBuilder($studentinfo);
$builder
   ->add('title', TextType::class);

在这里,$ studentinfo 是一个Student类型的实体。 createFormBuilder 用于创建HTML表单。添加方法用于在表单内 添加 输入元素。 标题 是指学生标题属性。 TextType :: class 引用html文本字段。Symfony为所有html元素提供了类。

TextType

TextType字段表示最基本的输入文本字段。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\TextType;
$builder->add(‘name’, TextType::class);

在这里,名称映射到一个实体。

TextareaType

渲染一个textarea HTML元素。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\TextareaType;
$builder->add('body', TextareaType::class, array(
   'attr' => array('class' => 'tinymce'),
));

EMAILTYPE

EmailType字段是使用HTML5电子邮件标记呈现的文本字段。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\EmailType;
$builder->add('token', EmailType::class, array(
   'data' => 'abcdef', ));

PasswordType

PasswordType字段呈现输入密码文本框。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\PasswordType;
$bulder->add('password', PasswordType::class);

RangeType

RangeType字段是使用HTML5范围标记呈现的滑块。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\RangeType;
// ...  
$builder->add('name', RangeType::class, array(
   'attr' => array(
      'min' => 100,
      'max' => 200
   )
));

PercentType

PercentType呈现输入文本字段,专门处理百分比数据。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\PercentType;
// ...
$builder->add('token', PercentType::class, array(
   'data' => 'abcdef',
));

DateType

呈现日期格式。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\DateType;
// ...
$builder->add(‘joined’, DateType::class, array(
   'widget' => 'choice',
));

在这里,Widget是呈现字段的基本方式。

它执行以下功能。

  • 选择 - 呈现三个选择输入。 选择的顺序在格式选项中定义。

  • 文本 - 呈现 文本 类型的三个字段输入(月,日,年)。

  • single_text - 呈现类型为date的单个输入。 用户的输入根据格式选项进行验证。

CheckboxType

创建单个输入复选框。这应该总是用于具有布尔值的字段。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
// ...  
$builder-<add(‘sports’, CheckboxType::class, array(
   'label'    =< ‘Are you interested in sports?’,
   'required' =< false,
));

无线电电传打字机

创建一个单选按钮。如果选择单选按钮,该字段将被设置为指定值。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\RadioType;
// ...  
$builder->add('token', RadioType::class, array(
   'data' => 'abcdef',
));

请注意,单选按钮不能被取消选中,只有当另一个具有相同名称的单选按钮被选中时,该值才会改变。

RepeatedType

这是一个特殊的字段“组”,它创建两个相同的字段,其值必须匹配。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\RepeatedType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;

// ...  
$builder->add('password', RepeatedType::class, array(
   'type' => PasswordType::class,
   'invalid_message' => 'The password fields must match.',
   'options' => array('attr' => array('class' => 'password-field')),
   'required' => true,
   'first_options'  => array('label' => 'Password'),
   'second_options' => array('label' => 'Repeat Password'),
));

这主要用于检查用户的密码或电子邮件。

按钮类型

一个简单的可点击按钮。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\ButtonType;
// ...  
$builder->add('save', ButtonType::class, array(
   'attr' => array('class' => 'save'),
));

ResetType

将所有字段重置为其初始值的按钮。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\ResetType;
// ...  
$builder->add('save', ResetType::class, array(
   'attr' => array('class' => 'save'),
));

ChoiceType

多用途字段用于允许用户“选择”一个或多个选项。它可以呈现为选择标签,单选按钮或复选框。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
// ...  
$builder->add(‘gender’, ChoiceType::class, array(
   'choices'  => array(
      ‘Male’ => true,
      ‘Female’ => false,
   ),
));

SubmitType

提交按钮用于提交表单数据。其语法如下 -

use Symfony\Component\Form\Extension\Core\Type\SubmitType;
// ...  
$builder->add('save', SubmitType::class, array(
   'attr' => array('class' => 'save'),
))

表单助手功能

表单助手函数是用于在模板中轻松创建表单的分支函数。

form_start

返回指向有效操作,路由或URL的HTML表单标记。其语法如下 -

{{ form_start(form, {'attr': {'id': 'form_person_edit'}}) }}

form_end

关闭使用form_start创建的HTML表单标签。其语法如下 -

{{ form_end(form) }}

textarea的

返回一个textarea标签,可选择使用内嵌富文本JavaScript编辑器进行包装。

复选框

返回类型为“checkbox”的符合XHTML标准的输入标签。其语法如下 -

echo checkbox_tag('choice[]', 1);  
echo checkbox_tag('choice[]', 2);  
echo checkbox_tag('choice[]', 3);  
echo checkbox_tag('choice[]', 4);

input_password_tag

返回类型为“password”的符合XHTML的输入标签。其语法如下 -

echo input_password_tag('password');  
echo input_password_tag('password_confirm');

input_tag

返回类型为“text”的符合XHTML的输入标签。其语法如下 -

echo input_tag('name');

标签

用指定的参数返回一个标签标签。

单选按钮

返回类型为“radio”的符合XHTML的输入标签。其语法如下 -

echo ' Yes '.radiobutton_tag(‘true’, 1);  
echo ' No '.radiobutton_tag(‘false’, 0);

reset_tag

返回类型为“reset”的符合XHTML的输入标签。其语法如下 -

echo reset_tag('Start Over');

选择

返回世界上所有国家填充的选择标签。其语法如下 -

echo select_tag(
   'url', options_for_select($url_list),
   array('onChange' => 'Javascript:this.form.submit();'));

提交

返回类型为“submit”的符合XHTML标准的输入标签。其语法如下 -

echo submit_tag('Update Record');

在下一节中,我们将学习如何使用表单域创建表单。

学生表格申请

让我们使用Symfony表单字段创建一个简单的学生详细信息表单。要做到这一点,我们应该坚持以下步骤 -

第1步:创建一个Symfony应用程序

使用以下命令创建Symfony应用程序 formsample

symfony new formsample

实体通常在“src / AppBundle / Entity /”目录下创建。

第2步:创建一个实体

在“src / AppBundle / Entity /”目录下创建文件“StudentForm.php”。在文件中添加以下更改。

StudentForm.php

<?php
namespace AppBundle\Entity;  

class StudentForm {    
   private $studentName;
   private $studentId;
   public $password;
   private $address;
   public $joined;
   public $gender;
   private $email;
   private $marks;
   public $sports;  

   public function getStudentName() {
      return $this->studentName;
   }  
   public function setStudentName($studentName) {
      $this->studentName = $studentName;
   }  
   public function getStudentId() {
      return $this->studentId;
   }  
   public function setStudentId($studentid) {
      $this->studentid = $studentid;
   }
   public function getAddress() {
      return $this->address;
   }  
   public function setAddress($address) {
      $this->address = $address;
   }  
   public function getEmail() {
      return $this->email;
   }  
   public function setEmail($email) {
      $this->email = $email;
   }  
   public function getMarks() {
      return $this->marks;
   }  
   public function setMarks($marks) {
      $this->marks = $marks;
   }
}

第3步:添加一个StudentController

移至目录“src / AppBundle / Controller”,创建“StudentController.php”文件,并在其中添加以下代码。

StudentController.php

<?php  
namespace AppBundle\Controller;  

use AppBundle\Entity\StudentForm;
use AppBundle\Form\FormValidationType;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;

use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\Form\Extension\Core\Type\TextType;
use Symfony\Component\Form\Extension\Core\Type\DateType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;
use Symfony\Component\Form\Extension\Core\Type\ChoiceType;
use Symfony\Component\Form\Extension\Core\Type\PasswordType;
use Symfony\Component\Form\Extension\Core\Type\RangeType;
use Symfony\Component\Form\Extension\Core\Type\EmailType;
use Symfony\Component\Form\Extension\Core\Type\CheckboxType;
use Symfony\Component\Form\Extension\Core\Type\ButtonType;
use Symfony\Component\Form\Extension\Core\Type\TextareaType;
use Symfony\Component\Form\Extension\Core\Type\PercentType;
use Symfony\Component\Form\Extension\Core\Type\RepeatedType;  

class StudentController extends Controller {    
   /**
      * @Route("/student/new")
   */
   public function newAction(Request $request) {  
      $stud = new StudentForm();
      $form = $this->createFormBuilder($stud)
         ->add('studentName', TextType::class)
         ->add('studentId', TextType::class)
         ->add('password', RepeatedType::class, array(
            'type' => PasswordType::class,
            'invalid_message' => 'The password fields
            must match.', 'options' => array('attr' => array('class' => 'password-field')),
            'required' => true, 'first_options'  => array('label' => 'Password'),
            'second_options' => array('label' => 'Re-enter'),
         ))

         ->add('address', TextareaType::class)
         ->add('joined', DateType::class, array(
               'widget' => 'choice',
         ))

         ->add('gender', ChoiceType::class, array(
            'choices'  => array(
               'Male' => true,
               'Female' => false,
            ),
         ))

         ->add('email', EmailType::class)
         ->add('marks', PercentType::class)
         ->add('sports', CheckboxType::class, array(
            'label'    => 'Are you interested in sports?', 'required' => false,
         ))

         ->add('save', SubmitType::class, array('label' => 'Submit'))
         ->getForm();  
         return $this->render('student/new.html.twig', array(
            'form' => $form->createView(),
         ));
   }
}

第4步:渲染视图

移至目录“app / Resources / views / student /”,创建“new.html.twig”文件并在其中添加以下更改。

{% extends 'base.html.twig' %}
{% block stylesheets %}
<style>
   #simpleform {
      width:600px;
      border:2px solid grey;
      padding:14px;
   }  
   #simpleform label {
      font-size:14px;
      float:left;
      width:300px;
      text-align:right;
      display:block;
   }  
   #simpleform span {
      font-size:11px;
      color:grey;
      width:100px;
      text-align:right;
      display:block;
   }  
   #simpleform input {
      border:1px solid grey;
      font-family:verdana;
      font-size:14px;
      color:light blue;
      height:24px;
      width:250px;
      margin: 0 0 10px 10px;
   }  
   #simpleform textarea {
      border:1px solid grey;
      font-family:verdana;
      font-size:14px;
      color:light blue;
      height:120px;
      width:250px;
      margin: 0 0 20px 10px;
   }  
   #simpleform select {
      margin: 0 0 20px 10px;
   }  
   #simpleform button {
      clear:both;
      margin-left:250px;
      background: grey;
      color:#FFFFFF;
      border:solid 1px #666666;
      font-size:16px;
   }
</style>

{% endblock %}  
   {% block body %}
   <h3>Student details:</h3>
   <div id="simpleform">
      {{ form_start(form) }}
      {{ form_widget(form) }}
      {{ form_end(form) }}
   </div>
{% endblock %}

现在请求URL“http:// localhost:8000 / student / new”,它会产生以下结果。

结果

渲染视图