Yii Framework Wiki
Difference between
#35 and
#49 of
By Example: CHtml
Changes
Title unchanged
By Example: CHtml
Category unchanged
Tutorials
Yii version unchanged
Tags changed
listData, chtml, link, button, ByExample, ajax, ajax link, image
Content changed
[...]
Smarthead will be pulling these from the forum when he is not finding the answers on his own. Please request examples using the comments below or ask for an example in the forum. Thanks.Avaiable methods:<br>
- [CHtml::link()](#hh0)
- [CHtml::
- [CHtml::textField()](#hh2)
- [CHtml::listData()](#hh3)
- [CHtml::dropDownList()](#hh4)
## CHtml::link() method
```php
public static string link(string $text, mixed $url='#', array $htmlOptions=array ( ))
```
Generates a hyperlink tag.
***
**Example 1: Linking to a controller action**
```php
<?php echo CHtml::link('Link Text',array('controller/action')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action">Link Text</a>
```
***
**Example 2: Linking to a controller action with querystring parameters**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action¶m1=value1">Link Text</a>
```
***
**Example 3: Linking to a controller action with multiple querystring parameters**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1',
'param2'=>'value2',
'param3'=>'value3')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action¶m1=value1¶m2=value2¶m3=value3">Link Text</a>
```
***
**Example 4: Link opening a new page**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1'), array('target'=>'_blank'); ?>
```
**HTML Output:**
```php
<a target="_blank" href="index.php?r=controller/action¶m1=value1">Link Text</a>
```
***
**Example 5: Linking to a controller action inside the actual controller**
(Suppose you are in the PostController/view and wants to link to PostController/create)
Just remove the 'controller' part from the string
```php
<?php echo CHtml::link('Link Text',array('action')); ?>
```
If you are linking to an action from another controller, use the syntax of the former examples.
***
**Example 6: Linking to a controller action from the site root**
(Suppose you are inside a module and wants to make the link from a controller of the root application)
In this case, add an slash "/" at the start of the string url
```php
<?php echo CHtml::link('Link Text',array('/controller/action')); ?>
```
This makes more sense if you are working with modules.
***
**Example 7: Linking to a controller action from another module**
Replace below the module-id with desired module id .
```php
<?php echo CHtml::link('Link Text',array('/module-id/controller/action')); ?>
```
***
**Example 8: Linking to a controller action from the same module**
This is useful when you want to make absolute paths avoiding to use static module names.
```php
<?php echo CHtml::link('Link Text',array('/{$this->module->id}/controller/action')); ?>
```
***
**Example 9: Linking to a controller action via POST with confirmation dialog**
Delete actions created using gii require the delete request be sent via POST to help prevent deleting objects by accident. Below is an example how to create a link that sends the request via POST and also asks for confirmation. Where you are redirected after the delete depends on your delete action. Note that the `id` link parameter below is a GET type parameter (submit URL will be something like `http://example.com/post/delete/id/100`).
```php
<?php echo CHtml::link('Delete',"#", array("submit"=>array('delete', 'id'=>$data->ID), 'confirm' => 'Are you sure?')); ?>
```
If you are using CSRF protection in your application do not forget to add csrf parameter to the htmlOptions array.
```php
<?php echo CHtml::link('Delete',"#", array("submit"=>array('delete', 'id'=>$data->ID), 'confirm' => 'Are you sure?', 'csrf'=>true)); ?>
```
***
**Example 10: Linking to a controller action via POST with POST parameters**
If you need to make POST request with arbitary link with additional POST parameters you should use following code (submit URL will be something like `http://example.com/blog/deletePost/param/100`).
```php
<p><?php echo lnk('Delete blog post', '#', array(
'submit'=>array('blog/deletePost', 'param'=>100),
'params'=>array('id'=>$post->id, 'status'=>Post::STATUS_DELETED_BY_OWNER),
'csrf'=>true,
)); ?></p>
```
## CHtml::button() method
~~~
public static string button(string $label='button', array $htmlOptions=array ( ))
~~~
Generates a button.
***
**Example 1: Connecting a button to a controller action**
```php
<?php echo CHtml::button('Button Text', array('submit' => array('controller/action'))); ?>
```
**HTML Output:**
```php
<input id="yt0" type="button" value="Button Text" name="yt0"/>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
jQuery('#yt0').click(function( {
jQuery.yii.submitForm(
this,
'controller/action',{}
);return false;});
});
/*]]>*/
</script>
```
## CHtml::textField() method
~~~
public static function textField($name,$value='',$htmlOptions=array())
~~~
Generates a textfield.
***
**Example 1: Generating an empty textfield, just with a name**
```php
<?php echo CHtml::textField('Text'); ?>
```
***
**Example 2: Generating a textfield with name and value**
```php
<?php echo CHtml::textField('Text', 'some value'); ?>
```
***
**Example 3: Generating a textfield with customized id, width and maxlength**
```php
<?php echo CHtml::textField('Text', 'some value',
array('id'=>'idTextField',
'width'=>100,
'maxlength'=>100); ?>
```
*Note: use 'cols' instead of 'width' when working with textareas
***
**Example 4: Generating a disabled textfield**
```php
<?php echo CHtml::textField('Text', 'some value',
array('disabled'=>'disabled'); ?>
```
## CHtml::listData() method
~~~
public static function listData($models,$valueField,$textField,$groupField='')
~~~
Generates data for dropDownList and listBox, using the format $key=>$value.
***
**Example 1: Generating a list data for categories**
```php
<?php
/*you can use here any find method you think
proper to return your data from db*/
$models = categories::model()->findAll();
// format models resulting using listData
$list = CHtml::listData($models,
'category_id', 'category_name');
print_r($list);
```
**HTML Output (Example):**
```php
array("1" => "Arts", "2" => "Science", "3" => "Culture");
```
***
**Example 2: Generating an ordered list data for categories using findAll parameter**
```php
<?php
$models = categories::model()->findAll(
array('order' => 'category_name'));
$list = CHtml::listData($models,
'category_id', 'category_name');
print_r($list);
```
**HTML Output (Example):**
```php
array("1" => "Arts", "3" => "Culture", "2" => "Science");
```
## CHtml::dropDownList() method
~~~
public static function dropDownList($name,$select,$data,$htmlOptions=array())
~~~
Generates a dropdown list.
$name: A name for the dropdownList;
$select: selected item from the $data
$data: an array of the type $key => $value (the possible values of you dropdownlist);
$htmlOptions: another options.
***
**Example 1: Generating a simple dropdownlist for gender**
```php
<?php echo CHtml::dropDownList('listname', $select,
array('M' => 'Male', 'F' => 'Female'));
```
The $select parameter must contain value 'M' or 'F'.
***
**Example 2: Generating a simple dropdownlist for gender with an 'empty' element.**
This example will avoid the dropdownlist to be blank when no value, outputing some proper information to the user
```php
<?php echo CHtml::dropDownList('listname', $select,
array('M' => 'Male', 'F' => 'Female'),
array('empty' => '(Select a gender)'));
```
***
**Example 3: Using data from a model function.**
It is better to have you gender list definition inside your model definition.
At model:
```php
public function getGenderOptions(){
return array('M' => 'Male', 'F' => 'Female');
}
```
At view:
```php
<?php echo CHtml::dropDownList('listname', $select,
$model->genderOptions,
array('empty' => '(Select a gender'));
```
***
**Example 4: Using data from db**
In order to create a dropdownList with data from db, you have to combine it with listData method that will format models from db into array of $key=>$value.
This part is equal to listData Example 2:
```php
// retrieve the models from db
$models = categories::model()->findAll(
array('order' => 'category_name'));
// format models as $key=>$value with listData
$list = CHtml::listData($models,
'category_id', 'category_name');
```
Now, we generate our dropdowList from the $list variable
```php
<?php echo CHtml::dropDownList('categories', $category,
$list,
array('empty' => '(Select a category'));
```
**Example 5: Generating dropdownlist with option groups.**
If you need to generate dropdownlist using both `optgroup` and `option` tags use the following code.
```php
<div class="cars-select">
<?php echo CHtml::dropDownList('Cars', 'car_id', array(
'Mazda'=>array(
'mazda-rx7'=>'RX7',
'mazda-rx5'=>'RX5',
),
'Volvo'=>array(
'volvo-b9tl'=>'B9TL',
'volvo-l90e-radlader'=>'L90E Radlader',
),
)); ?>
</div>
```
Code above should generate following HTML.
```php
<div class="cars-select">
<select name="Cars" id="Cars">
<optgroup label="Mazda">
<option value="mazda-rx7">RX7</option>
<option value="mazda-rx5">RX5</option>
</optgroup>
<optgroup label="Volvo">
<option value="volvo-b9tl">B9TL</option>
<option value="volvo-l90e-radlader">L90E Radlader</option>
</optgroup>
</select>
</div>
```
***
You can find CHtml class at `yii/framework/web/helpers/CHtml.php`.
## Links
### Russian
- [Russian Version dropDownList()](http://dbhelp.ru/by-example-chtml-dropdownlist/page/)
- [Russian Version listData()](http://dbhelp.ru/by-example-chtml-listdata/page/)
- [Russian Version textField()](http://dbhelp.ru/by-example-chtml-textfield/page/)
- [Russian Version link()](http://dbhelp.ru/by-example-chtml/page/)
### Japanese
- [CHtmlの使い方](http://yiijan.org/tutorials/view/chtml%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
- [CHtml::button()](#hh2)
- [CHtml::textField()](#hh3)
- [CHtml::listData()](#hh4)
- [CHtml::dropDownList()](#hh5)
- [Chtml::image()](#hh6) - Added new tag
## CHtml::link() method
```php
public static string link(string $text, mixed $url='#', array $htmlOptions=array ( ))
```
Generates a hyperlink tag.
***
**Example 1: Linking to a controller action**
```php
<?php echo CHtml::link('Link Text',array('controller/action')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action">Link Text</a>
```
***
**Example 2: Linking to a controller action with querystring parameters**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action¶m1=value1">Link Text</a>
```
***
**Example 3: Linking to a controller action with multiple querystring parameters**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1',
'param2'=>'value2',
'param3'=>'value3')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=controller/action¶m1=value1¶m2=value2¶m3=value3">Link Text</a>
```
***
**Example 4: Link opening a new page**
```php
<?php echo CHtml::link('Link Text',array('controller/action',
'param1'=>'value1'), array('target'=>'_blank'); ?>
```
**HTML Output:**
```php
<a target="_blank" href="index.php?r=controller/action¶m1=value1">Link Text</a>
```
***
**Example 5: Linking to a controller action inside the actual controller**
(Suppose you are in the PostController/view and wants to link to PostController/create)
Just remove the 'controller' part from the string
```php
<?php echo CHtml::link('Link Text',array('action')); ?>
```
If you are linking to an action from another controller, use the syntax of the former examples.
***
**Example 6: Linking to a controller action from the site root**
(Suppose you are inside a module and wants to make the link from a controller of the root application)
In this case, add an slash "/" at the start of the string url
```php
<?php echo CHtml::link('Link Text',array('/controller/action')); ?>
```
This makes more sense if you are working with modules.
***
**Example 7: Linking to a controller action from another module**
Replace below the module-id with desired module id .
```php
<?php echo CHtml::link('Link Text',array('/module-id/controller/action')); ?>
```
***
**Example 8: Linking to a controller action from the same module**
This is useful when you want to make absolute paths avoiding to use static module names.
```php
<?php echo CHtml::link('Link Text',array('/{$this->module->id}/controller/action')); ?>
```
***
**Example 9: Linking to a controller action via POST with confirmation dialog**
Delete actions created using gii require the delete request be sent via POST to help prevent deleting objects by accident. Below is an example how to create a link that sends the request via POST and also asks for confirmation. Where you are redirected after the delete depends on your delete action. Note that the `id` link parameter below is a GET type parameter (submit URL will be something like `http://example.com/post/delete/id/100`).
```php
<?php echo CHtml::link('Delete',"#", array("submit"=>array('delete', 'id'=>$data->ID), 'confirm' => 'Are you sure?')); ?>
```
If you are using CSRF protection in your application do not forget to add csrf parameter to the htmlOptions array.
```php
<?php echo CHtml::link('Delete',"#", array("submit"=>array('delete', 'id'=>$data->ID), 'confirm' => 'Are you sure?', 'csrf'=>true)); ?>
```
***
**Example 10: Linking to a controller action via POST with POST parameters**
If you need to make POST request with arbitary link with additional POST parameters you should use following code (submit URL will be something like `http://example.com/blog/deletePost/param/100`).
```php
<p><?php echo lnk('Delete blog post', '#', array(
'submit'=>array('blog/deletePost', 'param'=>100),
'params'=>array('id'=>$post->id, 'status'=>Post::STATUS_DELETED_BY_OWNER),
'csrf'=>true,
)); ?></p>
```
## CHtml::ajaxLink() method
Syntax:
```php
public static string ajaxLink(string $text, mixed $url, array $ajaxOptions=array ( ), array $htmlOptions=array ( ))
```
**Default example**
```php
echo CHtml::ajaxLink(
$text = 'Click me',
$url = '/',
$ajaxOptions=array (
'type'=>'POST',
'dataType'=>'json',
'success'=>'function(html){ jQuery("#your_id").html(html); }'
),
$htmlOptions=array ()
);
```
**Example #1 : Ajax request using ajaxLink**
```php
//In view:
echo CHtml::ajaxLink(
'Test request', // the link body (it will NOT be HTML-encoded.)
array('ajax/reqTest01'), // the URL for the AJAX request. If empty, it is assumed to be the current URL.
array(
'update'=>'#req_res'
)
);
echo '<div id="req_res">...</div>';
//In controller
public function actionReqTest01() {
echo date('H:i:s');
Yii::app()->end();
}
```
**Example #2 : Ajax request using ajaxLink with loading image**
```php
//In view:
echo CHtml::ajaxLink(
'Test request', // the link body (it will NOT be HTML-encoded.)
array('ajax/reqTest01Loading'), // the URL for the AJAX request. If empty, it is assumed to be the current URL.
array(
'update'=>'#req_res_loading',
'beforeSend' => 'function() {
$("#maindiv").addClass("loading");
}',
'complete' => 'function() {
$("#maindiv").removeClass("loading");
}',
)
);
echo '<div id="req_res_loading">...</div>';
//In controller:
public function actionReqTest01Loading() {
sleep(4); // Sleep for 4 seconds just to demonstrate the Loading Image can be seen, for learning purpose only
echo date('H:i:s');
Yii::app()->end();
}
```
Reference: [Ajaxlink](http://www.codexamples.com/89/chtml-ajaxlink/ "")
## CHtml::button() method
~~~
public static string button(string $label='button', array $htmlOptions=array ( ))
~~~
Generates a button.
***
**Example 1: Connecting a button to a controller action**
```php
<?php echo CHtml::button('Button Text', array('submit' => array('controller/action'))); ?>
```
**HTML Output:**
```php
<input id="yt0" type="button" value="Button Text" name="yt0"/>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(document).ready(function() {
jQuery('#yt0').click(function( {
jQuery.yii.submitForm(
this,
'controller/action',{}
);return false;});
});
/*]]>*/
</script>
```
## CHtml::textField() method
~~~
public static function textField($name,$value='',$htmlOptions=array())
~~~
Generates a textfield.
***
**Example 1: Generating an empty textfield, just with a name**
```php
<?php echo CHtml::textField('Text'); ?>
```
***
**Example 2: Generating a textfield with name and value**
```php
<?php echo CHtml::textField('Text', 'some value'); ?>
```
***
**Example 3: Generating a textfield with customized id, width and maxlength**
```php
<?php echo CHtml::textField('Text', 'some value',
array('id'=>'idTextField',
'width'=>100,
'maxlength'=>100)); ?>
```
*Note: use 'cols' instead of 'width' when working with textareas
***
**Example 4: Generating a disabled textfield**
```php
<?php echo CHtml::textField('Text', 'some value',
array('disabled'=>'disabled'); ?>
```
***
**Example 5: Generating a hidden textfield**
```php
<?php echo CHtml::hiddenField('Text', 'some value',
array('id'=>'idTextField'); ?>
```
## CHtml::listData() method
~~~
public static function listData($models,$valueField,$textField,$groupField='')
~~~
Generates data for dropDownList and listBox, using the format $key=>$value.
***
**Example 1: Generating a list data for categories**
```php
<?php
/*you can use here any find method you think
proper to return your data from db*/
$models = categories::model()->findAll();
// format models resulting using listData
$list = CHtml::listData($models,
'category_id', 'category_name');
print_r($list);
```
**HTML Output (Example):**
```php
array("1" => "Arts", "2" => "Science", "3" => "Culture");
```
***
**Example 2: Generating an ordered list data for categories using findAll parameter**
```php
<?php
$models = categories::model()->findAll(
array('order' => 'category_name'));
$list = CHtml::listData($models,
'category_id', 'category_name');
print_r($list);
```
**HTML Output (Example):**
```php
array("1" => "Arts", "3" => "Culture", "2" => "Science");
```
## CHtml::dropDownList() method
~~~
public static function dropDownList($name,$select,$data,$htmlOptions=array())
~~~
Generates a dropdown list.
$name: A name for the dropdownList;
$select: selected item from the $data
$data: an array of the type $key => $value (the possible values of you dropdownlist);
$htmlOptions: another options.
***
**Example 1: Generating a simple dropdownlist for gender**
```php
<?php echo CHtml::dropDownList('listname', $select,
array('M' => 'Male', 'F' => 'Female'));
```
The $select parameter must contain value 'M' or 'F'.
***
**Example 2: Generating a simple dropdownlist for gender with an 'empty' element.**
This example will avoid the dropdownlist to be blank when no value, outputing some proper information to the user
```php
<?php echo CHtml::dropDownList('listname', $select,
array('M' => 'Male', 'F' => 'Female'),
array('empty' => '(Select a gender)'));
```
***
**Example 3: Using data from a model function.**
It is better to have you gender list definition inside your model definition.
At model:
```php
public function getGenderOptions(){
return array('M' => 'Male', 'F' => 'Female');
}
```
At view:
```php
<?php echo CHtml::dropDownList('listname', $select,
$model->genderOptions,
array('empty' => '(Select a gender)');
```
***
**Example 4: Using data from db**
In order to create a dropdownList with data from db, you have to combine it with listData method that will format models from db into array of $key=>$value.
This part is equal to listData Example 2:
```php
// retrieve the models from db
$models = categories::model()->findAll(
array('order' => 'category_name'));
// format models as $key=>$value with listData
$list = CHtml::listData($models,
'category_id', 'category_name');
```
Now, we generate our dropdowList from the $list variable
```php
echo CHtml::dropDownList('categories', $category,
$list,
array('empty' => '(Select a category)');
```
With condition -
```php
echo CHtml::dropDownList('categories', $category,
CHtml::listData(categories::model()->findAll("Status=1"),
'category_id', 'category_name'),
array('empty' => '(Select a category)');
```
**Example 5: Generating dropdownlist with option groups.**
If you need to generate dropdownlist using both `optgroup` and `option` tags use the following code.
```php
<div class="cars-select">
<?php echo CHtml::dropDownList('Cars', 'car_id', array(
'Mazda'=>array(
'mazda-rx7'=>'RX7',
'mazda-rx5'=>'RX5',
),
'Volvo'=>array(
'volvo-b9tl'=>'B9TL',
'volvo-l90e-radlader'=>'L90E Radlader',
),
)); ?>
</div>
```
Code above should generate following HTML.
```php
<div class="cars-select">
<select name="Cars" id="Cars">
<optgroup label="Mazda">
<option value="mazda-rx7">RX7</option>
<option value="mazda-rx5">RX5</option>
</optgroup>
<optgroup label="Volvo">
<option value="volvo-b9tl">B9TL</option>
<option value="volvo-l90e-radlader">L90E Radlader</option>
</optgroup>
</select>
</div>
```
## CHtml::image() method
```php
public static string image(string $src, string $alt='', array $htmlOptions=array ( ))
```
Generates a image tag.
***
**Example 1: Image only**
```php
<?php echo CHtml::image(Yii::app()->request->baseUrl.'/img/image.png'); ?>
```
**HTML Output:**
```php
<img src="/img/image.png" />
```
***
**Example 2: Image with alt attribute**
```php
<?php echo CHtml::image(Yii::app()->request->baseUrl.'/img/image.png',
'this is alt tag of image'); ?>
```
**HTML Output:**
```php
<img src="/img/image.png" alt="this is alt tag of image" />
```
***
**Example 3: Add width, height and others attribute for image**
```php
<?php echo CHtml::image(Yii::app()->request->baseUrl.'/img/image.png',
'this is alt tag of image',
array('width'=>'100px','height'=>'100px','title'=>'image title here')); ?>
```
**HTML Output:**
```php
<img src="/img/image.png" alt="this is alt tag of image" title="image title here" width="100" height="100" />
```
You can also add another html attributes like class, id etc. for image in the similar way to adding width and height attribute for image above.
***
**Example 4: Image with link**
```php
<?php $image = CHtml::image(Yii::app()->request->baseUrl.'/img/image.png',
'this is alt tag of image');
echo CHtml::link($image,array('book/view','id'=>'book_id')); ?>
```
**HTML Output:**
```php
<a href="index.php?r=book/view&id=book_id"><img src="/img/image.png" alt="this is alt tag of image" /></a>
```
***
You can find CHtml class at `yii/framework/web/helpers/CHtml.php` view on [Github](https://github.com/yiisoft/yii/blob/1.1.14/framework/web/helpers/CHtml.php ""), all [CHtml methods here](http://yii.codexamples.com/v1.1/CHtml/ "").
## Links
### Russian
- [Russian Version dropDownList()](http://dbhelp.ru/by-example-chtml-dropdownlist/page/)
- [Russian Version listData()](http://dbhelp.ru/by-example-chtml-listdata/page/)
- [Russian Version textField()](http://dbhelp.ru/by-example-chtml-textfield/page/)
- [Russian Version link()](http://dbhelp.ru/by-example-chtml/page/)
### Japanese
- [CHtmlの使い方](http://yiijan.org/tutorials/view/chtml%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9)
74 followers
Viewed: 993 811 times
Version: 1.1
Category: Tutorials
Written by: jonah
Last updated by: glicious
Created on: Sep 25, 2009
Last updated: 8 years ago
Revisions
View all history-
8 years ago by
glicious Closing brackets at the end of function
-
8 years ago by
glicious The empty value for dropDownlist didn't...
-
9 years ago by
Rohit Suthar add hidden field source code
-
9 years ago by
Rohit Suthar correction
-
11 years ago by
Interboy add CHtml::ajaxLink() method and example...
-
11 years ago by
AndreiCurelaru 'ByExample' tag added, for relation with...
-
12 years ago by
jamband Add Link Japanese version
-
12 years ago by
Yang He Removed all broken Chinese version links
-
13 years ago by
Darwin Wen Add chinese version url
-
13 years ago by
Darwin Wen Add chinese version url