Symfony - Formularios

Symfony proporciona varias etiquetas integradas para manejar formularios HTML de forma fácil y segura. El componente Form de Symfony realiza el proceso de creación y validación de formularios. Conecta el modelo y la capa de vista. Proporciona un conjunto de elementos de formulario para crear un formulario html completo a partir de modelos predefinidos. Este capítulo explica los formularios en detalle.

Campos de formulario

La API del marco de trabajo Symfony admite un gran grupo de tipos de campos. Repasemos cada uno de los tipos de campo en detalle.

FormType

Se utiliza para generar un formulario en el marco Symfony. Su sintaxis es la siguiente:

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

Aquí, $studentinfo es una entidad de tipo Student. createFormBuilderse utiliza para crear un formulario HTML. El método add se usa paraadd elementos de entrada dentro del formulario. title se refiere a la propiedad del título del estudiante. TextType::classse refiere al campo de texto html. Symfony proporciona clases para todos los elementos html.

Tipo de texto

El campo TextType representa el campo de entrada de texto más básico. Su sintaxis es la siguiente:

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

Aquí, el nombre se asigna a una entidad.

TextareaType

Muestra un elemento HTML de área de texto. Su sintaxis es la siguiente:

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

EmailType

El campo EmailType es un campo de texto que se representa con la etiqueta de correo electrónico HTML5. Su sintaxis es la siguiente:

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

PasswordType

El campo PasswordType muestra un cuadro de texto de entrada de contraseña. Su sintaxis es la siguiente:

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

RangeType

El campo RangeType es un control deslizante que se representa con la etiqueta de rango HTML5. Su sintaxis es la siguiente:

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

PercentType

PercentType representa un campo de texto de entrada y se especializa en el manejo de datos porcentuales. Su sintaxis es la siguiente:

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

DateType

Genera un formato de fecha. Su sintaxis es la siguiente:

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

Aquí, Widget es la forma básica de renderizar un campo.

Realiza la siguiente función.

choice- Representa tres entradas seleccionadas. El orden de las selecciones se define en la opción de formato.
text - Representa una entrada de tres campos de tipo texto (mes, día, año).
single_text- Representa una sola entrada de tipo fecha. La entrada del usuario se valida en función de la opción de formato.

Tipo de casilla de verificación

Crea una casilla de verificación de entrada única. Esto siempre debe usarse para un campo que tenga un valor booleano. Su sintaxis es la siguiente:

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

Tipo de radio

Crea un solo botón de radio. Si se selecciona el botón de opción, el campo se establecerá en el valor especificado. Su sintaxis es la siguiente:

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

Tenga en cuenta que, los botones de opción no se pueden desmarcar, el valor solo cambia cuando se marca otro botón de opción con el mismo nombre.

RepeatedType

Este es un campo especial "grupo", que crea dos campos idénticos cuyos valores deben coincidir. Su sintaxis es la siguiente:

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

Esto se usa principalmente para verificar la contraseña o el correo electrónico del usuario.

ButtonType

Un simple botón en el que se puede hacer clic. Su sintaxis es la siguiente:

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

ResetType

Un botón que restablece todos los campos a sus valores iniciales. Su sintaxis es la siguiente:

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

ChoiceType

Un campo de usos múltiples se utiliza para permitir al usuario "elegir" una o más opciones. Se puede representar como una etiqueta de selección, botones de opción o casillas de verificación. Su sintaxis es la siguiente:

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

SubmitType

Se utiliza un botón de envío para enviar datos de formulario. Su sintaxis es la siguiente:

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

Función de asistente de formulario

Las funciones auxiliares de formulario son funciones twig que se utilizan para crear formularios fácilmente en plantillas.

form_start

Devuelve una etiqueta de formulario HTML que apunta a una acción, ruta o URL válida. Su sintaxis es la siguiente:

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

form_end

Cierra la etiqueta de formulario HTML creada con form_start. Su sintaxis es la siguiente:

{{ form_end(form) }}

textarea

Devuelve una etiqueta de área de texto, opcionalmente envuelta con un editor de JavaScript de texto enriquecido en línea.

caja

Devuelve una etiqueta de entrada compatible con XHTML con type = "checkbox". Su sintaxis es la siguiente:

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

input_password_tag

Devuelve una etiqueta de entrada compatible con XHTML con type = "contraseña". Su sintaxis es la siguiente:

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

input_tag

Devuelve una etiqueta de entrada compatible con XHTML con type = "text". Su sintaxis es la siguiente:

echo input_tag('name');

etiqueta

Devuelve una etiqueta de etiqueta con el parámetro especificado.

boton de radio

Devuelve una etiqueta de entrada compatible con XHTML con type = "radio". Su sintaxis es la siguiente:

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

reset_tag

Devuelve una etiqueta de entrada compatible con XHTML con type = "reset". Su sintaxis es la siguiente:

echo reset_tag('Start Over');

Seleccione

Devuelve una etiqueta selecta poblada con todos los países del mundo. Su sintaxis es la siguiente:

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

enviar

Devuelve una etiqueta de entrada compatible con XHTML con type = "submit". Su sintaxis es la siguiente:

echo submit_tag('Update Record');

En la siguiente sección, aprenderemos cómo crear un formulario usando campos de formulario.

Solicitud de formulario de estudiante

Creemos un formulario simple de detalles del estudiante usando los campos del formulario de Symfony. Para hacer esto, debemos seguir los siguientes pasos:

Paso 1: crea una aplicación Symfony

Crea una aplicación Symfony, formsample, usando el siguiente comando.

symfony new formsample

Las entidades se crean normalmente en el directorio "src / AppBundle / Entity /".

Paso 2: crear una entidad

Cree el archivo "StudentForm.php" en el directorio "src / AppBundle / Entity /". Agregue los siguientes cambios en el archivo.

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

Paso 3: agregar un StudentController

Vaya al directorio “src / AppBundle / Controller”, cree el archivo “StudentController.php” y agregue el siguiente código en él.

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

Paso 4: renderizar la vista

Vaya al directorio "app / Resources / views / student /", cree el archivo "new.html.twig" y agregue los siguientes cambios en él.

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

Ahora solicite la URL, “http: // localhost: 8000 / student / new” y producirá el siguiente resultado.

Resultado

↰ Previous page Next page ↱