Logo
Welcome Smartik
Profile Logout
Forms
Html structure Color Picker

Introduction

Forms works with the technique provided by Fluid 960 Grid System. But, there is used and another custom grid system which is a child of 960gs. "Formee" - is a framework developed by three guys (Bernard De Luna, Daniel Araujo and Marcello Manso). But, this framework is not used "as is", it come with a lot of modifications. I've told you this, to be sure from where all come.


For a basic styling you must include this line between <head></head> tags:

<link rel="stylesheet" type="text/css" href="css/config.css" />

NOTE: This file import all required styles for this template.

To create a form you must add "formee" class.


Basic Form example
<form class="formee" action="#">
	
	 <div class="grid-5-12">
		<label>Input field </label>
		<input type="text" />
	</div>
	
	 <div class="grid-7-12">
		<label>Input field 2 </label>
		<input type="text" />
	</div>

</form>

The result of the code above:

Basic Select menu code example
<select data-placeholder="Please select one..." class="chzn-select" style="width:100%;" tabindex="1">
	<option value=""></option> 
	<option value="Option select 1">Option select 1</option>
	<option value="Option select 2">Option select 2</option>
	<option value="Option select 3">Option select 3</option>
	<option value="Option select 4">Option select 4</option>
</select>

The result of the code above:


This require this line to be included between head tags:

<script type="text/javascript" src="js/global_plugins_scripts.js"></script>

And, initialize the Chosen Plugin. The code bellow is included in bottom_scripts.js:

jQuery(".chzn-select").chosen();
jQuery(".chzn-select-deselect").chosen({allow_single_deselect:true});

Available options: 
jQuery(".chzn-select").chosen({
	allow_single_deselect:true, // true or false. Allow to deselect a default option. In other words to reset the menu to 0.
	no_results_text: "No results matched", // Set the text is there are no otions found.
});
Reference:

Form Attributes

I think you noticed, that this form use classes "formee", "grid-5-12" and "grid-7-12". So, the best is to explain every forms part.


Attributes:
ATTRIBUTE EXAMPLE DESCRIPTION
"formee" <form class="formee" action="#"> ... <form> General class which help to apply styles for every form element.
"grid-$-12" <div class="grid-3-12"> How many ($) of 12 equal columns the container fills
"formee-req" <span class="formee-req">*</span> This class is used to customize REQUIRED asterisk
"txt_autogrow" <textarea class="txt_autogrow"> ... </textarea> This class allow to change dinamicaly the height of <textarea>
"formee-list" 
<ul class="formee-list">
	<li><input name="01" type="checkbox" />
	<label>Text</label></li>
	<li><input name="02" type="checkbox" />
	<label>Text</label></li>
	<li><input name="03" type="checkbox" />
	<label>Text</label></li>
</ul>
 This class allow to customize LIST of INPUT RADIO or CHECKBOX
data-placeholder="Text..." 
<select data-placeholder="Choose a Country..."
   class="chzn-select">
	<option value=""></option> 
	<option value="US">United States</option> 
	<option value="UK">United Kingdom</option> 
</select>
 This is typical for Chosen jQuery plugin. Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. If no data-placeholder value is present, it will default to "Select Some Option" or "Select Some Options" depending on whether the select is single or multiple. You can change these elements in the plugin js file as you see fit
"chzn-select" 
<select class="chzn-select"> ... </select>
 Enable styles for HTML select menu and allow only selection.
"chzn-select-deselect" 
<select class="chzn-select-deselect"> 
	... 
</select>
 Enable styles for HTML select menu and allow to select and deselect an option.
multiple 
<select class="chzn-select" multiple> 
	... 
</select>
 Enable styles for HTML select menu and allow to select multiple options
style="width:100%;" 
<select class="chzn-select" style="width:100%;"> ... </select>
 Select menu width. You can use % or px
ATTRIBUTE EXAMPLE DESCRIPTION

Form Validation


This require these line to be included between head tags:

<script type="text/javascript" src="plugins/validator/js/languages/jquery.validationEngine-en.js"></script>
<script type="text/javascript" src="plugins/validator/js/jquery.validationEngine.js"></script>

- First line loads the language

- Second line loads the plugin


Also it require a initialization:

jQuery(document).ready(function(){
	jQuery("#form_id1").validationEngine('attach', {promptPosition : "bottomRight", autoPositionUpdate : true});
});

NOTE: This code can be found in head_scripts.js


Next you must create the form, like with the same id like this used in initialization code. Form elements must have unique names and id's.


<form id="form_id1" class="formee"action="#">
	
	 <div class="grid-5-12">
		<label>Input field </label>
		<input class="validate[required]" name="field1" id="field1" type="text" />
	</div>
	
	 <div class="grid-7-12">
		<label>Input field 2 </label>
		<input class="validate[required,custom[email]]" name="field2" id="field2" type="text" />
	</div>

</form>

The result of the code above:

Attributes:
ATTRIBUTE DESCRIPTION
class="validate[required]" Default validation. You can type anything. If the field is empty will return an error message.
class="validate[required,custom[url]]" URL begin with http:// https:// or ftp://
class="validate[required,custom[email]]" Email validation. Example: webmaster@domain.com
class="validate[required,custom[ipv4]]" IP adress validation. Example: 192.168.3.25
class="validate[required,custom[date]]" Validate date. Example: 2012-01-17
class="validate[required,custom[number]]" Number validation. A signed floating number. Example: -3849.354, 38.00, 38, .77
class="validate[required,custom[integer]]" Validate Integer. An signed integer. Example: +34, 34 or -34
class="validate[required,custom[onlyLetterNumber]]" Only Letters & Numbers. Admissible only 0-9, a-z, A-Z
class="validate[required,custom[onlyNumberSp]]" Only Numbers (char). Admissible only 0-9 and space.
class="validate[required,custom[onlyLetterSp]]" Only Letters. Only ASCII letters, space and '
class="validate[required,minSize[6]]" Minimum charaters allowed. Here are 6.
class="validate[required,maxSize[6]]" Maximum charaters allowed. Here are 6.
class="validate[required,custom[integer],min[-5]]" Minimum integer value allowed. Here is -5.
class="validate[required,custom[integer],max[50]]" Maximum integer value allowed. Here is 50.
class="validate[custom[date],past[2012-01-01]]" Checks that the value is a date in the past. You must enter a date ealier than 2012-01-01
class="validate[custom[date],future[NOW]]" Checks that the value is a date in the future. You must enter a date older than today's date
class="validate[required,custom[username]]" Checks . Admissible only 0-9, a-z, A-Z
class="validate[required,custom[firstName]]" Checks if the username is valid. Only letters accepted a-z, A-Z.
class="validate[required,custom[lastName]]" Checks if the username is valid. Only letters accepted a-z, A-Z.
class="validate[required,custom[passwordLogin]]" Password validation. Allowed any character.
(1) class="validate[required]"
(2) class="validate[required,equals[password]]" 		(1) First field.
(2) Second field.
Password validation for a registration form. Checks if fields have the same value. Allowed any character.
ATTRIBUTE DESCRIPTION
Reference:

Html structure Color Picker