Creating Form

Writing the login view is straightforward. We start with a form tag whose action attribute should be the URL of the login action described previously. We then insert labels and input fields for the attributes declared in the LoginForm class. At the end we insert a submit button which can be clicked by users to submit the form. All these can be done in pure HTML code.

Yii provides a few helper classes to facilitate view composition. For example, to create a text input field, we can call CHtml::textField(); to create a drop-down list, call CHtml::dropDownList().

Info: One may wonder what is the benefit of using helpers if they require similar amount of code when compared with plain HTML code. The answer is that the helpers can provide more than just HTML code. For example, the following code would generate a text input field which can trigger form submission if its value is changed by users.

CHtml::textField($name,$value,array('submit'=>''));

It would otherwise require writing clumsy JavaScript everywhere.

In the following, we use CHtml to create the login form. We assume that the variable $user represents LoginForm instance.

<div class="yiiForm">
<?php echo CHtml::beginForm(); ?>
 
<?php echo CHtml::errorSummary($user); ?>
 
<div class="simple">
<?php echo CHtml::activeLabel($user,'username'); ?>
<?php echo CHtml::activeTextField($user,'username'); ?>
</div>
 
<div class="simple">
<?php echo CHtml::activeLabel($user,'password'); ?>
<?php echo CHtml::activePasswordField($user,'password');
?>
</div>
 
<div class="action">
<?php echo CHtml::activeCheckBox($user,'rememberMe'); ?>
Remember me next time<br/>
<?php echo CHtml::submitButton('Login'); ?>
</div>
 
<?php echo CHtml::endForm(); ?>
</div><!-- yiiForm -->

The above code generates a more dynamic form. For example, CHtml::activeLabel() generates a label associated with the specified model attribute. If the attribute has an input error, the label's CSS class will be changed to error, which changes the appearance of the label with appropriate CSS styles. Similarly, CHtml::activeTextField() generates a text input field for the specified model attribute and changes its CSS class upon any input error.

If we use the CSS style file form.css provided by the yiic script, the generated form would be like the following:

The login page

The login with error page