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类。

看起来你的示例代码几乎就在那里。但是，不是在<div>和after属性中设置before，而是使用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。

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

2 个答案: