13. Хелперы форм
Кроме контруктора форм YII предоставляет несколько хелперов для создания формы.
Например, для создания текстового поля, можно вызвать метод CHtml::textField(), для выпадающего списка — CHtml::dropDownList().
Использование хелперов расширяет базовые возможности форм. Например, код, приведённый ниже, создаёт текстовое поле, отправляющее данные формы на сервер, когда пользователь меняет её значение.
-
Отправка данных на сервер на событие изменения текстового поля. Листинг 13.1
CHtml::textField($name,$value,array('submit'=>''));
Создадим форму авторизации
-
Форма авторизации с помощью хелперов. Листинг 13.2
<div class="form">
<?php echo CHtml::beginForm(); ?>
<?php echo CHtml::errorSummary($model); ?>
<div class="row">
<?php echo CHtml::activeLabel($model,'username'); ?>
<?php echo CHtml::activeTextField($model,'username'); ?>
</div>
<div class="row">
<?php echo CHtml::activeLabel($model,'password'); ?>
<?php echo CHtml::activePasswordField($model,'password'); ?>
</div>
<div class="row rememberMe">
<?php echo CHtml::activeCheckBox($model,'rememberMe'); ?>
<?php echo CHtml::activeLabel($model,'rememberMe'); ?>
</div>
<div class="row submit">
<?php echo CHtml::submitButton('Войти'); ?>
</div>
<?php echo CHtml::endForm(); ?>
</div><!-- form -->
Форма, которую мы создали выше, обладает куда большей динамичностью. К примеру, CHtml::activeLabel() создаёт метку, соответствующую атрибуту модели, и если при вводе данных была допущена ошибка, то CSS класс метки сменится на error, изменив внешний вид метки в соответствии с CSS стилями. Похожим образом метод CHtml::activeTextField() создаёт текстовое поле для соответствущего атрибута модели и графически выделяет ошибки ввода.
Если использовать файл CSS стилей form.css, создаваемый скриптом yiic, то наша форма будет выглядеть так:
Страница авторизации:
Страница авторизации с сообщением об ошибке
Для создания форм можно также воспользоваться новым виджетом CActiveForm, который позволяет реализовать валидацию как на клиенте, так и на сервере. При использовании CActiveForm код отображения будет выглядеть следующим образом:
-
Форма авторизации с использованием CActiveForm. Листинг 13.3
<div class="form">
<?php $form=$this->beginWidget('CActiveForm'); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->label($model,'username'); ?>
<?php echo $form->textField($model,'username') ?>
</div>
<div class="row">
<?php echo $form->label($model,'password'); ?>
<?php echo $form->passwordField($model,'password') ?>
</div>
<div class="row rememberMe">
<?php echo $form->checkBox($model,'rememberMe'); ?>
<?php echo $form->label($model,'rememberMe'); ?>
</div>
<div class="row submit">
<?php echo CHtml::submitButton('Войти'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
BeginWidget(‘CActiveForm’) имеет один необязательный параметр – это массив настроек. Рассмотрим еще один пример с массивом настроек для beginWidget(‘CActiveForm’).
-
Форма с настройками для beginWidget(‘CActiveForm’). Листинг 13.4
<div class="form">
<? $form=$this->beginWidget('CActiveForm', array(
'id'=>'contact-form',
'enableClientValidation'=>true,
'htmlOptions' => array(
'enctype'=>'multipart/form-data',
),
'clientOptions'=>array(
'validateOnSubmit' => true,
'validateOnChange' => false, ),
)); ?>
<?php echo $form->errorSummary($model); ?>
<div class="row">
<?php echo $form->labelEx($model,'name'); ?>
<?php echo $form->textField($model,'name',array('size'=>60,'maxlength'=>128)); ?>
<?php echo $form->error($model,'name'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'about'); ?>
<?php echo $form->textArea($model,'about',array('rows'=>6, 'cols'=>50)); ?>
<?php echo $form->error($model,'about'); ?>
</div>
<div class="row">
<?php echo $form->labelEx($model,'picture'); ?>
<?php echo $form->fileField($model,'picture'); ?>
<?php echo $form->error($model,'picture'); ?>
</div>
<div class="row buttons">
<?php echo CHtml::submitButton('Submit'); ?>
</div>
<?php $this->endWidget(); ?>
</div>