Написання форми не повинно викликати ніяких труднощів. Ми починаємо із тега form
, атрибут
action
якого повинен містити URL дії login
, розглянутої раніше. Потім додаємо мітки і поля
вводу для атрибутів, оголошених в класі LoginForm
. На завершення ми вставляємо кнопку відправки даних форми.
Все це без проблем пишеться на чистому HTML коді.
Для спрощення процесу створення форми Yii надає декілька класів помічників (helper). Наприклад, для створення текстового поля, можна викликати метод CHtml::textField(), для випадаючого списку — CHtml::dropDownList().
Інформація: Безумовно, може виникнути справедливе питання, а в чому перевага використання помічника, якщо обсяг використовуваного коду приблизно той же, що й у випадку з чистим HTML кодом? Відповідь проста: використання помічника дає великі можливості. Наприклад, код, наведений нижче, створює текстове поле, яке відправляє дані форми на сервер, коли користувач змінює її значення.
CHtml::textField($name,$value,array('submit'=>''));
Зауважте, що все реалізовано без жодного рядка JavaScript.
Нижче ми створюємо представлення - форму авторизації - за допомогою класу CHtml. Тут змінна $model
— екземпляр класу LoginForm
:
<div class="form"> echo CHtml::beginForm(); echo CHtml::errorSummary($model); <div class="row"> echo CHtml::activeLabel($model,'username'); echo CHtml::activeTextField($model,'username'); </div> <div class="row"> echo CHtml::activeLabel($model,'password'); echo CHtml::activePasswordField($model,'password'); </div> <div class="row rememberMe"> echo CHtml::activeCheckBox($model,'rememberMe'); echo CHtml::activeLabel($model,'rememberMe'); </div> <div class="row submit"> echo CHtml::submitButton('Войти'); </div> echo CHtml::endForm(); </div><!-- form -->
Форма, яку ми створили вище, володіє значно більшою динамічністю. Приміром, CHtml::activeLabel() створює мітку, відповідну атрибуту моделі, а якщо при введенні даних була допущена помилка, то CSS клас мітки зміниться на error
, змінивши зовнішній вигляд мітки на
відповідний CSS стиль. Подібним чином метод CHtml::activeTextField()
створює текстове поле для відповідного атрибута моделі і графічно виділяє помилки вводу.
Якщо використовувати CSS стиль form.css
, який створюється скриптом yiic
, створена форма буде виглядати так:
Сторінка авторизації
Сторінка авторизації з повідомленням про помилку
Починаючи з версії 1.1.1, для створення форм можна скористатися новим віджетом CActiveForm, який дозволяє реалізувати валідацію як на клієнті, так і на сервері. При використанні CActiveForm код представлення буде виглядати наступним чином:
<div class="form"> $form=$this->beginWidget('CActiveForm'); echo $form->errorSummary($model); <div class="row"> echo $form->label($model,'username'); echo $form->textField($model,'username') </div> <div class="row"> echo $form->label($model,'password'); echo $form->passwordField($model,'password') </div> <div class="row rememberMe"> echo $form->checkBox($model,'rememberMe'); echo $form->label($model,'rememberMe'); </div> <div class="row submit"> echo CHtml::submitButton('Увійти'); </div> $this->endWidget(); </div><!-- form -->
Found a typo or you think this page needs improvement?
Edit it on github !
Signup or Login in order to comment.