Cake PHP - Applying CSS to forms.

Submitted by Derick Ng on 31 July 2009 - 3:24am

English

Today I will explain in a nutshell how to apply a css style to a form generated by the Form Helper. My form is very simple and serves as a registration form. You can find in many places how to create a model and a controller for such form e.g., here: https://planetcakephp.org/aggregator/items/1620-creating-a-community-in-five-minutes-with-cakephp. Therefore I will focus only on how to apply some css to this form.

My form is very simple and serves as a registration form. It has only 4 required fields and is generated by the following view:

	
<?php echo $form->create('User', array('class'=>'form'));?>
Sign Up

	Please complete the form below.
	<?php
		echo $form->input('username',  array( 
			'label' => 'Login', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('password',  array( 
			'label' => 'Password', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('password_confirm', array(
			'label' => 'Confirm password', 
			'type'=>'password', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('name',  array( 
			'label' => 'Name', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('surname',  array( 
			'label' => 'Surname', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('email',  array( 
			'label' => 'E-mail', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));
		echo $form->input('city_id',  array( 
			'label' => 'City', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror')));
	?>
	
<?php echo $form->end('Submit');?>

Some explanations:

To add a class to a form tag:

$form->create('User', array('class'=>'form'))

generates:

To add a class to an input:

echo $form->input('username',  array( 
			'label' => 'Login', 
			'div'=>'formfield', 
			'error' => array(
				'wrap' => 'div', 
				'class' => 'formerror'
				)
			));

generates this:


Login

An error in this case will appear in:

A sample css style may look like this:

.form{
	font-family: Verdana;    
	font-size:1em;
	margin:1em;
	padding:1em;	
}

.form p.formtitle{
	color: #026475;
	font-size:1.3em;
	font-weight: bold;
}

.form fieldset{
	width:40em;
	border:1px solid #FFE545;	
	background-image: url(../img/Contact.png);
	background-position: bottom right;
	background-repeat: no-repeat;
}

.form fieldset legend{
	color: #026475;
}

.formfield{
	width:30em;
	padding:5px;
}

.formfield label{
	display:block;
	float:left;
	width:12em;
	padding:1px;
	color:#C2A34F;
	text-align:right;
}

.formfield input, .formfield  select{
	padding:0.15em;
	width:14em;
	border:1px solid #ddd;
	background:#FEFBAF;
	
	font-family: Verdana;    
	font-size:1em;
	
	-moz-border-radius:0.4em;
	-khtml-border-radius:0.4em;
}

.formfield input:hover, input:focus {
	border-color:#c5c5c5;
	background:#f6f6f6;
} 

.required input {
	border:1px solid #FBB829;
}

.form .submit input{
	font-family: Verdana;    
	font-size:1em;
	margin-top: 0.3em;
}

.formerror{
	position:relative;
	left:12.1em;
	color:#FBB829;
}

The result: