Symfony - Forms

Symfony fornisce vari tag integrati per gestire i form HTML in modo semplice e sicuro. Il componente Form di Symfony esegue il processo di creazione e convalida dei form. Collega il modello e il livello di visualizzazione. Fornisce una serie di elementi del modulo per creare un modulo html completo da modelli predefiniti. Questo capitolo spiega in dettaglio i moduli.

Campi modulo

L'API del framework Symfony supporta un ampio gruppo di tipi di campo. Esaminiamo in dettaglio ciascuno dei tipi di campo.

FormType

È usato per generare un form nel framework Symfony. La sua sintassi è la seguente:

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

Qui, $studentinfo è un'entità di tipo Student. createFormBuilderviene utilizzato per creare un modulo HTML. viene utilizzato il metodo addadd elementi di input all'interno del modulo. title si riferisce alla proprietà del titolo dello studente. TextType::classsi riferisce al campo di testo html. Symfony fornisce classi per tutti gli elementi html.

Tipo di testo

Il campo TextType rappresenta il campo di testo di input più semplice. La sua sintassi è la seguente:

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

Qui, il nome è mappato con un'entità.

TextareaType

Rende un elemento HTML textarea. La sua sintassi è la seguente:

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

EmailType

Il campo EmailType è un campo di testo che viene visualizzato utilizzando il tag email HTML5. La sua sintassi è la seguente:

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

PasswordType

Il campo PasswordType esegue il rendering di una casella di testo della password di input. La sua sintassi è la seguente:

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

RangeType

Il campo RangeType è un cursore di cui viene eseguito il rendering utilizzando il tag di intervallo HTML5. La sua sintassi è la seguente:

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

PercentType

PercentType esegue il rendering di un campo di testo di input ed è specializzato nella gestione dei dati percentuali. La sua sintassi è la seguente:

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

DateType

Rende un formato di data. La sua sintassi è la seguente:

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

In questo caso, Widget è il modo di base per eseguire il rendering di un campo.

Esegue la seguente funzione.

choice- Rende tre input di selezione. L'ordine delle selezioni è definito nell'opzione di formattazione.
text - Rende un input di tre campi di tipo testo (mese, giorno, anno).
single_text- Rende un singolo input di tipo data. L'input dell'utente viene convalidato in base all'opzione di formattazione.

CheckboxType

Crea una singola casella di controllo di input. Dovrebbe essere sempre utilizzato per un campo che ha un valore booleano. La sua sintassi è la seguente:

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

RadioType

Crea un singolo pulsante di opzione. Se il pulsante di opzione è selezionato, il campo verrà impostato sul valore specificato. La sua sintassi è la seguente:

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

Nota che i pulsanti di opzione non possono essere deselezionati, il valore cambia solo quando viene selezionato un altro pulsante di opzione con lo stesso nome.

RepeatedType

Questo è un campo speciale "gruppo", che crea due campi identici i cui valori devono corrispondere. La sua sintassi è la seguente:

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

Viene utilizzato principalmente per controllare la password o l'e-mail dell'utente.

ButtonType

Un semplice pulsante cliccabile. La sua sintassi è la seguente:

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

ResetType

Un pulsante che ripristina tutti i campi ai valori iniziali. La sua sintassi è la seguente:

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

ChoiceType

Un campo multiuso viene utilizzato per consentire all'utente di "scegliere" una o più opzioni. Può essere visualizzato come tag di selezione, pulsanti di opzione o caselle di controllo. La sua sintassi è la seguente:

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

SubmitType

Un pulsante di invio viene utilizzato per inviare i dati del modulo. La sua sintassi è la seguente:

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

Funzione di supporto del modulo

Le funzioni di supporto dei moduli sono funzioni twig utilizzate per creare facilmente moduli nei modelli.

form_start

Restituisce un tag del modulo HTML che punta a un'azione, un percorso o un URL valido. La sua sintassi è la seguente:

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

form_end

Chiude il tag del modulo HTML creato utilizzando form_start. La sua sintassi è la seguente:

{{ form_end(form) }}

textarea

Restituisce un tag textarea, facoltativamente racchiuso in un editor JavaScript RTF incorporato.

casella di controllo

Restituisce un tag di input conforme a XHTML con type = "checkbox". La sua sintassi è la seguente:

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

input_password_tag

Restituisce un tag di input conforme a XHTML con type = "password". La sua sintassi è la seguente:

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

input_tag

Restituisce un tag di input conforme a XHTML con type = "text". La sua sintassi è la seguente:

echo input_tag('name');

etichetta

Restituisce un tag etichetta con il parametro specificato.

radiobutton

Restituisce un tag di input conforme a XHTML con type = "radio". La sua sintassi è la seguente:

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

reset_tag

Restituisce un tag di input conforme a XHTML con type = "reset". La sua sintassi è la seguente:

echo reset_tag('Start Over');

Selezionare

Restituisce un tag di selezione popolato con tutti i paesi del mondo. La sua sintassi è la seguente:

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

Invia

Restituisce un tag di input conforme a XHTML con type = "submit". La sua sintassi è la seguente:

echo submit_tag('Update Record');

Nella sezione successiva impareremo come creare un modulo utilizzando i campi modulo.

Domanda di modulo per studenti

Creiamo un semplice modulo dei dettagli dello studente usando i campi del modulo di Symfony. Per fare ciò, dovremmo attenerci ai seguenti passaggi:

Passaggio 1: crea un'applicazione Symfony

Crea un'applicazione Symfony, formsample, utilizzando il seguente comando.

symfony new formsample

Le entità vengono generalmente create nella directory "src / AppBundle / Entity /".

Passaggio 2: crea un'entità

Crea il file "StudentForm.php" nella directory "src / AppBundle / Entity /". Aggiungi le seguenti modifiche al file.

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; 
   } 
}

Passaggio 3: aggiungi uno StudentController

Spostati nella directory "src / AppBundle / Controller", crea il file "StudentController.php" e aggiungi il codice seguente.

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(), 
         )); 
   } 
}

Passaggio 4: rendering della vista

Spostati nella directory "app / Resources / views / student /", crea il file "new.html.twig" e aggiungi le seguenti modifiche.

{% 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 %}

Ora richiedi l'URL, "http: // localhost: 8000 / student / new" e produce il seguente risultato.

Risultato

↰ Previous page Next page ↱