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>

现在，遗憾的是，Bootstrap需要以下内容：

<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

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

我基本上添加了'format'和'error'键，并将control-label类添加到label元素。

Answer 2

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

如果某个字段需要自己的标签：

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

Answer 3

这是一种方式：

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

您的回答是正确的，但为了其他用户的利益，您可以采取其他一些调整来利用错误/帮助文本：

将form-horizontal添加到class的{{1}}以获取更紧凑的表单（输入左侧的标签，而不是顶部的标签）

以下是如何将帮助文字放在字段下方（必须为每个字段完成），不要忘记关闭Form->create()。

</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>  <div class="controls help-block">This is the error validation message.</div>  </div>消息。

Answer 5

将与上述相同的原理应用于form-＆gt; end函数，如下所示：

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

小添加另一个评论：如果你想添加类和更改标签基础文本，你可以写下

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

Answer 7

我使用slywalker / cakephp-plugin-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在bootstrap中使用水平表单，我必须使用：

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

Luc Franken在评论中发布了此链接：http://github.com/slywalker/cakephp-plugin-boost_cake

我花了一段时间才注意到它，所以对那些仍在寻找最简单解决方案的人来说：

只需从GitHub添加CakePHP Bootstrap插件，让佣工为您完成工作！

使用CakePHP FormHelper和Bootstrap Forms

9 个答案: