Le blog du pangolin

Accueil > Programmation > PHP > Laravel > Laravel 4 - Les formulaires

Laravel 4 - Les formulaires

jeudi 30 mai 2013, par Super Pangolin

Laravel 4 fournit des aides à l’écriture de formulaires. En voici le fonctionnement.

Tout d’abord, ouvrons et fermons notre formulaire dans notre template (syntaxe blade) :

  1. <document>
  2.     <body>
  3.     {{ Form::open(array('url' => 'formulaire2')) }}
  4.     Ici, mon formulaire
  5.     {{ Form::close() }}
  6.     </body>
  7. </document>

Télécharger

qui va générer :

  1. <document>
  2.     <form method="POST" action="http://laravel4.local/formulaire2" accept-charset="UTF-8"><input name="_token" type="hidden" value="6FmYQTu2FgyO6avmpkc71c2DeuYtlIohsQQ3C699">    Ici, mon formulaire
  3.     </form>    
  4. </document>

Télécharger

Vous l’aurez compris, le paramètre de la méthode open contient l’action du formulaire. Vous pouvez passer tous les paramètres que vous voulez en les ajoutant au tableau contenant les attributs de l’élément form. Par exemple :

  1.     {{ Form::open(array('url' => 'formulaire2', 'method' => 'get')) }}

L’action peut être également une route nommée :

  1.     {{ Form::open(array('route' => 'apropos', 'method' => 'get')) }}
  2.     Ici, mon formulaire
  3.     {{ Form::close() }}

Télécharger

ou encore l’action d’un contrôleur

  1.     {{ Form::open(array('action' => 'controleur@monAction')) }}
  2.     Ici, mon formulaire
  3.     {{ Form::close() }}

Télécharger

ça y est, notre formulaire a une action, il est temps d’y mettre des inputs. Voici comment.

Les inputs

Textes

  1. {{ Form::text('pseudo') }}

qui va générer

  1. <input name="pseudo" type="text">

Le second argument de cette méthode permet de définir une valeur par
défaut :

  1. {{ Form::text('pseudo', 'Votre pseudo') }}

Rendu :

<input name="pseudo" type="text" value="Votre pseudo">

On peut, tout comme pour les formulaires, préciser les valeurs des attributs de l’input :

  1. {{ Form::text('pseudo', 'Votre pseudo', array('id' => 'pseudo')) }}

ce qui donnera :

<input id="pseudo" name="pseudo" type="text" value="Votre pseudo">

Et ça marche !! Rien de plus à savoir. Sur le même modèle, nous trouverons les :

Mots de passe

Le code :

  1. {{ Form::password('motDePasse', array('id' => 'motDePasse')) }}

qui génèrera :

<input id="motDePasse" name="motDePasse" type="password" value="">

Nous ne pouvons pas définir de valeur par défaut pour les mots de passe.

textarea

  1. {{ Form::textarea('monTexte', 'Bla bla blablabla', array('id' => 'monTexte')) }}

Résultat :

<textarea id="monTexte" name="monTexte" cols="50" rows="10">Bla bla blablabla</textarea>

Checkbox

  1. {{ Form::checkbox('administrateur', 'oui') }}

Code html :

<input name="administrateur" type="checkbox" value="oui">

Les radios et checkbox

  1.     {{ Form::radio('emploi', 'developpeur', true) }}
  2.     {{ Form::radio('emploi', 'chefDeProjet') }}

Télécharger

<input checked="checked" name="emploi" type="radio" value="developpeur">
<input name="emploi" type="radio" value="chefDeProjet">

La syntaxe est identique pour les checkbox.

Afin de générer une checkbox déjà cochée, on ajoute un troisième argument :

  1. {{ Form::checkbox('newsletter', 'newsletter', true) }}
<input checked="checked" name="newsletter" type="checkbox" value="newsletter">

Les fichiers

  1. {{ Form::file('avatar', array('id' => 'avatar')) }}
<input id="avatar" name="avatar" type="file">

Les listes

  1. {{ Form::select('loisirs', array('1' => 'Cinéma', '2' => 'Console', 'intello' => 'Musées')) }}
<select name="loisirs"><option value="1">Cin&eacute;ma</option><option value="2">Console</option><option value="intello">Mus&eacute;es</option></select>

Le deuxième paramètre de "select" est la valeur sélectionnée par défaut (nous passerons ici ’intello’ pour sélectionner la troisième valeur). Comme d’habitude, le troisième argument est un tableau d’attributs. Si nous voulons une liste à sélection multiple, nous écrirons donc :

  1. {{ Form::select('loisirs', array('1' => 'Cinéma', '2' => 'Console', '3' => 'Musées'), null, array('multiple' => 'multiple')) }}

Les boutons

  1. {{ Form::button('Clique si tu oses!!', array('onclick'=> "javascript:alert(\"Tu as osé!!!\")")) }}

va générer

<button type="button" onclick="javascript:alert(&quot;Tu as osé!!!&quot;)">Clique si tu oses!!</button>

La syntaxe est la même pour les "submit".

Les libellés (label)

La méthode "label" prend deux arguments : l’id de l’input et le texte à aficher :

  1. {{ Form::label('pseudo', 'Choisissez un pseudo') }}

Si le label est placé juste avant l’input, l’id de celui-ci est automatiquement initialisé avec son nom. Le code :

  1. {{ Form::label('pseudo', 'Choisissez un pseudo') }}
  2. {{ Form::text('pseudo', 'Votre pseudo') }}

Télécharger

est équivalent à

  1. {{ Form::label('pseudo', 'Choisissez un pseudo') }}
  2. {{ Form::text('pseudo', 'Votre pseudo', array('id' => 'pseudo')) }}

Télécharger

Je pense que vous savez à présent générer vos formulaires. Nous allons voir à présent comment utiliser les données envoyées à votre serveur.

Un message, un commentaire ?

Qui êtes-vous ?
Votre message

Pour créer des paragraphes, laissez simplement des lignes vides.

Programmation

Dans la même rubrique

Mots-clés

2008 - 2024 Le blog du pangolin
Plan du site | | Contact | RSS 2.0

SPIP