Personnalisez l'affichage de vos formulaires CakePHP avec l'option « format »

⏲️ ~4 min de lecture

Publié le par Pierre
cakephp php

Nous allons mettre en avant aujourd'hui une option de CakePHP que nous voyons assez peu utilisée et qui peut pourtant rendre de gros services au développeur lorsqu'il s'agit de personnaliser ses formulaires.

Lorsque l'on crée un formulaire en utilisant les Helpers de CakePHP sans aucune option, le rendu est similaire à l'image ci-dessous :

formulaire cakephp par défaut

Voici le code correspondant à l'image :

<div class="posts form">Form->create('Post', array('inputDefaults' => array( 'before' => '-- BEFORE --', 'between' => '-- BETWEEN --', 'after' => '-- AFTER --', ))); ?>

<fieldset><legend></legend>Form->input('title'); echo $this->Form->input('content'); echo $this->Form->input('active'); ?></fieldset>

Form->end(\_\_('Submit')); ?></div>

<div class="actions">

###

- Html->link(\_\_('List Posts'), array('action' => 'index')); ?>

</div>

Comme vous le voyez, nous avons utilisé les clés before, between et after afin d'illustrer les emplacements disponibles pour ajouter du code personnalisé.

Par défaut l'ordre utilisé par le FormHelper est donc le suivant (extrait du docblock de FormHelper::input) :

  • Default input format order: array('before', 'label', 'between', 'input', 'after', 'error')
  • Default checkbox format order: array('before', 'input', 'between', 'label', 'after', 'error')

Vous pouvez entièrement personnaliser cet ordre avec la clé format des options de FormHelper::input (ou en passant par inputDefaults). Il suffit de réordonner les valeurs ci-dessus dans le tableau passé à cette clé et le tour est joué. Les valeurs non contenues dans le tableau ne seront pas affichées.

Par exemple, nous pourrions modifier le formulaire comme suit :

<?php
echo $this->Form->input('title', array(
'format' => array('label', 'between', 'input', 'error', 'after')
));
echo $this->Form->input('content');
echo $this->Form->input('active', array(
'between' => '
'
, // Pour visualiser directement le changement en contournant le float:left de input
'format' => array('before', 'label', 'between', 'input', 'after', 'error')
));
?>

et obtiendrons alors le rendu ci-dessous :
Formulaire CakePHP personnalisé avec "format"

Vous êtes désormais libre de générer très simplement le markup que vous souhaitez pour vos formulaires ... en tout élégance !

Cet article vous a plu ? Sachez que nous recrutons !

← Accueil