使用 bootstrap 和 cakePHP 在输入中创建图标

Question

我有这个 cakePHP 代码：

<?php

  echo $this->Form->input('about_me',
         array('label'  => __l('About Me'),
               'class'  => 'form-control',
               'before' => '<div class="form-group form-group-icon-left"><i class="fa fa-user input-icon input-icon-show"></i>',
               'after'  => '</div>',
               array('escape' => false)
         )
       );
?>

我希望输出是（为了可读性而缩进）：

<div class="col-md-6">
 <div class="form-group form-group-icon-right"><i class="fa fa-map-marker input-icon"></i>
  <label>About me</label>
  <input class="form-control" placeholder="Write something" type="text" />
 </div>

任何人都可以帮忙吗？

Answer 1

我的解决方案是这样的：

<div class="form-group form-group-icon-right">
    <i class="fa fa-map-marker input-icon"></i>
    <?= $this->Form->input('about_me', [
        'div' => false,
        'label' => 'About me',
        'placeholder' => 'Write something',
    ];?>
</div>

我通常设置'label' => false ，只对输入字段使用 CakePHP 函数，并在纯 HTML 中自定义结构。

Answer 2

Skatch 的回答很好，但您需要进一步修改它以确保它考虑到验证。 如果您不使用包装 div 的表单助手，则不会在适当的情况下为您生成error和required类。

看起来您的示例代码就快完成了。 但是，不是在after和before属性中设置<div> ，而是使用div属性来定义<div>类：-

<div class="col-md-6">
<?php
  echo $this->Form->input('about_me',
     array('label'  => __l('About Me'),
           'class'  => 'form-control',
           'before' => '<i class="fa fa-user input-icon input-icon-show"></i> ',
           'div'  => 'form-group form-group-icon-left',
           'placeholder' => 'Write something'
        )
   );
?>
</div>

您还可以将placeholder定义为输入的属性，如图所示。 您不需要使用'escape' => false 。