php 在 Bootstrap 表单中使用 CakePHP FormHelper
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9495951/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using CakePHP FormHelper with Bootstrap Forms
提问by lericson
CakePHP's FormHelperis how you generate forms when making CakePHP applications. As one might assume, this includes generating input elements, like so:
CakePHP 的 FormHelper是您在制作 CakePHP 应用程序时生成表单的方式。正如人们可能假设的那样，这包括生成输入元素，如下所示：
$this->Form->input('abc');
Which will produce HTML something like this:
这将产生这样的 HTML：
<div class="input text">
<label for="ModelAbc">Abc</label>
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
Now, sadly, Bootstrap wants something like the following:
现在，可悲的是，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>
How do I make CakePHP produce this output?
我如何让 CakePHP 产生这个输出？
回答by domsom
Inspired by lericson's answer, this is my final solution for CakePHP 2.x:
受 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();?>
Which produces:
其中产生：
<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 basically added the 'format' and 'error' keys, and added the control-label class to the label element.
我基本上添加了“格式”和“错误”键，并将控件标签类添加到标签元素。
回答by ZuyRzuuf
Here's a solution for Bootstrap 3
这是 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')); ?>
In case a field needs its own label:
如果字段需要自己的标签：
<?php echo $this->Form->input('username', array('label' => array('text' => 'Your username', 'class' => 'col-lg-2 control-label'))); ?>
回答by lericson
Here's one way:
这是一种方法：
<?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' => '')
)); ?>
回答by Ross
Your answer is correct, but for the benefit of other users there's some other tweaks you can do to take advantage of the error/help text:
您的回答是正确的，但为了其他用户的利益，您还可以进行一些其他调整以利用错误/帮助文本：
Add form-horizontalto classin the Form->create()for more compact forms (labels on the left of the input, rather than on top)
添加form-horizontal到class在Form->create()更紧凑的形式（标签上输入的左边，而不是在顶部）
Here's how to put help text underneath a field (has to be done for each field), not forgetting to close the </div>.
以下是如何将帮助文本放在字段下方（必须为每个字段完成），不要忘记关闭</div>.
echo $this->Form->input('field_name', array(
'after'=>'<span class="help-block">This text appears
underneath the input.</span></div>'));
and to correctly display errors:
并正确显示错误：
// cake 2.0
echo $this->Form->input('abc', array(
'error' => array('attributes' => array('class' => 'controls help-block'))
));
Outputs:
输出：
<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>
It's extra mark-up and not as neat as bootstrap but it's a quick fix. The alternative is to do each error message individually.
这是额外的标记，不像引导程序那么整洁，但它是一个快速修复。另一种方法是单独处理每个错误消息。
and it lines up nicely. I haven't discovered an easy way to make use of inlinemessages yet however.
它排列得很好。inline然而，我还没有发现一种使用消息的简单方法。
回答by JamesLee
Applying the same principle as above to the form->end function as follows:
将与上述相同的原理应用于 form->end 函数如下：
<?php echo $this->Form->end(array(
'label' => __('Submit'),
'class' => 'btn',
'div' => array(
'class' => 'control-group',
),
'before' => '<div class="controls">',
'after' => '</div>'
));?>
To produce:
生产：
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value="Submit">
</div>
</div>
回答by DedMorozzz
small add for another comments:
小补充另一个评论：
if you whant add class and change label base text, you can write next
如果您想添加类并更改标签基本文本，则可以编写下一步
<?php echo $this->Form->input('Fieldname', array(
'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')
)); ?>
回答by user2658814
I had the same problem using slywalker / cakephp-plugin-boost_cake, I open a ticket and he had it fix in a few hours, he updated to 1,03 and told me to use it like this
我在使用 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>'
)); ?>
I hope it helps some one else too
我希望它也能帮助其他人
回答by Brulath
To get it working with a horizontal form in bootstrap with bootswatch I had to use:
为了让它在 bootstrap 中以水平形式使用 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' ) ),
)
)
);
Then you can just use it as normal:
然后你就可以正常使用它了：
echo $this->Form->input( 'User.username' );
回答by bdereta
Luc Franken posted this link in his comment: http://github.com/slywalker/cakephp-plugin-boost_cake
Luc Franken 在他的评论中发布了这个链接：http: //github.com/slywalker/cakephp-plugin-boost_cake
It took me a while to notice it, so for those who are still looking for the simplest solution:
我花了一段时间才注意到它，所以对于那些仍在寻找最简单解决方案的人：
Simply add the CakePHP Bootstrap plugin from GitHub and let the helper do the job for you!
只需从 GitHub 添加 CakePHP Bootstrap 插件，让助手为您完成工作！
