使用bootstrap和cakeHP在输入中创建图标 - Create icon inside of input with bootstrap and cakePHP

Create icon inside of input with bootstrap and cakePHP

我有这个蛋糕HP代码：

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

有人能帮忙吗？

我的解决方案是这样的：

<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自定义结构。

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。