Symfony - 表单

Symfony 提供各种内置标签来轻松、安全地处理 HTML 表单。Symfony 的 Form 组件执行表单创建和验证过程。它连接模型和视图层。它提供了一组表单元素，用于根据预定义的模型创建成熟的 html 表单。本章详细介绍了表单。

表单字段

Symfony 框架 API 支持大量字段类型。让我们详细了解每个字段类型。

表单类型

它用于在 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 表单。add 方法用于在表单内添加输入元素。title指的是学生的title 属性。TextType::class指的是 html 文本字段。Symfony 为所有 html 元素提供类。

文本类型

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

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

在这里，名称与实体进行映射。

文本区域类型

呈现一个文本区域 HTML 元素。其语法如下 -

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

电子邮件类型

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

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

密码类型

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

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

范围类型

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

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

百分比类型

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

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

日期类型

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

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

在这里，Widget 是渲染字段的基本方式。

它执行以下功能。

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

  • text - 呈现文本类型的三字段输入（月、日、年）。

  • single_text - 呈现日期类型的单个输入。根据格式选项验证用户的输入。

复选框类型

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

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', 
));

请注意，单选按钮无法取消选中，仅当选中另一个同名单选按钮时，该值才会更改。

重复类型

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

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'), 
));

重置类型

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

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

选择类型

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

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

提交类型

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

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

表单辅助函数

表单辅助函数是用于在模板中轻松创建表单的树枝函数。

表单开始

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

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

表单结束

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

{{ form_end(form) }}

文本区域

返回一个文本区域标签，可以选择用内联富文本 JavaScript 编辑器包装。

复选框

返回类型为“checkbox”的 XHTML 兼容输入标记。其语法如下 -

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

输入密码标签

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

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

输入标签

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

echo input_tag('name');

标签

返回具有指定参数的标签标记。

单选按钮

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

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

重置标签

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

echo reset_tag('Start Over');

选择

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

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

提交

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

echo submit_tag('Update Record');

在下一节中，我们将学习如何使用表单字段创建表单。

学生表格申请

让我们使用 Symfony 表单字段创建一个简单的学生详细信息表单。为此，我们应该遵循以下步骤 -

第 1 步：创建 Symfony 应用程序

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

symfony new formsample

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

第 2 步：创建实体

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

学生表格.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; 
   } 
}

第三步：添加一个StudentController

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

学生控制器.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”，它会产生以下结果。

结果

渲染视图