HTML5 active input type

Yii 1.1 General Discussion
1

Hello,

Is there a way to use HTML5 input fields such as email and url with CHtml helper?

2

Currently, I don’t think CHtml has any methods specifically for building HTML5 tags. You can use CHtml::tag() to build the input tag with a type=“email” attribute. You can also extend CHtml and write your own methods for generating HTML5 tags.

3

Thanks. I ended up creating my own class extending CHtml.

4

Is it worth sharing it?

5

Here is a very simple version created from the docs that can be used.




<?php 

/**

 * 

 * Html5 extends the CHtml helper class to allow you to override 

 * the HTML INPUT type attribute directly in the html options parameter.

 * This class can be modified for more html5 features. 

 *

 */

class Html5 extends CHtml{

	

	public static function textField($name,$value='',$htmlOptions=array()){

	    self::clientChange('change',$htmlOptions);

	    $type = isset($htmlOptions['type']) && !empty($htmlOptions['type']) ? $htmlOptions['type'] : "text";

	    return self::inputField($type,$name,$value,$htmlOptions);

	}

	

	public static function activeTextField($model,$attribute,$htmlOptions=array()){

	    self::resolveNameID($model,$attribute,$htmlOptions);

	    self::clientChange('change',$htmlOptions);

	    $type = isset($htmlOptions['type']) && !empty($htmlOptions['type']) ? $htmlOptions['type'] : "text";

	    return self::activeInputField($type,$model,$attribute,$htmlOptions);

	}	

	

}
6

Thanks, I’m writing various mobile sites and this is going to be very useful for me until Yii add support for them. Posted on my birthday too, thanks for the nice present :)

7

With a few simple additions you get a lazy mode for placeholders, and client validation for required fields.

Html5.php





<?php 

/**

 * 

 * Html5 extends the CHtml helper class to allow you to override 

 * the HTML INPUT type attribute directly in the html options parameter.

 * This class can be modified for more html5 features. 

 *

 */

class Html5 extends CHtml

{


	public static function textField($name,$value='',$htmlOptions=array()){

		self::clientChange('change',$htmlOptions);

		$type = isset($htmlOptions['type']) && !empty($htmlOptions['type']) ? $htmlOptions['type'] : "text";

		if($model->isAttributeRequired($attribute))

			$htmlOptions['required']='required';

		$htmlOptions['placeholder']=$model->getAttributeLabel($attribute);

		return self::inputField($type,$name,$value,$htmlOptions);

	}


	public static function activeTextField($model,$attribute,$htmlOptions=array()){

		self::resolveNameID($model,$attribute,$htmlOptions);

		self::clientChange('change',$htmlOptions);

		$type = isset($htmlOptions['type']) && !empty($htmlOptions['type']) ? $htmlOptions['type'] : "text";

		if($model->isAttributeRequired($attribute))

			$htmlOptions['required']='required';

		$htmlOptions['placeholder']=$model->getAttributeLabel($attribute);

		return self::activeInputField($type,$model,$attribute,$htmlOptions);

	}}

ActiveForm.php


<?php 

/**

 * 

 * ActiveForm extends the CActiveForm widget class to allow you to override 

 * the HTML INPUT type attribute directly in the html options parameter.

 * This class can be modified for more html5 features. 

 *

 */

class ActiveForm extends CActiveForm

{


	public function textField($model,$attribute,$htmlOptions=array())

	{

		return Html5::activeTextField($model,$attribute,$htmlOptions);

	}

}

Then in config add


'import'=>array(

		...

		'ext.ActiveForm',

		'ext.Html5',

	),

In view use


<?php $form=$this->beginWidget('ActiveForm'); ?>
8

FYI since 1.1.11 Yii now supports url, email, number, range and date HTML5 form elements.