web-dev-qa-db-fra.com

Utiliser CakePHP FormHelper avec Bootstrap Forms

FormHelper de CakePHP est la façon dont vous générez des formulaires lors de la création d'applications CakePHP. Comme on pourrait le supposer, cela inclut la génération d'éléments d'entrée, comme ceci:

$this->Form->input('abc');

Ce qui produira quelque chose de HTML comme ceci:

<div class="input text">
  <label for="ModelAbc">Abc</label>
  <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>

Maintenant, malheureusement, Bootstrap veut quelque chose comme ceci:

<div class="control-group">
  <label for="ModelAbc" class="control-label">Abc</label>
  <div class="controls">
    <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
  </div>
</div>

Comment faire pour que CakePHP produise cette sortie?

phpcakephptwitter-bootstrap
30
lericson

Inspiré par la réponse de lericson, voici ma dernière solution pour CakePHP 2.x:

<?php echo $this->Form->create('ModelName', array(
    'class' => 'form-horizontal',
    'inputDefaults' => array(
        'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
        'div' => array('class' => 'control-group'),
        'label' => array('class' => 'control-label'),
        'between' => '<div class="controls">',
        'after' => '</div>',
        'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),
    )));?>
<fieldset>
<?php echo $this->Form->input('Fieldname', array(
    'label' => array('class' => 'control-label'), // the preset in Form->create() doesn't work for me
    )); ?>
</fieldset>
<?php echo $this->Form->end();?>

Ce qui produit:

<form...>
<fieldset>
<div class="control-group required error">
    <label for="Fieldname" class="control-label">Fieldname</label>
    <div class="controls">
        <input name="data[Fieldname]" class="form-error" maxlength="255" type="text" value="" id="Fieldname"/>
        <span class="help-inline">Error message</span>
    </div>
</div>
</fieldset>
</form>

J'ai essentiellement ajouté les clés 'format' et 'error', et ajouté la classe control-label à l'élément label.

35
domsom

Voici une solution pour Bootstrap 3

<?php echo $this->Form->create('User', array(
'class' => 'form-horizontal', 
'role' => 'form',
'inputDefaults' => array(
    'format' => array('before', 'label', 'between', 'input', 'error', 'after'),
    'div' => array('class' => 'form-group'),
    'class' => array('form-control'),
    'label' => array('class' => 'col-lg-2 control-label'),
    'between' => '<div class="col-lg-3">',
    'after' => '</div>',
    'error' => array('attributes' => array('wrap' => 'span', 'class' => 'help-inline')),
))); ?>
<fieldset>
    <legend><?php echo __('Username and password'); ?></legend>
    <?php echo $this->Form->input('username'); ?>
    <?php echo $this->Form->input('password'); ?>
</fieldset>
<?php echo $this->Form->end(__('Login')); ?>

Dans le cas où un champ a besoin de sa propre étiquette:

<?php echo $this->Form->input('username', array('label' => array('text' => 'Your username', 'class' => 'col-lg-2 control-label'))); ?>
18
ZuyRzuuf

Voici une façon:

<?php echo $this->Form->create(null, array(
    'inputDefaults' => array(
        'div' => array('class' => 'control-group'),
        'label' => array('class' => 'control-label'),
        'between' => '<div class="controls">',
        'after' => '</div>',
        'class' => '')
)); ?>
11
lericson

Appliquer le même principe que ci-dessus à la fonction form-> end comme suit:

<?php echo $this->Form->end(array(
    'label' => __('Submit'),
    'class' => 'btn',
    'div' => array(
        'class' => 'control-group',
        ),
    'before' => '<div class="controls">',
    'after' => '</div>'
));?>

Produire:

<div class="control-group">
  <div class="controls">
    <input class="btn" type="submit" value="Submit">
  </div>
</div>
2
JamesLee

Votre réponse est correcte, mais pour le bénéfice des autres utilisateurs, vous pouvez effectuer d'autres ajustements pour tirer parti du texte d'erreur/d'aide:

Ajoutez form-horizontal À class dans la Form->create() pour des formulaires plus compacts (étiquettes à gauche de l'entrée plutôt qu'en haut)

Voici comment mettre du texte d'aide sous un champ (à faire pour chaque champ), sans oublier de fermer le </div>.

echo $this->Form->input('field_name', array(
            'after'=>'<span class="help-block">This text appears 
               underneath the input.</span></div>'));

et pour afficher correctement les erreurs:

// cake 2.0
echo $this->Form->input('abc', array(
    'error' => array('attributes' => array('class' => 'controls help-block'))
));

Les sorties:

<div class="control-group required error">
  <label for="ModelAbc" class="control-label">Abc</label>
  <div class="controls">
    <input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
  </div>
  <!-- error message -->
  <div class="controls help-block">This is the error validation message.</div>
  <!-- error message -->
</div>

C'est du balisage supplémentaire et pas aussi soigné que bootstrap mais c'est une solution rapide. L'alternative est de faire chaque message d'erreur individuellement.

et il s'aligne bien. Cependant, je n'ai pas encore trouvé de moyen simple d'utiliser les messages inline.

2
Ross

petite annonce pour un autre commentaire:

si vous voulez ajouter une classe et changer le texte de base de l'étiquette, vous pouvez écrire ensuite

<?php echo $this->Form->input('Fieldname', array(
    'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')
)); ?>
1
DedMorozzz

J'ai eu le même problème en utilisant slywalker/cakephp-plugin-boost_cake, j'ai ouvert un ticket et il l'a réparé en quelques heures, il a mis à jour à 1,03 et m'a dit de l'utiliser comme ça

<?php echo $this->Form->input('email', array(
    'label' => array(
        'text' => __('Email:'),
    ),
    'beforeInput' => '<div class="input-append">',
    'afterInput' => '<span class="add-on"><i class="icon-envelope"></i></span></div>'
)); ?>

J'espère que ça aide quelqu'un d'autre aussi

1
user2658814

Pour le faire fonctionner avec une forme horizontale dans bootstrap avec bootswatch j'ai dû utiliser:

echo $this->Form->create(
    'User',
    array(
        'action'        => 'add',
        'admin'         => 'false',
        'class'         => 'form-horizontal',
        'inputDefaults' => array(
            'format'  => array( 'before', 'label', 'between',
                                'input', 'error', 'after' ),
            'class' => 'form-control',
            'div'     => array( 'class' => 'form-group' ),
            'label'   => array( 'class' => 'col-lg-2 control-label' ),
            'between' => '<div class="col-lg-10">',
            'after'   => '</div>',
            'error'   => array( 'attributes' => array( 'wrap'  => 'span',
                                                       'class' => 'text-danger' ) ),
        )
    )
);

Ensuite, vous pouvez simplement l'utiliser comme d'habitude:

echo $this->Form->input( 'User.username' );
1
Brulath

Luc Franken a posté ce lien dans son commentaire: http://github.com/slywalker/cakephp-plugin-boost_cake

Il m'a fallu un certain temps pour le remarquer, donc pour ceux qui recherchent toujours la solution la plus simple:

Ajoutez simplement le plugin CakePHP Bootstrap de GitHub et laissez l'assistant faire le travail pour vous!

0
bdereta