Dividing a form into two parts in different divs.

Hello,

I have the following page layout:




<div class="body">

	<div class="search-bar">

		<!--Search Bar Form Code Goes Here->

	</div>

	<div class="left-side">

		<div class="search-filter">

			<!--Search Result Filtration Form Code Goes Here->

		</div>

		<div class="search-results">

			<!--Search Results Here->

		</div>

	</div>

	<div class="right-side">

		<!--Google Maps Go Here->

	</div>

</div>



Image of the layout is attached in the post and can also be viewed on tinypic.com (i42.tinypic.com/5l8kew.png)

I have following form model for the search form:




class SearchForm extends CFormModel

{

	public $category;		// in search bar

	public $keywords;		// in search bar

	public $results_per_page;	// in search filter

	public $sort;			// in search filter

	

	public function rules()

	{

		return array(

			array('category, keywords', 'required'),

			array('results_per_page, sort', 'safe'),

		);

	}

}



This form model accounts for both search bar and search filter.

I want to break it into views/partials/layouts so that I can generate two pages using those views/partials/layouts. One page will contain only search bar div because form is not submitted at that time. And the other will contain search bar, search filter, search results and google map because now the form is submitted.

My questions are:

How do I split my page into views/partials/layouts?

Where will my form tags start and end?

Should I have one form tag or two, and likewise one form model or two form models? If two is the answer then how do I link them?

Regards,

Haider