Symfony - Formulaires

Symfony fournit diverses balises intégrées pour gérer les formulaires HTML facilement et en toute sécurité. Le composant Form de Symfony effectue le processus de création et de validation du formulaire. Il relie le modèle et la couche de vue. Il fournit un ensemble d'éléments de formulaire pour créer un formulaire HTML complet à partir de modèles prédéfinis. Ce chapitre explique en détail les formulaires.

Champs de formulaire

L'API du framework Symfony prend en charge un grand groupe de types de champs. Passons en revue chacun des types de champs en détail.

FormType

Il est utilisé pour générer un formulaire dans le framework Symfony. Sa syntaxe est la suivante -

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

Ici, $studentinfo est une entité de type Student. createFormBuilderest utilisé pour créer un formulaire HTML. add méthode est utilisée pouradd éléments d'entrée à l'intérieur du formulaire. title fait référence à la propriété du titre de l'étudiant. TextType::classfait référence au champ de texte html. Symfony fournit des classes pour tous les éléments html.

TextType

Le champ TextType représente le champ de texte d'entrée le plus élémentaire. Sa syntaxe est la suivante -

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

Ici, le nom est mappé avec une entité.

TextareaType

Rend un élément HTML textarea. Sa syntaxe est la suivante -

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

EmailType

Le champ EmailType est un champ de texte rendu à l'aide de la balise de messagerie HTML5. Sa syntaxe est la suivante -

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

PasswordType

Le champ PasswordType affiche une zone de texte de mot de passe d'entrée. Sa syntaxe est la suivante -

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

RangeType

Le champ RangeType est un curseur qui est rendu à l'aide de la balise de plage HTML5. Sa syntaxe est la suivante -

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

PercentType

Le PercentType rend un champ de texte d'entrée et se spécialise dans la gestion des données de pourcentage. Sa syntaxe est la suivante -

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

DateType

Rend un format de date. Sa syntaxe est la suivante -

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

Ici, Widget est le moyen de base de rendre un champ.

Il remplit la fonction suivante.

choice- Rend trois entrées de sélection. L'ordre des sélections est défini dans l'option format.
text - Rend une entrée à trois champs de type texte (mois, jour, année).
single_text- Rend une seule entrée de type date. L'entrée de l'utilisateur est validée en fonction de l'option de format.

Case à cocherType

Crée une case à cocher d'entrée unique. Cela doit toujours être utilisé pour un champ qui a une valeur booléenne. Sa syntaxe est la suivante -

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

RadioType

Crée un seul bouton radio. Si le bouton radio est sélectionné, le champ sera défini sur la valeur spécifiée. Sa syntaxe est la suivante -

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

Notez que, les boutons radio ne peuvent pas être décochés, la valeur ne change que lorsqu'un autre bouton radio avec le même nom est coché.

RepeatedType

Il s'agit d'un champ spécial «groupe», qui crée deux champs identiques dont les valeurs doivent correspondre. Sa syntaxe est la suivante -

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

Ceci est principalement utilisé pour vérifier le mot de passe ou l'e-mail de l'utilisateur.

ButtonType

Un simple bouton cliquable. Sa syntaxe est la suivante -

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

ResetType

Un bouton qui réinitialise tous les champs à leurs valeurs initiales. Sa syntaxe est la suivante -

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

ChoiceType

Un champ polyvalent permet à l'utilisateur de «choisir» une ou plusieurs options. Il peut être rendu sous forme de balise de sélection, de boutons radio ou de cases à cocher. Sa syntaxe est la suivante -

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

SubmitType

Un bouton d'envoi est utilisé pour soumettre les données du formulaire. Sa syntaxe est la suivante -

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

Fonction d'assistance de formulaire

Les fonctions d'assistance de formulaire sont des fonctions de brindille utilisées pour créer facilement des formulaires dans des modèles.

form_start

Renvoie une balise de formulaire HTML qui pointe vers une action, un itinéraire ou une URL valide. Sa syntaxe est la suivante -

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

form_end

Ferme la balise de formulaire HTML créée à l'aide de form_start. Sa syntaxe est la suivante -

{{ form_end(form) }}

textarea

Renvoie une balise textarea, éventuellement encapsulée avec un éditeur JavaScript de texte enrichi en ligne.

case à cocher

Renvoie une balise d'entrée compatible XHTML avec type = "checkbox". Sa syntaxe est la suivante -

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

input_password_tag

Renvoie une balise d'entrée compatible XHTML avec type = "password". Sa syntaxe est la suivante -

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

input_tag

Renvoie une balise d'entrée compatible XHTML avec type = "text". Sa syntaxe est la suivante -

echo input_tag('name');

étiquette

Renvoie une balise d'étiquette avec le paramètre spécifié.

bouton radio

Renvoie une balise d'entrée compatible XHTML avec type = «radio». Sa syntaxe est la suivante -

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

reset_tag

Renvoie une balise d'entrée compatible XHTML avec type = "reset". Sa syntaxe est la suivante -

echo reset_tag('Start Over');

sélectionner

Renvoie une balise de sélection contenant tous les pays du monde. Sa syntaxe est la suivante -

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

soumettre

Renvoie une balise d'entrée compatible XHTML avec type = «submit». Sa syntaxe est la suivante -

echo submit_tag('Update Record');

Dans la section suivante, nous allons apprendre à créer un formulaire à l'aide des champs de formulaire.

Demande de formulaire étudiant

Créons un simple formulaire de détails de l'étudiant en utilisant les champs du formulaire Symfony. Pour ce faire, nous devons suivre les étapes suivantes -

Étape 1: créer une application Symfony

Créez une application Symfony, formsample, à l'aide de la commande suivante.

symfony new formsample

Les entités sont généralement créées dans le répertoire «src / AppBundle / Entity /».

Étape 2: créer une entité

Créez le fichier «StudentForm.php» dans le répertoire «src / AppBundle / Entity /». Ajoutez les modifications suivantes dans le fichier.

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

Étape 3: Ajouter un StudentController

Allez dans le répertoire «src / AppBundle / Controller», créez le fichier «StudentController.php» et ajoutez-y le code suivant.

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

Étape 4: Rendre la vue

Allez dans le répertoire «app / Resources / views / student /», créez le fichier «new.html.twig» et ajoutez-y les modifications suivantes.

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

Maintenant, demandez l'url, "http: // localhost: 8000 / student / new" et il produit le résultat suivant.

Résultat

↰ Previous page Next page ↱