Учебники

Symfony — Формы

Ноябрь 17, 2018

Symfony предоставляет различные встроенные теги для простой и безопасной обработки HTML-форм. Компонент Symfony Form выполняет процесс создания и проверки формы. Он соединяет модель и видовой слой. Он предоставляет набор элементов формы для создания полноценной HTML-формы из предопределенных моделей. Эта глава подробно объясняет формы.

Поля формы

API Symfony Framework поддерживает большую группу типов полей. Давайте подробно рассмотрим каждый из типов полей.

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. Метод add используется для добавления элементов ввода внутри формы. название относится к собственности студента титул. TextType :: class ссылается на текстовое поле html. Symfony предоставляет классы для всех HTML-элементов.

TextType

Поле TextType представляет собой самое основное поле ввода текста. Его синтаксис выглядит следующим образом — 

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

Здесь имя сопоставлено с сущностью.

TextareaType

Визуализирует HTML-элемент textarea. Его синтаксис выглядит следующим образом — 

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 — это основной способ визуализации поля.

Он выполняет следующую функцию.

  • Выбор — представляет три выбранных входа. Порядок выбора определяется в опции формата.

  • text — отображает три поля ввода типа text (месяц, день, год).

  • single_text — визуализирует один тип ввода даты. Ввод пользователя проверяется на основе параметра формата.

Выбор — представляет три выбранных входа. Порядок выбора определяется в опции формата.

text — отображает три поля ввода типа text (месяц, день, год).

single_text — визуализирует один тип ввода даты. Ввод пользователя проверяется на основе параметра формата.

CheckboxType

Создает один флажок ввода. Это всегда следует использовать для поля, имеющего логическое значение. Его синтаксис выглядит следующим образом — 

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

RadioType

Создает одну радиокнопку. Если выбран переключатель, поле будет установлено на указанное значение. Его синтаксис выглядит следующим образом — 

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

В основном это используется для проверки пароля пользователя или электронной почты.

ButtonType

Простая нажимаемая кнопка. Его синтаксис выглядит следующим образом — 

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

Возвращает тег формы HTML, который указывает на допустимое действие, маршрут или URL. Его синтаксис выглядит следующим образом — 

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

form_end

Закрывает тег формы HTML, созданный с помощью form_start. Его синтаксис выглядит следующим образом — 

{{ form_end(form) }}

TextArea

Возвращает тег textarea, опционально обернутый встроенным редактором JavaScript с расширенным набором текста.

флажок

Возвращает XHTML-совместимый тег ввода с type = «checkbox». Его синтаксис выглядит следующим образом — 

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

input_password_tag

Возвращает XHTML-совместимый тег ввода с type = «password». Его синтаксис выглядит следующим образом — 

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

input_tag

Возвращает XHTML-совместимый входной тег с type = «text». Его синтаксис выглядит следующим образом — 

echo input_tag('name');

этикетка

Возвращает тег метки с указанным параметром.

переключатель

Возвращает XHTML-совместимый тег ввода с type = «radio». Его синтаксис выглядит следующим образом — 

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

reset_tag

Возвращает XHTML-совместимый входной тег с type = «reset». Его синтаксис выглядит следующим образом — 

echo reset_tag('Start Over');

Выбрать

Возвращает тег выбора, заполненный всеми странами мира. Его синтаксис выглядит следующим образом — 

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

Отправить

Возвращает XHTML-совместимый тег ввода с type = «submit». Его синтаксис выглядит следующим образом — 

echo submit_tag('Update Record');

В следующем разделе мы узнаем, как создать форму, используя поля формы.

Студенческая анкета

Давайте создадим простую форму сведений об ученике, используя поля формы Symfony. Для этого мы должны придерживаться следующих шагов —

Шаг 1. Создайте приложение Symfony

Создайте приложение Symfony, formample , используя следующую команду. 

symfony new formsample

Объекты обычно создаются в каталоге «src / AppBundle / Entity /».

Шаг 2: Создать сущность

Создайте файл «StudentForm.php» в каталоге «src / AppBundle / Entity /». Добавьте следующие изменения в файл.

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», и он выдаст следующий результат.

85
Share: