Bonjour,
dans le but d'adapter un formulaire réalisé sous cakephp avec bootstrap j'utilise le code suivant -ici un champs input- qui marche à la perfection (sans toucher au bootstrap) :
<div class="form-actions">
<h2 class="header">Zone d'édition</h2>
<?php echo $this->Form->create('Post',array('class'=>'form-horizontal')); ?>
<div class="control-group">
<?php echo $this->Form->label('name', $text = 'Titre', $options = array('class' => 'control-label')); ?>
<?php echo $this->Form->input('name',array('label'=>false,'class'=>'input-xlarge','div'=>'controls')) ;?>
</div>
<div class="form-actions">
<?php echo $this->Form->button('Valider',array('class'=>'btn btn-primary','type'=>'submit')); ?>
</div>
<!-- A la fin je peux ajouter cette ligne ça ne change rien au code mais ça me parrait bien -rectifiez-moi si je me trempe -->
<?php echo $this->Form->end(); ?>
</div>
le code ainsi généré ressemble à celà :
<form action="/admin/pages/edit/1" class="form-horizontal" id="PostAdminEditForm" method="post" accept-charset="utf-8"><div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
<div class="control-group">
<label for="PostName" class="control-label">Titre</label>
<div class="controls">
<input name="data[Post][name]" class="input-xlarge" maxlength="255" type="text" id="PostName"/>
</div>
</div>
<div class="form-actions">
<button class="btn btn-primary" type="submit">Valider</button>
</div>
</form>
Je vous demande de noter à la fin le code normalement généré par $this->Html->Form->end('Valider'); et qui normalement ressemble à ça :
<div class="form-actions">
<div class="submit"><input type="submit" value="valider"/></div>
</div>
La différence entre l'approche bootstrap et celle de cakephp est que bootstrap préfère considérer le bouton de validation comme une balise "button" alors que cakephp la considère comme "input"
Si je vous montre tout ça c'est d'abord pour partager le code ci-dessus et aussi pour signaler que sur lq documentation de cakephp à propos de Form->end() on précise "l’utilisation de end() permet également au FormHelper d’ajouter les champs cachées dont le component Security SecurityComponent à besoin."
Je n'ai pas trouvé d'option qui permet de transformer la balise correpondant à end(), et je me demande si ne pas utiliser end() compromet le component security (Actuellement désactivé pour-moi le temps de finir le développement) et si le fait d'ajouter un end() vide à la fin ne permet pas de tout remettre dans l'ordre ou alors ça ne sert à rien si la validation ne se fait pas par un bouton généré par un end() authentique.
Merci de partager votre expérience sur ce point.
Désolé pour cette usine à gaz, en fait il faut remplacer le end() vide sue le premier code par ça
<?php echo $this->Form->end(array('label'=>'Valider','div'=>array('class'=>'form-actions'), 'class'=>'btn btn-primary')); ?>
Et bien sur supprimer la dernièere div.form-actions
et ça y est la correpondance est presque parfaite;
(Les puristes et perfectionnistes remarqueront que le bouton final aura une largeur moins de quelques pixels à peine visibles et une nuance de bleu à peine plus claire que le bouton de bootstrap mais ça a le mérite d'utiliser le end de cake sans toucher au bootstrap (2.3.2). Je suis pas 'jedi' en css et bootstrap pour avoir un meilleur resultat)
Ceux qui suivent le tuto creation de site qvec cakephp pourraient utiliser ce code au lieu de la solution proposée par grafikart pour une ancienne version du bootstrap.
Voici un affichage plus propre avec un bouton gris :
<h2 class="page-header text-center">Zone d'édition</h2>
<?php echo $this->Form->create('Post',array('class'=>'form-horizontal')); ?>
<div class="control-group">
<?php echo $this->Form->label('name', $text = 'Titre', $options = array('class' => 'control-label')); ?>
<?php echo $this->Form->input('name',array('label'=>false,'div'=>'controls')) ;?>
</div>
<?php echo $this->Form->end(array('label'=>'Valider','div'=>array('class'=>'controls'), 'class'=>'btn')
); ?>