Verwenden von CakePHP FormHelper mit Bootstrap-Formularen



Answers

Hier ist eine Lösung für 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')); ?>

Falls ein Feld ein eigenes Label benötigt:

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

CakePHPs FormHelper ist, wie Sie Formulare erstellen, wenn Sie CakePHP-Anwendungen erstellen. Wie man annehmen könnte, beinhaltet dies die Erzeugung von Eingabeelementen, wie folgt:

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

Das wird HTML so etwas erzeugen:

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

Nun, Bootstrap möchte leider so etwas wie das Folgende:

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

Wie stelle ich CakePHP diese Ausgabe her?




Kleiner Zusatz für weitere Kommentare:

Wenn Sie eine Klasse hinzufügen und den Etikettentext ändern, können Sie als nächstes schreiben

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



Ihre Antwort ist korrekt, aber zum Vorteil anderer Benutzer können Sie noch weitere Verbesserungen vornehmen, um den Fehler- / Hilfetext zu nutzen:

Fügen Sie Form->create() form-horizontal zur class im Form->create() für kompaktere Formulare (Beschriftungen links von der Eingabe anstatt oben)

Hier ist, wie man Hilfetext unter ein Feld legt (muss für jedes Feld getan werden), nicht zu vergessen, das </div> .

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

und um Fehler korrekt anzuzeigen:

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

Ausgänge:

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

Es ist extra Mark-up und nicht so ordentlich wie Bootstrap, aber es ist eine schnelle Lösung. Die Alternative besteht darin, jede Fehlermeldung einzeln auszuführen.

und es passt gut. Ich habe jedoch noch keine einfache Möglichkeit gefunden, inline Nachrichten zu verwenden.




Um es mit einer horizontalen Form im Bootstrap mit bootswatch arbeiten zu können, musste ich folgendes verwenden:

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

Dann kannst du es einfach wie gewohnt benutzen:

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



Links