將CakePHP FormHelper與Bootstrap Forms一起使用

Question

CakePHP's FormHelper是您在製作CakePHP應用程序時如何生成表單。正如人們可能會認爲，這包括生成輸入元素，就像這樣：

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

將產生HTML是這樣的：

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

現在，可悲的是，引導要像下面這樣：

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

如何讓CakePHP生成此輸出？

Answer 1

這裏有一種方法：

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

你的答案是正確的，但對其他用戶的利益，還有一些其他的東東可以做採取錯誤/幫助文本的優勢：

添加form-horizontal在Form->create()更緊湊的形式（輸入左邊的標籤，而不是在頂部）

下面是如何把幫助文本字段下方class（必須爲每個字段做），不忘CLO選擇</div>。

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

，並正確顯示的錯誤：

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

輸出：

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

這是額外的加價，而不是整齊的引導，但它是一個快速解決方案。另一種方法是單獨執行每個錯誤消息。

它排隊很好。然而，我還沒有發現一個簡單的方法來使用inline消息。

Answer 3

通過lericson的回答啓發，這是我的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();?> 

主要生產：

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

我基本上都添加了 '格式' 和 '錯誤' 鍵，並將控件標籤類添加到標籤元素。

Answer 4

小添加另一種意見：

如果whant添加類和更改標籤基地的文字，你可以寫下一

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

Answer 5

運用同樣的原則之上的形式 - >端功能如下：

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

爲了產生：

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

Answer 6

下面是引導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')); ?> 

的解決方案如果一個字段需要自己的標籤：

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

Answer 7

我使用slywalker/CakePHP的 - 插件 - boost_cake有同樣的問題，我開出罰單他有它在幾個小時內，他更新到1.03修復，並告訴我這樣使用它

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

我希望它可以幫助另外一個人太

Answer 8

爲了得到它在與bootswatch引導水平的形式工作，我不得不使用：

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

然後，你可以使用它作爲正常：

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

Answer 9

呂克·弗蘭肯張貼此鏈接他的評論：http://github.com/slywalker/cakephp-plugin-boost_cake

我花了一段時間來注意到它，所以對於那些誰仍然在尋找最簡單的辦法：

只需從GitHub添加CakePHP Bootstrap插件，讓助手爲您完成工作！