Cake PHP 1.2 - Applying CSS to forms.

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 how to create a model and a controller for such form here: http://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 has only 4 required fields and is generated by the following view:

<div class="users form">	
<?php echo $form->create('User', array('class'=>'form'));?>
<p class="formtitle">Sign Up</p>
<fieldset>
	<legend class="formtitle">Please complete the form below.</legend>
	<?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')));
	?>
</fieldset>	
<?php echo $form->end('Submit');?>
</div>

Some explanations:

• To add a class to a form tag:

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

  generates:

  <form class="form" id="UserAddForm" method="post" action="/kultura/users/add">

• To add a class to an input:

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

  generates this:

  <div class="formfield required">
  <label for="UserUsername">Login</label>
  <input name="data[User][username]" type="text" maxlength="20" value="" id="UserUsername" />
  </div>

  An error in this case will appear in:

  <div class=”formerror”></div>

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:

 

More interesting sources about how to use css with forms:

• http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
• http://sixrevisions.com/user-interface/25-stylish-examples-of-web-forms/
• http://www.sitepoint.com/article/fancy-form-design-css/

Very interesting article about forms design patterns:

• http://www.smashingmagazine.com/2008/07/04/web-form-design-patterns-sign-up-forms/?cp=9

and, b.t.w., some hint how to do CakePHP forms more secure using Security component:

• http://teknoid.wordpress.com/2008/11/05/make-your-cakephp-forms-a-lot-more-secure/

Enjoy!