使用 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。