将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插件，让助手为您完成工作！