Использование CakePHP FormHelper с формами Bootstrap
CakePHP FormHelper - это то, как вы создаете формы при создании приложений CakePHP. Как можно было бы предположить, это включает в себя создание входных элементов, например:
$this->Form->input('abc');
Что создаст HTML что-то вроде этого:
<div class="input text">
<label for="ModelAbc">Abc</label>
<input name="data[Model][Abc]" class="" maxlength="250" type="text" id="ModelAbc">
</div>
Теперь, к сожалению, 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>
Как сделать CakePHP таким выходом?
Ответы
Ответ 1
Вдохновленный 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();?>
Что производит:
<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>
Я в основном добавил ключи "format" и "error" и добавил класс label-label в элемент label.
Ответ 2
Здесь решение для 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')); ?>
В случае, если поле нуждается в собственной метке:
<?php echo $this->Form->input('username', array('label' => array('text' => 'Your username', 'class' => 'col-lg-2 control-label'))); ?>
Ответ 3
Здесь один из способов:
<?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' => '')
)); ?>
Ответ 4
Ваш ответ верный, но для других пользователей есть некоторые другие настройки, которые вы можете сделать, чтобы воспользоваться текстом ошибки/справки:
Добавьте form-horizontal
в class
в Form->create()
для более компактных форм (метки слева от ввода, а не сверху)
Здесь, как поместить текст справки под полем (должно быть сделано для каждого поля), не забывая закрыть </div>
.
echo $this->Form->input('field_name', array(
'after'=>'<span class="help-block">This text appears
underneath the input.</span></div>'));
и правильно отобразить ошибки:
// cake 2.0
echo $this->Form->input('abc', array(
'error' => array('attributes' => array('class' => 'controls help-block'))
));
Выходы:
<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>
Это дополнительная надбавка и не такая аккуратная, как бутстрап, но это быстрое исправление. Альтернативой является индивидуальное выполнение каждого сообщения об ошибке.
и он хорошо сочетается. Однако я не нашел простой способ использовать сообщения inline
.
Ответ 5
Применяя тот же принцип, что и выше, к функции form- > end следующим образом:
<?php echo $this->Form->end(array(
'label' => __('Submit'),
'class' => 'btn',
'div' => array(
'class' => 'control-group',
),
'before' => '<div class="controls">',
'after' => '</div>'
));?>
Чтобы произвести:
<div class="control-group">
<div class="controls">
<input class="btn" type="submit" value="Submit">
</div>
</div>
Ответ 6
small добавить для других комментариев:
Если вы хотите добавить класс и изменить основной текст метки, вы можете написать следующий
<?php echo $this->Form->input('Fieldname', array(
'label' => array('class' => 'control-label','text'=>'HERE YOU LABEL TEXT')
)); ?>
Ответ 7
У меня была такая же проблема с использованием 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>'
)); ?>
Я надеюсь, что это тоже поможет кому-то еще.
Ответ 8
Чтобы заставить его работать с горизонтальной формой в 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' ) ),
)
)
);
Тогда вы можете просто использовать его как обычно:
echo $this->Form->input( 'User.username' );
Ответ 9
Luc Franken опубликовал эту ссылку в своем комментарии: http://github.com/slywalker/cakephp-plugin-boost_cake
Мне потребовалось некоторое время, чтобы заметить это, поэтому для тех, кто все еще ищет простейшее решение:
Просто добавьте плагин CakePHP Bootstrap из GitHub и дайте помощнику выполнить эту работу за вас!