Zend Framework форма с использованием Bootstrap

Zend Framework форма с использованием Bootstrap
Для того, чтобы показать как работают стандартные декораторы формы на примере, я решил реализовать вполне реальную задачу: стилизировать форму используя Bootstrap.

Что такое Bootstrap?

Если Вы еще не знаете, что такое Bootstrap, попробую объяснить в двух словах. Bootstrap — это простой и легко настраиваемый HTML, CSS и Javascript фреймворк для более быстрой и удобной Web-разработки. Он содержит большое число компонентов, которые могут быть быть использованы почти в любом проекте. Bootstrap можно использовать как каркас для разработки фронтэнд части приложения. Подробнее читайте на официальном сайте Bootstrap.

Для начала создадим класс формы, в котором опишем основные элементы горизонтальной формы: поле ввода логина (email), поле ввода пароля, чекбокс Remember me и submit-кнопка.

[codegroup] [php tab=»Класс формы»] class Default_Form_Bootstrap extends Zend_Form
{

public function init()
{

$login = new Zend_Form_Element_Text(‘login’);
$login->setRequired(‘true’)
->setLabel(‘Email:’);

$password = new Zend_Form_Element_Password(‘password’);
$password->setRequired(‘true’)
->setLabel(‘Password:’);

$rememberMe = new Zend_Form_Element_Checkbox(‘remember_me’);
$rememberMe->setLabel(‘Remember me’);

$submit = new Zend_Form_Element_Submit(‘sign_in’);
$submit->setLabel(‘Sign In’);

$this->addElements(array($login, $password, $rememberMe, $submit));
}

}
[/php] [html tab=»Генерируемый контент»]

 
[/html] [/codegroup]

Теперь разберемся с формой. Избавимся от оборачивания содержимого формы в тег dl. Т.к. за это отвечает декоратор HtmlTag, необходимо отказаться от его использования. Поэтому зададим форме два декоратора FormElements и Form. А еще необходимо задать класс .form-horizontal форме и установить атрибут

role="form"

.

[codegroup] [php tab=»Класс формы»] class Default_Form_Bootstrap extends Zend_Form
{

public function init()
{
$this->setAttribs(array(‘class’ => ‘form-horizontal’, ‘role’ => ‘form’))
->setDecorators(array(‘FormElements’, ‘Form’));

$login = new Zend_Form_Element_Text(‘login’);
$login->setRequired(‘true’)
->setLabel(‘Email:’);

$password = new Zend_Form_Element_Password(‘password’);
$password->setRequired(‘true’)
->setLabel(‘Password:’);

$rememberMe = new Zend_Form_Element_Checkbox(‘remember_me’);
$rememberMe->setLabel(‘Remember me’);

$submit = new Zend_Form_Element_Submit(‘sign_in’);
$submit->setLabel(‘Sign In’);

$this->addElements(array($login, $password, $rememberMe, $submit));
}

}
[/php] [html tab=»Генерируемый контент»]


 
[/html] [/codegroup]


Зададим базовые декораторы, которые необходимы для всех элементов формы: ViewHelper и HtmlTag, причем как видно в примере, HtmlTag должен оборачивать контент в тег div с классом .form-group. Также, присвоим класс .form-control полям ввода.

[codegroup] [php tab=»Класс формы»]