Używanie CakePHP FormHelper z Bootstrap Forms

Question

CakePHP's FormHelper to sposób generowania formularzy podczas tworzenia aplikacji CakePHP. Jak można przypuszczać, to obejmuje wytwarzanie elementów wejściowych, tak jak poniżej:

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

która będzie produkować coś HTML tak:

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

Teraz, niestety, Bootstrap chce coś jak następuje:

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

Jak zrobić CakePHP produkcji tego wyjścia?

Answer 1

Oto jeden ze sposobów:

<?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' => '') 
)); ?> 

Answer 2

Twoja odpowiedź jest poprawna, ale z korzyścią dla innych użytkowników istnieje kilka innych usprawnień, które możesz zrobić, aby skorzystać z tekstem błąd/help:

Dodaj form-horizontal do class w Form->create() dla bardziej zwartych formularzy (etykiety po lewej stronie wejścia, a nie na górze)

Oto jak umieścić tekst pomocy pod polem (musi być zrobiony dla każdego pola), nie zapominając o clo se </div>.

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

i poprawnie wyświetlić błędy:

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

Wyjścia:

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

To dodatkowy narzut i nie tak czysty jak bootstrap ale to szybko naprawić. Alternatywą jest wykonanie każdego komunikatu o błędzie osobno.

i ładnie się układa. Nie znalazłem jednak jeszcze łatwego sposobu na skorzystanie z wiadomości inline.

Answer 3

Zainspirowany odpowiedź lericson, jest to moje ostatnie rozwiązanie dla 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();?> 

która produkuje:

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

I w zasadzie dodał 'formatowania' i klucze 'błędu', i dodał klasę label-label do elementu etykiety.

Answer 4

mały dodatek jeszcze opinii:

jeśli whant dodać tekst klasy i zmiana etykiety podstawowej, można napisać następny

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

Answer 5

Stosując tę ​​samą zasadę jak wyżej do form-> funkcji końcowej jako następująco:

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

celu wytworzenia:

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

Answer 6

Oto rozwiązanie dla 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')); ?> 

W przypadku pole potrzebuje własnego etykiecie:

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

Answer 7

miałem ten sam problem przy użyciu slywalker/cakephp-plugin-boost_cake, otwieram bilet i miał to naprawić w ciągu kilku godzin, on uaktualnionych do 1,03 i kazał mi go używać jak to

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

mam nadzieję, że pomaga kogoś innego zbyt

Answer 8

Aby dostać pracy w postaci poziomej w bootstrap z bootswatch musiałem użyć:

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

Następnie można po prostu użyć go jako normalny:

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

Answer 9

Luc Franken pisał ten link w jego komentarz: http://github.com/slywalker/cakephp-plugin-boost_cake

Zajęło mi to trochę czasu, więc dla tych, którzy wciąż szukają najprostszego rozwiązania:

Po prostu dodaj wtyczkę CakePHP Bootstrap z GitHub i pozwól, aby pomocnik wykonał zadanie za Ciebie!