How To ... ?

This document gives you quick examples of single form elements, layout, plugin usage and special forms (modal, popover, accordion, step forms).

Most examples are displayed using Bootstrap layout.

Material Forms are using the same markup.

To build Material forms, just instanciate with 'material' as framework argument.

Layout (Columns)

Labels and fields Columnsdoc.

Layout is based on a Bootstrap 12 columns grid.

setCols function sets labels and fields's number of columns.

Default is 4 columns labels and 8 columns fields.

// set 3 columns labels and 9 columns fields
$form->setCols(3, 9);

// set no label (or Material floating label + 12 columns fields
$form->setCols(0, 12);

Elements

Input with labeldoc.

$form->setCols(4, 8); // optional
$form->addInput('text', 'user-name-1', '', 'User Name', 'required');
<div class="form-group">
	<label for="user-name-1" class="col-sm-4 control-label">
		User Name<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="user-name-1" name="user-name-1" type="text" value="value" required class="form-control">
	</div>
</div>

Input with placeholderdoc.

$form->setCols(4, 8); // optional
$form->addInput('text', 'user-name-2', '', 'User Name', 'placeholder=Your Name, required');
<div class="form-group">
	<label for="user-name-2" class="col-sm-4 control-label">
		User Name<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="user-name-2" name="user-name-2" type="text" value="" placeholder="Your Name" required class="form-control">
	</div>
</div>

Input with icondoc.

$form->setCols(4, 8); // optional
$form->addIcon('username', '<span class="glyphicon glyphicon-user"></span>', 'before');
$form->addInput('text', 'user-name-3', '', 'User Name', 'placeholder=Your Name, required');
<div class="form-group">
	<label for="user-name-3" class="col-sm-4 control-label">
		User Name<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<div class="input-group">
			<div class="input-group-addon">
				<span class="glyphicon glyphicon-user"></span>
			</div>
			<input id="user-name-3" name="user-name-3" type="text" value="" placeholder="Your Name" required class="form-control">
		</div>
	</div>
</div>

Input without labeldoc.

$form->setCols(0, 12);
$form->addIcon('user-name-4', '<span class="glyphicon glyphicon-user"></span>', 'before');
$form->addInput('text', 'user-name-4', '', '', 'placeholder=Your Name, required');
<div class="form-group">
	<div class=" col-sm-12">
		<div class="input-group">
			<div class="input-group-addon">
				<span class="glyphicon glyphicon-user"></span>
			</div>
			<input id="user-name-4" name="user-name-4" type="text" value="" placeholder="Your Name" required class="form-control">
		</div>
	</div>
</div>

Input with floating label (Material)doc.

$form = new Form('my-form', 'horizontal', 'novalidate', 'material');
$form->setCols(0, 12);
$form->addInput('text', 'user-name-5', '', 'Your Name', 'required');
<form class="form-horizontal material-form">
	<div class="input-field row">
		<div class="col-sm-12">
			<input id="user-name-5" name="user-name-5" type="text" value="" required class="form-control">
			<label for="user-name-5">
				Your Name<sup class="text-danger">* </sup>
			</label>
		</div>
	</div>
</form>

Several fields on same linedoc.

Example 1

$form->setCols(0, 6);
$form->groupInputs('user-name-6', 'user-first-name-6');
$form->addIcon('user-name-6', '<span class="glyphicon glyphicon-user"></span>', 'before');
$form->addInput('text', 'user-name-6', '', '', 'required=required, placeholder=Name*');
$form->addInput('text', 'user-first-name-6', '', '', 'placeholder=First Name');
<div class="form-group">
	<div class=" col-sm-6">
		<div class="input-group">
			<div class="input-group-addon">
				<span class="glyphicon glyphicon-user"></span>
			</div>
			<input id="user-name-6" name="user-name-6" type="text" value="" required="required" placeholder="Name*" class="form-control">
		</div>
	</div>
	<div class=" col-sm-6">
		<input id="user-first-name-6" name="user-first-name-6" type="text" value="" placeholder="First Name" class="form-control">
	</div>
</div>

Example 2

$form->startFieldset('Please fill the form below');
$form->setCols(4, 4);
$form->groupInputs('first-name-7', 'last-name-7');
$form->addHtml('<span class="help-block">First name</span>', 'first-name-7', 'after');
$form->addInput('text', 'first-name-7', '', 'Full Name : ', 'required=required');
$form->setCols(0, 4);
$form->addHtml('<span class="help-block">Last name</span>', 'last-name-7', 'after');
$form->addInput('text', 'last-name-7', '', '', 'required=required');
$form->endFieldset();
Please fill the form below
First name
Last name
<fieldset>
	<legend>
		Please fill the form below
	</legend>
	<div class="form-group">
		<label for="first-name-7" class="col-sm-4 control-label">
			Full Name <sup class="text-danger">* </sup>: 
		</label>
		<div class="col-sm-4">
			<input id="first-name-7" name="first-name-7" type="text" value="" required="required" class="form-control">
			<span class="help-block">First name</span>
		</div>
		<div class=" col-sm-4">
			<input id="last-name-7" name="last-name-7" type="text" value="" required="required" class="form-control">
			<span class="help-block">Last name</span>
		</div>
	</div>
</fieldset>

Textareadoc.

$form->addTextarea('special-request', '', 'Any Special Request ?');
<div class="form-group">
	<label for="special-request" class="col-sm-4 control-label">
		Any Special Request ?
	</label>
	<div class="col-sm-8">
		<textarea id="special-request" name="special-request"  class="form-control"></textarea>
	</div>
</div>

Selectdoc.

Example 1

$form->addOption('prefix', '', 'Choose one ...', '', 'disabled, selected');
$form->addOption('prefix', 'Mr', 'Mr');
$form->addOption('prefix', 'Mrs', 'Mrs');
$form->addSelect('prefix', 'Full Name', 'required=required');
<div class="form-group">
	<label for="prefix" class="col-sm-4 control-label">
		Full Name<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<select id="prefix" name="prefix" required="required" class="form-control">
			<option value="" disabled>
				Choose one ...
			</option>
			<option value="Mr" >
				Mr
			</option>
			<option value="Mrs" >
				Mrs
			</option>
		</select>
	</div>
</div>

Example 2

$form->addOption('favourite-animal', 'Dog', 'dog', 'Pets');
$form->addOption('favourite-animal', 'cat', 'Cat', 'Pets');
$form->addOption('favourite-animal', 'rabbit', 'Rabbit', 'Pets', 'selected=selected');
$form->addOption('favourite-animal', 'lion', 'Lion', 'Wild');
$form->addOption('favourite-animal', 'mouse', 'Mouse', 'Others');
$form->addOption('favourite-animal', 'mammoth', 'Mammoth', 'Others');
$form->addOption('favourite-animal', 'duck', 'Duck', 'Others');
$form->addSelect('favourite-animal', 'Favourite animal');
<div class="form-group">
	<label for="favourite-animal" class="col-sm-4 control-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<select id="favourite-animal" name="favourite-animal"  class="form-control">
			<optgroup label="Pets">
				<option value="Dog" >
					dog
				</option>
				<option value="cat" >
					Cat
				</option>
				<option value="rabbit" selected="selected">
					Rabbit
				</option>
			</optgroup>
			<optgroup label="Wild">
				<option value="lion" >
					Lion
				</option>
			</optgroup>
			<optgroup label="Others">
				<option value="mouse" >
					Mouse
				</option>
				<option value="mammoth" >
					Mammoth
				</option>
				<option value="duck" >
					Duck
				</option>
			</optgroup>
		</select>
	</div>
</div>

Example 3

$form->addOption('favourite-animal-2[]', 'Dog', 'dog');
$form->addOption('favourite-animal-2[]', 'cat', 'Cat');
$form->addOption('favourite-animal-2[]', 'lion', 'Lion');
$form->addOption('favourite-animal-2[]', 'mouse', 'Mouse');
$form->addOption('favourite-animal-2[]', 'mammoth', 'Mammoth');
$form->addOption('favourite-animal-2[]', 'duck', 'Duck');
$form->addOption('favourite-animal-2[]', 'rabbit', 'Rabbit');
$form->addSelect('favourite-animal-2[]', 'Favourite animal', 'multiple');
$form->addHelper('(multiple choices)', 'favourite-animal-2[]');
<div class="form-group">
	<label for="favourite-animal-2" class="col-sm-4 control-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<select id="favourite-animal-2" name="favourite-animal-2[]" multiple class="form-control">
			<option value="Dog" >
				dog
			</option>
			<option value="cat" >
				Cat
			</option>
			<option value="lion" >
				Lion
			</option>
			<option value="mouse" >
				Mouse
			</option>
			<option value="mammoth" >
				Mammoth
			</option>
			<option value="duck" >
				Duck
			</option>
			<option value="rabbit" >
				Rabbit
			</option>
		</select>
	</div>
</div>

Select countrydoc.

addCountrySelect function uses bootstrap-select plugin.

Don't forget to call :
$form->printIncludes('css');
$form->printIncludes('js');
$form->printJsCode();

to activate plugin.

Example 1

$form = new Form('my-form', 'horizontal', 'novalidate');
$form->addCountrySelect('country', 'Your country', '', array('flag_size' => 16, 'return_value' => 'code'));
<div class="form-group">
	<label for="country" class="col-sm-4 control-label">
		Your country
	</label>
	<div class="col-sm-8">
		<select name="country" id="country" class="selectpicker form-control f16 show-tick" data-live-search="true" >
			<option value="AF" class="flag af" >
				Afghanistan
			</option>
			<option value="AL" class="flag al" >
				Albania
			</option>
			<option value="DZ" class="flag dz" >
				Algeria
			</option>
			<option value="AS" class="flag as" >
				American Samoa
			</option>
			<option value="AD" class="flag ad" >
				Andorra
			</option>
			<option value="AO" class="flag ao" >
				Angola
			</option>
			<option value="AI" class="flag ai" >
				Anguilla
			</option>
			<option value="AQ" class="flag aq" >
				Antarctica
			</option>
			<option value="AG" class="flag ag" >
				Antigua and Barbuda
			</option>
			<option value="AR" class="flag ar" >
				Argentina
			</option>
			<option value="AM" class="flag am" >
				Armenia
			</option>
			<option value="AW" class="flag aw" >
				Aruba
			</option>
			<option value="AU" class="flag au" >
				Australia
			</option>
			<option value="AT" class="flag at" >
				Austria
			</option>
			<option value="AZ" class="flag az" >
				Azerbaijan
			</option>
			<option value="BS" class="flag bs" >
				Bahamas
			</option>
			<option value="BH" class="flag bh" >
				Bahrain
			</option>
			<option value="BD" class="flag bd" >
				Bangladesh
			</option>
			<option value="BB" class="flag bb" >
				Barbados
			</option>
			<option value="BY" class="flag by" >
				Belarus
			</option>
			<option value="BE" class="flag be" >
				Belgium
			</option>
			<option value="BZ" class="flag bz" >
				Belize
			</option>
			<option value="BJ" class="flag bj" >
				Benin
			</option>
			<option value="BM" class="flag bm" >
				Bermuda
			</option>
			<option value="BT" class="flag bt" >
				Bhutan
			</option>
			<option value="BO" class="flag bo" >
				Bolivia
			</option>
			<option value="BA" class="flag ba" >
				Bosnia and Herzegovina
			</option>
			<option value="BW" class="flag bw" >
				Botswana
			</option>
			<option value="BV" class="flag bv" >
				Bouvet Island
			</option>
			<option value="BR" class="flag br" >
				Brazil
			</option>
			<option value="BQ" class="flag bq" >
				British Antarctic Territory
			</option>
			<option value="IO" class="flag io" >
				British Indian Ocean Territory
			</option>
			<option value="VG" class="flag vg" >
				British Virgin Islands
			</option>
			<option value="BN" class="flag bn" >
				Brunei
			</option>
			<option value="BG" class="flag bg" >
				Bulgaria
			</option>
			<option value="BF" class="flag bf" >
				Burkina Faso
			</option>
			<option value="BI" class="flag bi" >
				Burundi
			</option>
			<option value="KH" class="flag kh" >
				Cambodia
			</option>
			<option value="CM" class="flag cm" >
				Cameroon
			</option>
			<option value="CA" class="flag ca" >
				Canada
			</option>
			<option value="CT" class="flag ct" >
				Canton and Enderbury Islands
			</option>
			<option value="CV" class="flag cv" >
				Cape Verde
			</option>
			<option value="KY" class="flag ky" >
				Cayman Islands
			</option>
			<option value="CF" class="flag cf" >
				Central African Republic
			</option>
			<option value="TD" class="flag td" >
				Chad
			</option>
			<option value="CL" class="flag cl" >
				Chile
			</option>
			<option value="CN" class="flag cn" >
				China
			</option>
			<option value="CX" class="flag cx" >
				Christmas Island
			</option>
			<option value="CC" class="flag cc" >
				Cocos [Keeling] Islands
			</option>
			<option value="CO" class="flag co" >
				Colombia
			</option>
			<option value="KM" class="flag km" >
				Comoros
			</option>
			<option value="CG" class="flag cg" >
				Congo - Brazzaville
			</option>
			<option value="CD" class="flag cd" >
				Congo - Kinshasa
			</option>
			<option value="CK" class="flag ck" >
				Cook Islands
			</option>
			<option value="CR" class="flag cr" >
				Costa Rica
			</option>
			<option value="HR" class="flag hr" >
				Croatia
			</option>
			<option value="CU" class="flag cu" >
				Cuba
			</option>
			<option value="CY" class="flag cy" >
				Cyprus
			</option>
			<option value="CZ" class="flag cz" >
				Czech Republic
			</option>
			<option value="CI" class="flag ci" >
				Côte d’Ivoire
			</option>
			<option value="DK" class="flag dk" >
				Denmark
			</option>
			<option value="DJ" class="flag dj" >
				Djibouti
			</option>
			<option value="DM" class="flag dm" >
				Dominica
			</option>
			<option value="DO" class="flag do" >
				Dominican Republic
			</option>
			<option value="NQ" class="flag nq" >
				Dronning Maud Land
			</option>
			<option value="DD" class="flag dd" >
				East Germany
			</option>
			<option value="EC" class="flag ec" >
				Ecuador
			</option>
			<option value="EG" class="flag eg" >
				Egypt
			</option>
			<option value="SV" class="flag sv" >
				El Salvador
			</option>
			<option value="GQ" class="flag gq" >
				Equatorial Guinea
			</option>
			<option value="ER" class="flag er" >
				Eritrea
			</option>
			<option value="EE" class="flag ee" >
				Estonia
			</option>
			<option value="ET" class="flag et" >
				Ethiopia
			</option>
			<option value="FK" class="flag fk" >
				Falkland Islands
			</option>
			<option value="FO" class="flag fo" >
				Faroe Islands
			</option>
			<option value="FJ" class="flag fj" >
				Fiji
			</option>
			<option value="FI" class="flag fi" >
				Finland
			</option>
			<option value="FR" class="flag fr" >
				France
			</option>
			<option value="GF" class="flag gf" >
				French Guiana
			</option>
			<option value="PF" class="flag pf" >
				French Polynesia
			</option>
			<option value="TF" class="flag tf" >
				French Southern Territories
			</option>
			<option value="FQ" class="flag fq" >
				French Southern and Antarctic Territories
			</option>
			<option value="GA" class="flag ga" >
				Gabon
			</option>
			<option value="GM" class="flag gm" >
				Gambia
			</option>
			<option value="GE" class="flag ge" >
				Georgia
			</option>
			<option value="DE" class="flag de" >
				Germany
			</option>
			<option value="GH" class="flag gh" >
				Ghana
			</option>
			<option value="GI" class="flag gi" >
				Gibraltar
			</option>
			<option value="GR" class="flag gr" >
				Greece
			</option>
			<option value="GL" class="flag gl" >
				Greenland
			</option>
			<option value="GD" class="flag gd" >
				Grenada
			</option>
			<option value="GP" class="flag gp" >
				Guadeloupe
			</option>
			<option value="GU" class="flag gu" >
				Guam
			</option>
			<option value="GT" class="flag gt" >
				Guatemala
			</option>
			<option value="GG" class="flag gg" >
				Guernsey
			</option>
			<option value="GN" class="flag gn" >
				Guinea
			</option>
			<option value="GW" class="flag gw" >
				Guinea-Bissau
			</option>
			<option value="GY" class="flag gy" >
				Guyana
			</option>
			<option value="HT" class="flag ht" >
				Haiti
			</option>
			<option value="HM" class="flag hm" >
				Heard Island and McDonald Islands
			</option>
			<option value="HN" class="flag hn" >
				Honduras
			</option>
			<option value="HK" class="flag hk" >
				Hong Kong SAR China
			</option>
			<option value="HU" class="flag hu" >
				Hungary
			</option>
			<option value="IS" class="flag is" >
				Iceland
			</option>
			<option value="IN" class="flag in" >
				India
			</option>
			<option value="ID" class="flag id" >
				Indonesia
			</option>
			<option value="IR" class="flag ir" >
				Iran
			</option>
			<option value="IQ" class="flag iq" >
				Iraq
			</option>
			<option value="IE" class="flag ie" >
				Ireland
			</option>
			<option value="IM" class="flag im" >
				Isle of Man
			</option>
			<option value="IL" class="flag il" >
				Israel
			</option>
			<option value="IT" class="flag it" >
				Italy
			</option>
			<option value="JM" class="flag jm" >
				Jamaica
			</option>
			<option value="JP" class="flag jp" >
				Japan
			</option>
			<option value="JE" class="flag je" >
				Jersey
			</option>
			<option value="JT" class="flag jt" >
				Johnston Island
			</option>
			<option value="JO" class="flag jo" >
				Jordan
			</option>
			<option value="KZ" class="flag kz" >
				Kazakhstan
			</option>
			<option value="KE" class="flag ke" >
				Kenya
			</option>
			<option value="KI" class="flag ki" >
				Kiribati
			</option>
			<option value="KW" class="flag kw" >
				Kuwait
			</option>
			<option value="KG" class="flag kg" >
				Kyrgyzstan
			</option>
			<option value="LA" class="flag la" >
				Laos
			</option>
			<option value="LV" class="flag lv" >
				Latvia
			</option>
			<option value="LB" class="flag lb" >
				Lebanon
			</option>
			<option value="LS" class="flag ls" >
				Lesotho
			</option>
			<option value="LR" class="flag lr" >
				Liberia
			</option>
			<option value="LY" class="flag ly" >
				Libya
			</option>
			<option value="LI" class="flag li" >
				Liechtenstein
			</option>
			<option value="LT" class="flag lt" >
				Lithuania
			</option>
			<option value="LU" class="flag lu" >
				Luxembourg
			</option>
			<option value="MO" class="flag mo" >
				Macau SAR China
			</option>
			<option value="MK" class="flag mk" >
				Macedonia
			</option>
			<option value="MG" class="flag mg" >
				Madagascar
			</option>
			<option value="MW" class="flag mw" >
				Malawi
			</option>
			<option value="MY" class="flag my" >
				Malaysia
			</option>
			<option value="MV" class="flag mv" >
				Maldives
			</option>
			<option value="ML" class="flag ml" >
				Mali
			</option>
			<option value="MT" class="flag mt" >
				Malta
			</option>
			<option value="MH" class="flag mh" >
				Marshall Islands
			</option>
			<option value="MQ" class="flag mq" >
				Martinique
			</option>
			<option value="MR" class="flag mr" >
				Mauritania
			</option>
			<option value="MU" class="flag mu" >
				Mauritius
			</option>
			<option value="YT" class="flag yt" >
				Mayotte
			</option>
			<option value="FX" class="flag fx" >
				Metropolitan France
			</option>
			<option value="MX" class="flag mx" >
				Mexico
			</option>
			<option value="FM" class="flag fm" >
				Micronesia
			</option>
			<option value="MI" class="flag mi" >
				Midway Islands
			</option>
			<option value="MD" class="flag md" >
				Moldova
			</option>
			<option value="MC" class="flag mc" >
				Monaco
			</option>
			<option value="MN" class="flag mn" >
				Mongolia
			</option>
			<option value="ME" class="flag me" >
				Montenegro
			</option>
			<option value="MS" class="flag ms" >
				Montserrat
			</option>
			<option value="MA" class="flag ma" >
				Morocco
			</option>
			<option value="MZ" class="flag mz" >
				Mozambique
			</option>
			<option value="MM" class="flag mm" >
				Myanmar [Burma]
			</option>
			<option value="NA" class="flag na" >
				Namibia
			</option>
			<option value="NR" class="flag nr" >
				Nauru
			</option>
			<option value="NP" class="flag np" >
				Nepal
			</option>
			<option value="NL" class="flag nl" >
				Netherlands
			</option>
			<option value="AN" class="flag an" >
				Netherlands Antilles
			</option>
			<option value="NT" class="flag nt" >
				Neutral Zone
			</option>
			<option value="NC" class="flag nc" >
				New Caledonia
			</option>
			<option value="NZ" class="flag nz" >
				New Zealand
			</option>
			<option value="NI" class="flag ni" >
				Nicaragua
			</option>
			<option value="NE" class="flag ne" >
				Niger
			</option>
			<option value="NG" class="flag ng" >
				Nigeria
			</option>
			<option value="NU" class="flag nu" >
				Niue
			</option>
			<option value="NF" class="flag nf" >
				Norfolk Island
			</option>
			<option value="KP" class="flag kp" >
				North Korea
			</option>
			<option value="VD" class="flag vd" >
				North Vietnam
			</option>
			<option value="MP" class="flag mp" >
				Northern Mariana Islands
			</option>
			<option value="NO" class="flag no" >
				Norway
			</option>
			<option value="OM" class="flag om" >
				Oman
			</option>
			<option value="PC" class="flag pc" >
				Pacific Islands Trust Territory
			</option>
			<option value="PK" class="flag pk" >
				Pakistan
			</option>
			<option value="PW" class="flag pw" >
				Palau
			</option>
			<option value="PS" class="flag ps" >
				Palestinian Territories
			</option>
			<option value="PA" class="flag pa" >
				Panama
			</option>
			<option value="PZ" class="flag pz" >
				Panama Canal Zone
			</option>
			<option value="PG" class="flag pg" >
				Papua New Guinea
			</option>
			<option value="PY" class="flag py" >
				Paraguay
			</option>
			<option value="YD" class="flag yd" >
				People's Democratic Republic of Yemen
			</option>
			<option value="PE" class="flag pe" >
				Peru
			</option>
			<option value="PH" class="flag ph" >
				Philippines
			</option>
			<option value="PN" class="flag pn" >
				Pitcairn Islands
			</option>
			<option value="PL" class="flag pl" >
				Poland
			</option>
			<option value="PT" class="flag pt" >
				Portugal
			</option>
			<option value="PR" class="flag pr" >
				Puerto Rico
			</option>
			<option value="QA" class="flag qa" >
				Qatar
			</option>
			<option value="RO" class="flag ro" >
				Romania
			</option>
			<option value="RU" class="flag ru" >
				Russia
			</option>
			<option value="RW" class="flag rw" >
				Rwanda
			</option>
			<option value="RE" class="flag re" >
				Réunion
			</option>
			<option value="BL" class="flag bl" >
				Saint Barthélemy
			</option>
			<option value="SH" class="flag sh" >
				Saint Helena
			</option>
			<option value="KN" class="flag kn" >
				Saint Kitts and Nevis
			</option>
			<option value="LC" class="flag lc" >
				Saint Lucia
			</option>
			<option value="MF" class="flag mf" >
				Saint Martin
			</option>
			<option value="PM" class="flag pm" >
				Saint Pierre and Miquelon
			</option>
			<option value="VC" class="flag vc" >
				Saint Vincent and the Grenadines
			</option>
			<option value="WS" class="flag ws" >
				Samoa
			</option>
			<option value="SM" class="flag sm" >
				San Marino
			</option>
			<option value="SA" class="flag sa" >
				Saudi Arabia
			</option>
			<option value="SN" class="flag sn" >
				Senegal
			</option>
			<option value="RS" class="flag rs" >
				Serbia
			</option>
			<option value="CS" class="flag cs" >
				Serbia and Montenegro
			</option>
			<option value="SC" class="flag sc" >
				Seychelles
			</option>
			<option value="SL" class="flag sl" >
				Sierra Leone
			</option>
			<option value="SG" class="flag sg" >
				Singapore
			</option>
			<option value="SK" class="flag sk" >
				Slovakia
			</option>
			<option value="SI" class="flag si" >
				Slovenia
			</option>
			<option value="SB" class="flag sb" >
				Solomon Islands
			</option>
			<option value="SO" class="flag so" >
				Somalia
			</option>
			<option value="ZA" class="flag za" >
				South Africa
			</option>
			<option value="GS" class="flag gs" >
				South Georgia and the South Sandwich Islands
			</option>
			<option value="KR" class="flag kr" >
				South Korea
			</option>
			<option value="ES" class="flag es" >
				Spain
			</option>
			<option value="LK" class="flag lk" >
				Sri Lanka
			</option>
			<option value="SD" class="flag sd" >
				Sudan
			</option>
			<option value="SR" class="flag sr" >
				Suriname
			</option>
			<option value="SJ" class="flag sj" >
				Svalbard and Jan Mayen
			</option>
			<option value="SZ" class="flag sz" >
				Swaziland
			</option>
			<option value="SE" class="flag se" >
				Sweden
			</option>
			<option value="CH" class="flag ch" >
				Switzerland
			</option>
			<option value="SY" class="flag sy" >
				Syria
			</option>
			<option value="ST" class="flag st" >
				São Tomé and Príncipe
			</option>
			<option value="TW" class="flag tw" >
				Taiwan
			</option>
			<option value="TJ" class="flag tj" >
				Tajikistan
			</option>
			<option value="TZ" class="flag tz" >
				Tanzania
			</option>
			<option value="TH" class="flag th" >
				Thailand
			</option>
			<option value="TL" class="flag tl" >
				Timor-Leste
			</option>
			<option value="TG" class="flag tg" >
				Togo
			</option>
			<option value="TK" class="flag tk" >
				Tokelau
			</option>
			<option value="TO" class="flag to" >
				Tonga
			</option>
			<option value="TT" class="flag tt" >
				Trinidad and Tobago
			</option>
			<option value="TN" class="flag tn" >
				Tunisia
			</option>
			<option value="TR" class="flag tr" >
				Turkey
			</option>
			<option value="TM" class="flag tm" >
				Turkmenistan
			</option>
			<option value="TC" class="flag tc" >
				Turks and Caicos Islands
			</option>
			<option value="TV" class="flag tv" >
				Tuvalu
			</option>
			<option value="UM" class="flag um" >
				U.S. Minor Outlying Islands
			</option>
			<option value="PU" class="flag pu" >
				U.S. Miscellaneous Pacific Islands
			</option>
			<option value="VI" class="flag vi" >
				U.S. Virgin Islands
			</option>
			<option value="UG" class="flag ug" >
				Uganda
			</option>
			<option value="UA" class="flag ua" >
				Ukraine
			</option>
			<option value="SU" class="flag su" >
				Union of Soviet Socialist Republics
			</option>
			<option value="AE" class="flag ae" >
				United Arab Emirates
			</option>
			<option value="GB" class="flag gb" >
				United Kingdom
			</option>
			<option value="US" class="flag us" >
				United States
			</option>
			<option value="ZZ" class="flag zz" >
				Unknown or Invalid Region
			</option>
			<option value="UY" class="flag uy" >
				Uruguay
			</option>
			<option value="UZ" class="flag uz" >
				Uzbekistan
			</option>
			<option value="VU" class="flag vu" >
				Vanuatu
			</option>
			<option value="VA" class="flag va" >
				Vatican City
			</option>
			<option value="VE" class="flag ve" >
				Venezuela
			</option>
			<option value="VN" class="flag vn" >
				Vietnam
			</option>
			<option value="WK" class="flag wk" >
				Wake Island
			</option>
			<option value="WF" class="flag wf" >
				Wallis and Futuna
			</option>
			<option value="EH" class="flag eh" >
				Western Sahara
			</option>
			<option value="YE" class="flag ye" >
				Yemen
			</option>
			<option value="ZM" class="flag zm" >
				Zambia
			</option>
			<option value="ZW" class="flag zw" >
				Zimbabwe
			</option>
			<option value="AX" class="flag ax" >
				Åland Islands
			</option>
		</select>
	</div>
</div>

Example 2

$form = new Form('my-form', 'horizontal', 'novalidate');
$form->addCountrySelect('country', 'Your country', '', array('flag_size' => 32, 'return_value' => 'code'));
<div class="form-group">
	<label for="country" class="col-sm-4 control-label">
		Your country
	</label>
	<div class="col-sm-8">
		<select name="country" id="country" class="selectpicker form-control f32 show-tick" data-live-search="true" >
			<option value="AF" class="flag af" >
				Afghanistan
			</option>
			<option value="AL" class="flag al" >
				Albania
			</option>
			<option value="DZ" class="flag dz" >
				Algeria
			</option>
			<option value="AS" class="flag as" >
				American Samoa
			</option>
			<option value="AD" class="flag ad" >
				Andorra
			</option>
			<option value="AO" class="flag ao" >
				Angola
			</option>
			<option value="AI" class="flag ai" >
				Anguilla
			</option>
			<option value="AQ" class="flag aq" >
				Antarctica
			</option>
			<option value="AG" class="flag ag" >
				Antigua and Barbuda
			</option>
			<option value="AR" class="flag ar" >
				Argentina
			</option>
			<option value="AM" class="flag am" >
				Armenia
			</option>
			<option value="AW" class="flag aw" >
				Aruba
			</option>
			<option value="AU" class="flag au" >
				Australia
			</option>
			<option value="AT" class="flag at" >
				Austria
			</option>
			<option value="AZ" class="flag az" >
				Azerbaijan
			</option>
			<option value="BS" class="flag bs" >
				Bahamas
			</option>
			<option value="BH" class="flag bh" >
				Bahrain
			</option>
			<option value="BD" class="flag bd" >
				Bangladesh
			</option>
			<option value="BB" class="flag bb" >
				Barbados
			</option>
			<option value="BY" class="flag by" >
				Belarus
			</option>
			<option value="BE" class="flag be" >
				Belgium
			</option>
			<option value="BZ" class="flag bz" >
				Belize
			</option>
			<option value="BJ" class="flag bj" >
				Benin
			</option>
			<option value="BM" class="flag bm" >
				Bermuda
			</option>
			<option value="BT" class="flag bt" >
				Bhutan
			</option>
			<option value="BO" class="flag bo" >
				Bolivia
			</option>
			<option value="BA" class="flag ba" >
				Bosnia and Herzegovina
			</option>
			<option value="BW" class="flag bw" >
				Botswana
			</option>
			<option value="BV" class="flag bv" >
				Bouvet Island
			</option>
			<option value="BR" class="flag br" >
				Brazil
			</option>
			<option value="BQ" class="flag bq" >
				British Antarctic Territory
			</option>
			<option value="IO" class="flag io" >
				British Indian Ocean Territory
			</option>
			<option value="VG" class="flag vg" >
				British Virgin Islands
			</option>
			<option value="BN" class="flag bn" >
				Brunei
			</option>
			<option value="BG" class="flag bg" >
				Bulgaria
			</option>
			<option value="BF" class="flag bf" >
				Burkina Faso
			</option>
			<option value="BI" class="flag bi" >
				Burundi
			</option>
			<option value="KH" class="flag kh" >
				Cambodia
			</option>
			<option value="CM" class="flag cm" >
				Cameroon
			</option>
			<option value="CA" class="flag ca" >
				Canada
			</option>
			<option value="CT" class="flag ct" >
				Canton and Enderbury Islands
			</option>
			<option value="CV" class="flag cv" >
				Cape Verde
			</option>
			<option value="KY" class="flag ky" >
				Cayman Islands
			</option>
			<option value="CF" class="flag cf" >
				Central African Republic
			</option>
			<option value="TD" class="flag td" >
				Chad
			</option>
			<option value="CL" class="flag cl" >
				Chile
			</option>
			<option value="CN" class="flag cn" >
				China
			</option>
			<option value="CX" class="flag cx" >
				Christmas Island
			</option>
			<option value="CC" class="flag cc" >
				Cocos [Keeling] Islands
			</option>
			<option value="CO" class="flag co" >
				Colombia
			</option>
			<option value="KM" class="flag km" >
				Comoros
			</option>
			<option value="CG" class="flag cg" >
				Congo - Brazzaville
			</option>
			<option value="CD" class="flag cd" >
				Congo - Kinshasa
			</option>
			<option value="CK" class="flag ck" >
				Cook Islands
			</option>
			<option value="CR" class="flag cr" >
				Costa Rica
			</option>
			<option value="HR" class="flag hr" >
				Croatia
			</option>
			<option value="CU" class="flag cu" >
				Cuba
			</option>
			<option value="CY" class="flag cy" >
				Cyprus
			</option>
			<option value="CZ" class="flag cz" >
				Czech Republic
			</option>
			<option value="CI" class="flag ci" >
				Côte d’Ivoire
			</option>
			<option value="DK" class="flag dk" >
				Denmark
			</option>
			<option value="DJ" class="flag dj" >
				Djibouti
			</option>
			<option value="DM" class="flag dm" >
				Dominica
			</option>
			<option value="DO" class="flag do" >
				Dominican Republic
			</option>
			<option value="NQ" class="flag nq" >
				Dronning Maud Land
			</option>
			<option value="DD" class="flag dd" >
				East Germany
			</option>
			<option value="EC" class="flag ec" >
				Ecuador
			</option>
			<option value="EG" class="flag eg" >
				Egypt
			</option>
			<option value="SV" class="flag sv" >
				El Salvador
			</option>
			<option value="GQ" class="flag gq" >
				Equatorial Guinea
			</option>
			<option value="ER" class="flag er" >
				Eritrea
			</option>
			<option value="EE" class="flag ee" >
				Estonia
			</option>
			<option value="ET" class="flag et" >
				Ethiopia
			</option>
			<option value="FK" class="flag fk" >
				Falkland Islands
			</option>
			<option value="FO" class="flag fo" >
				Faroe Islands
			</option>
			<option value="FJ" class="flag fj" >
				Fiji
			</option>
			<option value="FI" class="flag fi" >
				Finland
			</option>
			<option value="FR" class="flag fr" >
				France
			</option>
			<option value="GF" class="flag gf" >
				French Guiana
			</option>
			<option value="PF" class="flag pf" >
				French Polynesia
			</option>
			<option value="TF" class="flag tf" >
				French Southern Territories
			</option>
			<option value="FQ" class="flag fq" >
				French Southern and Antarctic Territories
			</option>
			<option value="GA" class="flag ga" >
				Gabon
			</option>
			<option value="GM" class="flag gm" >
				Gambia
			</option>
			<option value="GE" class="flag ge" >
				Georgia
			</option>
			<option value="DE" class="flag de" >
				Germany
			</option>
			<option value="GH" class="flag gh" >
				Ghana
			</option>
			<option value="GI" class="flag gi" >
				Gibraltar
			</option>
			<option value="GR" class="flag gr" >
				Greece
			</option>
			<option value="GL" class="flag gl" >
				Greenland
			</option>
			<option value="GD" class="flag gd" >
				Grenada
			</option>
			<option value="GP" class="flag gp" >
				Guadeloupe
			</option>
			<option value="GU" class="flag gu" >
				Guam
			</option>
			<option value="GT" class="flag gt" >
				Guatemala
			</option>
			<option value="GG" class="flag gg" >
				Guernsey
			</option>
			<option value="GN" class="flag gn" >
				Guinea
			</option>
			<option value="GW" class="flag gw" >
				Guinea-Bissau
			</option>
			<option value="GY" class="flag gy" >
				Guyana
			</option>
			<option value="HT" class="flag ht" >
				Haiti
			</option>
			<option value="HM" class="flag hm" >
				Heard Island and McDonald Islands
			</option>
			<option value="HN" class="flag hn" >
				Honduras
			</option>
			<option value="HK" class="flag hk" >
				Hong Kong SAR China
			</option>
			<option value="HU" class="flag hu" >
				Hungary
			</option>
			<option value="IS" class="flag is" >
				Iceland
			</option>
			<option value="IN" class="flag in" >
				India
			</option>
			<option value="ID" class="flag id" >
				Indonesia
			</option>
			<option value="IR" class="flag ir" >
				Iran
			</option>
			<option value="IQ" class="flag iq" >
				Iraq
			</option>
			<option value="IE" class="flag ie" >
				Ireland
			</option>
			<option value="IM" class="flag im" >
				Isle of Man
			</option>
			<option value="IL" class="flag il" >
				Israel
			</option>
			<option value="IT" class="flag it" >
				Italy
			</option>
			<option value="JM" class="flag jm" >
				Jamaica
			</option>
			<option value="JP" class="flag jp" >
				Japan
			</option>
			<option value="JE" class="flag je" >
				Jersey
			</option>
			<option value="JT" class="flag jt" >
				Johnston Island
			</option>
			<option value="JO" class="flag jo" >
				Jordan
			</option>
			<option value="KZ" class="flag kz" >
				Kazakhstan
			</option>
			<option value="KE" class="flag ke" >
				Kenya
			</option>
			<option value="KI" class="flag ki" >
				Kiribati
			</option>
			<option value="KW" class="flag kw" >
				Kuwait
			</option>
			<option value="KG" class="flag kg" >
				Kyrgyzstan
			</option>
			<option value="LA" class="flag la" >
				Laos
			</option>
			<option value="LV" class="flag lv" >
				Latvia
			</option>
			<option value="LB" class="flag lb" >
				Lebanon
			</option>
			<option value="LS" class="flag ls" >
				Lesotho
			</option>
			<option value="LR" class="flag lr" >
				Liberia
			</option>
			<option value="LY" class="flag ly" >
				Libya
			</option>
			<option value="LI" class="flag li" >
				Liechtenstein
			</option>
			<option value="LT" class="flag lt" >
				Lithuania
			</option>
			<option value="LU" class="flag lu" >
				Luxembourg
			</option>
			<option value="MO" class="flag mo" >
				Macau SAR China
			</option>
			<option value="MK" class="flag mk" >
				Macedonia
			</option>
			<option value="MG" class="flag mg" >
				Madagascar
			</option>
			<option value="MW" class="flag mw" >
				Malawi
			</option>
			<option value="MY" class="flag my" >
				Malaysia
			</option>
			<option value="MV" class="flag mv" >
				Maldives
			</option>
			<option value="ML" class="flag ml" >
				Mali
			</option>
			<option value="MT" class="flag mt" >
				Malta
			</option>
			<option value="MH" class="flag mh" >
				Marshall Islands
			</option>
			<option value="MQ" class="flag mq" >
				Martinique
			</option>
			<option value="MR" class="flag mr" >
				Mauritania
			</option>
			<option value="MU" class="flag mu" >
				Mauritius
			</option>
			<option value="YT" class="flag yt" >
				Mayotte
			</option>
			<option value="FX" class="flag fx" >
				Metropolitan France
			</option>
			<option value="MX" class="flag mx" >
				Mexico
			</option>
			<option value="FM" class="flag fm" >
				Micronesia
			</option>
			<option value="MI" class="flag mi" >
				Midway Islands
			</option>
			<option value="MD" class="flag md" >
				Moldova
			</option>
			<option value="MC" class="flag mc" >
				Monaco
			</option>
			<option value="MN" class="flag mn" >
				Mongolia
			</option>
			<option value="ME" class="flag me" >
				Montenegro
			</option>
			<option value="MS" class="flag ms" >
				Montserrat
			</option>
			<option value="MA" class="flag ma" >
				Morocco
			</option>
			<option value="MZ" class="flag mz" >
				Mozambique
			</option>
			<option value="MM" class="flag mm" >
				Myanmar [Burma]
			</option>
			<option value="NA" class="flag na" >
				Namibia
			</option>
			<option value="NR" class="flag nr" >
				Nauru
			</option>
			<option value="NP" class="flag np" >
				Nepal
			</option>
			<option value="NL" class="flag nl" >
				Netherlands
			</option>
			<option value="AN" class="flag an" >
				Netherlands Antilles
			</option>
			<option value="NT" class="flag nt" >
				Neutral Zone
			</option>
			<option value="NC" class="flag nc" >
				New Caledonia
			</option>
			<option value="NZ" class="flag nz" >
				New Zealand
			</option>
			<option value="NI" class="flag ni" >
				Nicaragua
			</option>
			<option value="NE" class="flag ne" >
				Niger
			</option>
			<option value="NG" class="flag ng" >
				Nigeria
			</option>
			<option value="NU" class="flag nu" >
				Niue
			</option>
			<option value="NF" class="flag nf" >
				Norfolk Island
			</option>
			<option value="KP" class="flag kp" >
				North Korea
			</option>
			<option value="VD" class="flag vd" >
				North Vietnam
			</option>
			<option value="MP" class="flag mp" >
				Northern Mariana Islands
			</option>
			<option value="NO" class="flag no" >
				Norway
			</option>
			<option value="OM" class="flag om" >
				Oman
			</option>
			<option value="PC" class="flag pc" >
				Pacific Islands Trust Territory
			</option>
			<option value="PK" class="flag pk" >
				Pakistan
			</option>
			<option value="PW" class="flag pw" >
				Palau
			</option>
			<option value="PS" class="flag ps" >
				Palestinian Territories
			</option>
			<option value="PA" class="flag pa" >
				Panama
			</option>
			<option value="PZ" class="flag pz" >
				Panama Canal Zone
			</option>
			<option value="PG" class="flag pg" >
				Papua New Guinea
			</option>
			<option value="PY" class="flag py" >
				Paraguay
			</option>
			<option value="YD" class="flag yd" >
				People's Democratic Republic of Yemen
			</option>
			<option value="PE" class="flag pe" >
				Peru
			</option>
			<option value="PH" class="flag ph" >
				Philippines
			</option>
			<option value="PN" class="flag pn" >
				Pitcairn Islands
			</option>
			<option value="PL" class="flag pl" >
				Poland
			</option>
			<option value="PT" class="flag pt" >
				Portugal
			</option>
			<option value="PR" class="flag pr" >
				Puerto Rico
			</option>
			<option value="QA" class="flag qa" >
				Qatar
			</option>
			<option value="RO" class="flag ro" >
				Romania
			</option>
			<option value="RU" class="flag ru" >
				Russia
			</option>
			<option value="RW" class="flag rw" >
				Rwanda
			</option>
			<option value="RE" class="flag re" >
				Réunion
			</option>
			<option value="BL" class="flag bl" >
				Saint Barthélemy
			</option>
			<option value="SH" class="flag sh" >
				Saint Helena
			</option>
			<option value="KN" class="flag kn" >
				Saint Kitts and Nevis
			</option>
			<option value="LC" class="flag lc" >
				Saint Lucia
			</option>
			<option value="MF" class="flag mf" >
				Saint Martin
			</option>
			<option value="PM" class="flag pm" >
				Saint Pierre and Miquelon
			</option>
			<option value="VC" class="flag vc" >
				Saint Vincent and the Grenadines
			</option>
			<option value="WS" class="flag ws" >
				Samoa
			</option>
			<option value="SM" class="flag sm" >
				San Marino
			</option>
			<option value="SA" class="flag sa" >
				Saudi Arabia
			</option>
			<option value="SN" class="flag sn" >
				Senegal
			</option>
			<option value="RS" class="flag rs" >
				Serbia
			</option>
			<option value="CS" class="flag cs" >
				Serbia and Montenegro
			</option>
			<option value="SC" class="flag sc" >
				Seychelles
			</option>
			<option value="SL" class="flag sl" >
				Sierra Leone
			</option>
			<option value="SG" class="flag sg" >
				Singapore
			</option>
			<option value="SK" class="flag sk" >
				Slovakia
			</option>
			<option value="SI" class="flag si" >
				Slovenia
			</option>
			<option value="SB" class="flag sb" >
				Solomon Islands
			</option>
			<option value="SO" class="flag so" >
				Somalia
			</option>
			<option value="ZA" class="flag za" >
				South Africa
			</option>
			<option value="GS" class="flag gs" >
				South Georgia and the South Sandwich Islands
			</option>
			<option value="KR" class="flag kr" >
				South Korea
			</option>
			<option value="ES" class="flag es" >
				Spain
			</option>
			<option value="LK" class="flag lk" >
				Sri Lanka
			</option>
			<option value="SD" class="flag sd" >
				Sudan
			</option>
			<option value="SR" class="flag sr" >
				Suriname
			</option>
			<option value="SJ" class="flag sj" >
				Svalbard and Jan Mayen
			</option>
			<option value="SZ" class="flag sz" >
				Swaziland
			</option>
			<option value="SE" class="flag se" >
				Sweden
			</option>
			<option value="CH" class="flag ch" >
				Switzerland
			</option>
			<option value="SY" class="flag sy" >
				Syria
			</option>
			<option value="ST" class="flag st" >
				São Tomé and Príncipe
			</option>
			<option value="TW" class="flag tw" >
				Taiwan
			</option>
			<option value="TJ" class="flag tj" >
				Tajikistan
			</option>
			<option value="TZ" class="flag tz" >
				Tanzania
			</option>
			<option value="TH" class="flag th" >
				Thailand
			</option>
			<option value="TL" class="flag tl" >
				Timor-Leste
			</option>
			<option value="TG" class="flag tg" >
				Togo
			</option>
			<option value="TK" class="flag tk" >
				Tokelau
			</option>
			<option value="TO" class="flag to" >
				Tonga
			</option>
			<option value="TT" class="flag tt" >
				Trinidad and Tobago
			</option>
			<option value="TN" class="flag tn" >
				Tunisia
			</option>
			<option value="TR" class="flag tr" >
				Turkey
			</option>
			<option value="TM" class="flag tm" >
				Turkmenistan
			</option>
			<option value="TC" class="flag tc" >
				Turks and Caicos Islands
			</option>
			<option value="TV" class="flag tv" >
				Tuvalu
			</option>
			<option value="UM" class="flag um" >
				U.S. Minor Outlying Islands
			</option>
			<option value="PU" class="flag pu" >
				U.S. Miscellaneous Pacific Islands
			</option>
			<option value="VI" class="flag vi" >
				U.S. Virgin Islands
			</option>
			<option value="UG" class="flag ug" >
				Uganda
			</option>
			<option value="UA" class="flag ua" >
				Ukraine
			</option>
			<option value="SU" class="flag su" >
				Union of Soviet Socialist Republics
			</option>
			<option value="AE" class="flag ae" >
				United Arab Emirates
			</option>
			<option value="GB" class="flag gb" >
				United Kingdom
			</option>
			<option value="US" class="flag us" >
				United States
			</option>
			<option value="ZZ" class="flag zz" >
				Unknown or Invalid Region
			</option>
			<option value="UY" class="flag uy" >
				Uruguay
			</option>
			<option value="UZ" class="flag uz" >
				Uzbekistan
			</option>
			<option value="VU" class="flag vu" >
				Vanuatu
			</option>
			<option value="VA" class="flag va" >
				Vatican City
			</option>
			<option value="VE" class="flag ve" >
				Venezuela
			</option>
			<option value="VN" class="flag vn" >
				Vietnam
			</option>
			<option value="WK" class="flag wk" >
				Wake Island
			</option>
			<option value="WF" class="flag wf" >
				Wallis and Futuna
			</option>
			<option value="EH" class="flag eh" >
				Western Sahara
			</option>
			<option value="YE" class="flag ye" >
				Yemen
			</option>
			<option value="ZM" class="flag zm" >
				Zambia
			</option>
			<option value="ZW" class="flag zw" >
				Zimbabwe
			</option>
			<option value="AX" class="flag ax" >
				Åland Islands
			</option>
		</select>
	</div>
</div>

Radiodoc.

Example 1

$form->addRadio('support-rating', 'Excellent', 'Excellent');
$form->addRadio('support-rating', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating', 'Fair', 'Fair');
$form->addRadio('support-rating', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating', 'Please rate our support', false, 'required=required');
<div class="form-group">
	<label required="required" class="main-label col-sm-4 control-label">
		Please rate our support<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<div class="radio">
			<label for="support-rating_0" >
				<input type="radio" id="support-rating_0" name="support-rating" value="Excellent" required >
				Excellent
			</label>
		</div>
		<div class="radio">
			<label for="support-rating_1" >
				<input type="radio" id="support-rating_1" name="support-rating" value="Good" required checked="checked">
				Good
			</label>
		</div>
		<div class="radio">
			<label for="support-rating_2" >
				<input type="radio" id="support-rating_2" name="support-rating" value="Fair" required >
				Fair
			</label>
		</div>
		<div class="radio">
			<label for="support-rating_3" >
				<input type="radio" id="support-rating_3" name="support-rating" value="Terrible" required >
				Terrible
			</label>
		</div>
	</div>
</div>

Example 2

$form->addRadio('support-rating-2', 'Excellent', 'Excellent');
$form->addRadio('support-rating-2', 'Good', 'Good', 'checked=checked');
$form->addRadio('support-rating-2', 'Fair', 'Fair');
$form->addRadio('support-rating-2', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating-2', 'Please rate our support', true, 'required=required');
<div class="form-group">
	<label required="required" class="main-label col-sm-4 control-label">
		Please rate our support<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<label for="support-rating-2_0"  class="radio-inline">
			<input type="radio" id="support-rating-2_0" name="support-rating-2" value="Excellent" required >
			Excellent
		</label>
		<label for="support-rating-2_1"  class="radio-inline">
			<input type="radio" id="support-rating-2_1" name="support-rating-2" value="Good" required checked="checked">
			Good
		</label>
		<label for="support-rating-2_2"  class="radio-inline">
			<input type="radio" id="support-rating-2_2" name="support-rating-2" value="Fair" required >
			Fair
		</label>
		<label for="support-rating-2_3"  class="radio-inline">
			<input type="radio" id="support-rating-2_3" name="support-rating-2" value="Terrible" required >
			Terrible
		</label>
	</div>
</div>

Checkboxdoc.

Example 1

$form->addCheckbox('favourite-animal-3', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-3', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-3', 'duck', 'Duck');
$form->addCheckbox('favourite-animal-3', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-3', 'Favourite animal');
<div class="form-group">
	<label class="col-sm-4 control-label main-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<label for="favourite-animal-3_0" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-3_0" name="favourite-animal-3[]" value="dog" >
			Dog
		</label>
		<label for="favourite-animal-3_1" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-3_1" name="favourite-animal-3[]" value="Cat" >
			cat
		</label>
		<label for="favourite-animal-3_2" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-3_2" name="favourite-animal-3[]" value="Duck" >
			duck
		</label>
		<label for="favourite-animal-3_3" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-3_3" name="favourite-animal-3[]" value="Rabbit" >
			rabbit
		</label>
	</div>
</div>

Example 2

$form->addCheckbox('favourite-animal-4', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-4', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-4', 'duck', 'Duck');
$form->addCheckbox('favourite-animal-4', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-4', 'Favourite animal', false);
<div class="form-group">
	<label class="col-sm-4 control-label main-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<div class="checkbox">
			<label for="favourite-animal-4_0">
				<input type="checkbox" id="favourite-animal-4_0" name="favourite-animal-4[]" value="dog" >
				Dog
			</label>
		</div>
		<div class="checkbox">
			<label for="favourite-animal-4_1">
				<input type="checkbox" id="favourite-animal-4_1" name="favourite-animal-4[]" value="Cat" >
				cat
			</label>
		</div>
		<div class="checkbox">
			<label for="favourite-animal-4_2">
				<input type="checkbox" id="favourite-animal-4_2" name="favourite-animal-4[]" value="Duck" >
				duck
			</label>
		</div>
		<div class="checkbox">
			<label for="favourite-animal-4_3">
				<input type="checkbox" id="favourite-animal-4_3" name="favourite-animal-4[]" value="Rabbit" >
				rabbit
			</label>
		</div>
	</div>
</div>

Buttondoc.

$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success');
<div class="form-group">
	<div class="col-sm-offset-4 col-sm-8">
		<button type="submit" name="submit-btn" value="1" class="btn btn-success">
			Send <span class="glyphicon glyphicon-envelope append"></span>
		</button>
	</div>
</div>

Button groupdoc.

$form->addBtn('submit', 'cancel-btn', 0, 'Cancel <span class="glyphicon glyphicon-remove-sign append"></span>', 'class=btn btn-danger', 'my-btn-group');
$form->addBtn('submit', 'submit-btn', 1, 'Send <span class="glyphicon glyphicon-envelope append"></span>', 'class=btn btn-success', 'my-btn-group');
$form->printBtnGroup('my-btn-group');
<div class="form-group">
	<div class="col-sm-offset-4 col-sm-8">
		<div class="btn-group">
			<button type="submit" name="cancel-btn" value="0" class="btn btn-danger">
				Cancel <span class="glyphicon glyphicon-remove-sign append"></span>
			</button>
			<button type="submit" name="submit-btn" value="1" class="btn btn-success">
				Send <span class="glyphicon glyphicon-envelope append"></span>
			</button>
		</div>
	</div>
</div>

Custom htmldoc.

$form->addHtml('<span class="help-block">Enter your name</span>', 'name', 'after');
$form->addInput('text', 'name', '', 'Name');
$form->addHtml('<p class="alert alert-warning"><span class="glyphicon glyphicon-warning-sign"></span> Please read this !</p>');
Enter your name

Please read this !

<div class="form-group">
	<label for="name" class="col-sm-4 control-label">
		Name
	</label>
	<div class="col-sm-8">
		<input id="name" name="name" type="text" value=""  class="form-control">
		<span class="help-block">Enter your name</span>
	</div>
</div>
<p class="alert alert-warning">
	<span class="glyphicon glyphicon-warning-sign"></span>
	 Please read this !
</p>

Plugins

Autocompletedoc.

$form = new Form('search-form-1', 'vertical', 'novalidate');
$form->addHtml('<label for="search-input-1">Search something : </label>');
$options = array(
        'elementsWrapper' => '<div class="input-group"></div>'
);
$form->setOptions($options);
$form->groupInputs('search-input-1', 'search-btn-1');
$form->addInputWrapper('<span class="input-group-btn"></span>', 'search-btn-1');
$form->addInput('text', 'search-input-1', '', '', 'placeholder=Search here ...');
$form->addBtn('submit', 'search-btn-1', 1, '<span class="glyphicon glyphicon-search"></span>', 'class=btn btn-success');
$form->addHtml('<span class="help-block">Type for example "A"</span>');

$complete_list = array(
    '%availableTags%' =>
    '
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
    '
);
$form->addPlugin('autocomplete', '#search-input-1', 'default', $complete_list);
Type for example "A"
<label for="search-input-1">
	Search something : 
</label>
<div class="input-group">
	<input id="search-input-1" name="search-input-1" type="text" value="" placeholder="Search here ..." class="form-control">
	<span class="input-group-btn"><button type="submit" name="search-btn-1" value="1" class="btn btn-success">
	<span class="glyphicon glyphicon-search"></span>
</button></span>
</div>
<span class="help-block">Type for example "A"</span>

Bootstrap selectdoc.

Example 1

$form->addOption('reservation-type', 'Dinner', 'Dinner', '', 'data-icon=fa fa-cutlery');
$form->addOption('reservation-type', 'Birthday/ Anniversary', 'Birthday/ Anniversary', '', 'data-icon=fa fa-birthday-cake');
$form->addOption('reservation-type', 'Nightlife', 'Nightlife', '', 'data-icon=fa fa-moon-o');
$form->addOption('reservation-type', 'Private', 'Private', '', 'data-icon=fa fa-user-secret');
$form->addOption('reservation-type', 'Wedding', 'Wedding', '', 'data-icon=fa fa-heart');
$form->addOption('reservation-type', 'Corporate', 'Corporate', '', 'data-icon=fa fa-briefcase');
$form->addOption('reservation-type', 'Other', 'Other', '', 'data-icon=fa fa-star');
$form->addSelect('reservation-type', 'Reservation Type', 'class=selectpicker show-tick');
<div class="form-group">
	<label for="reservation-type" class="col-sm-4 control-label">
		Reservation Type
	</label>
	<div class="col-sm-8">
		<select id="reservation-type" name="reservation-type" class="selectpicker show-tick form-control">
			<option value="Dinner" data-icon="fa fa-cutlery">
				Dinner
			</option>
			<option value="Birthday/ Anniversary" data-icon="fa fa-birthday-cake">
				Birthday/ Anniversary
			</option>
			<option value="Nightlife" data-icon="fa fa-moon-o">
				Nightlife
			</option>
			<option value="Private" data-icon="fa fa-user-secret">
				Private
			</option>
			<option value="Wedding" data-icon="fa fa-heart">
				Wedding
			</option>
			<option value="Corporate" data-icon="fa fa-briefcase">
				Corporate
			</option>
			<option value="Other" data-icon="fa fa-star">
				Other
			</option>
		</select>
	</div>
</div>

Example 2

$form->addOption('product-choice[]', 'Computers', 'Computers', '', 'data-icon=glyphicon-hdd');
$form->addOption('product-choice[]', 'Games', 'Games', '', 'data-icon=glyphicon-send');
$form->addOption('product-choice[]', 'Books', 'Books', '', 'selected, data-icon=glyphicon-book');
$form->addOption('product-choice[]', 'Music', 'Music', '', 'selected, data-icon=glyphicon-headphones');
$form->addOption('product-choice[]', 'Photos', 'Photos', '', 'data-icon=glyphicon-picture');
$form->addOption('product-choice[]', 'Films', 'Films', '', 'data-icon=glyphicon-film');
$form->addHelper('(multiple choices)', 'product-choice[]');
$form->addSelect('product-choice[]', 'What products are you interested in ?', 'class=selectpicker, required=required, multiple=multiple');
(multiple choices)
<div class="form-group">
	<label for="product-choice" class="col-sm-4 control-label">
		What products are you interested in ?<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<select id="product-choice" name="product-choice[]" class="selectpicker form-control" required="required" multiple="multiple">
			<option value="Computers" data-icon="glyphicon-hdd">
				Computers
			</option>
			<option value="Games" data-icon="glyphicon-send">
				Games
			</option>
			<option value="Books" selected data-icon="glyphicon-book">
				Books
			</option>
			<option value="Music" selected data-icon="glyphicon-headphones">
				Music
			</option>
			<option value="Photos" data-icon="glyphicon-picture">
				Photos
			</option>
			<option value="Films" data-icon="glyphicon-film">
				Films
			</option>
		</select>
		<span class="help-block">(multiple choices)</span>
	</div>
</div>

Captchadoc.

$form->addInput('text', 'captcha', '', 'Type the following characters :', 'size=15');
$form->addPlugin('captcha', '#captcha');
<div class="form-group">
	<label for="captcha" class="col-sm-3 control-label">
		Type the following characters :
	</label>
	<div class="col-sm-9">
		<input id="captcha" name="captcha" type="text" value="" size="15" class="form-control">
	</div>
</div>

Colorpickerdoc.

Example 1

$form->addPlugin('colorpicker', '#pick-a-color');
$form->addInput('text', 'pick-a-color', '#006673', 'Pick a color');
<div class="form-group">
	<label for="pick-a-color" class="col-sm-4 control-label">
		Pick a color
	</label>
	<div class="col-sm-8">
		<input id="pick-a-color" name="pick-a-color" type="text" value="#006673"  class="form-control">
	</div>
</div>

Example 2

$form->addPlugin('colorpicker', '#pick-a-color-2', 'colored-input');
$form->addInput('text', 'pick-a-color-2', '#006673', 'Pick a color');
<div class="form-group">
	<label for="pick-a-color-2" class="col-sm-4 control-label">
		Pick a color
	</label>
	<div class="col-sm-8">
		<input id="pick-a-color-2" name="pick-a-color-2" type="text" value="#006673"  class="form-control">
	</div>
</div>

Example 3

$form->addPlugin('colorpicker', '#pick-a-color-3', 'colored-input');
$form->addInput('text', 'pick-a-color-3', '#006673', 'Pick a color');
<div class="form-group">
	<label for="pick-a-color-3" class="col-sm-4 control-label">
		Pick a color
	</label>
	<div class="col-sm-8">
		<input id="pick-a-color-3" name="pick-a-color-3" type="text" value="#006673"  class="form-control">
	</div>
</div>

Datepickerdoc.

Example 1

$form->addPlugin('datepicker', '#pick-a-date');
$form->addInput('text', 'pick-a-date', '06/09/2015', 'Pick a date', '');
<div class="form-group">
	<label for="pick-a-date" class="col-sm-4 control-label">
		Pick a date
	</label>
	<div class="col-sm-8">
		<input id="pick-a-date" name="pick-a-date" type="text" value="06/09/2015"  class="form-control">
	</div>
</div>

Example 2

$form->addPlugin('datepicker', '#date-custom-format', 'Y-m-d');
$form->addInput('text', 'date-custom-format', '2015-06-09', 'Pick a date (Y-m-d)');
<div class="form-group">
	<label for="date-custom-format" class="col-sm-4 control-label">
		Pick a date (Y-m-d)
	</label>
	<div class="col-sm-8">
		<input id="date-custom-format" name="date-custom-format" type="text" value="2015-06-09"  class="form-control">
	</div>
</div>

Dependant fieldsdoc.

$form->addOption('subject', '', 'Your request concerns ...');
$form->addOption('subject', 'Support', 'Support', '');
$form->addOption('subject', 'Sales', 'Sales', '');
$form->addOption('subject', 'Other', 'Other', '');
$form->addSelect('subject', '');
$form->startDependantFields('subject', 'Other');
$form->addInput('text', 'subject-other', '', '', 'placeholder=Please tell more about your request ...');
$form->endDependantFields();
<div class="form-group">
	<div class="col-sm-offset-4 col-sm-8">
		<select id="subject" name="subject"  class="form-control">
			<option value="" >
				Your request concerns ...
			</option>
			<option value="Support" >
				Support
			</option>
			<option value="Sales" >
				Sales
			</option>
			<option value="Other" >
				Other
			</option>
		</select>
	</div>
</div>
<div class="hidden-wrapper off" data-parent="subject" data-show-values="Other" data-inverse="">
	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-8">
			<input id="subject-other" name="subject-other" type="text" value="" placeholder="Please tell more about your request ..." class="form-control">
		</div>
	</div>
</div>

File uploaddoc.

$fileUpload_config = array(
'xml'                 => 'default',
'uploader'            => 'defaultFileUpload.php',
'btn-text'            => 'Browse ...',
'max-number-of-files' => 3
);
$form->addHelper('3 files max. Accepted File Types : .pdf, .doc[x], .xls[x], .txt', 'cv[]');
$form->addFileUpload('file', 'cv[]', '', 'Upload your CV 
& Other Testmonials
(e.g Certificates)', 'id=cvFileUpload', $fileUpload_config);
Browse ...
 
3 files max. Accepted File Types : .pdf, .doc[x], .xls[x], .txt
<div class="form-group">
	<label for="cv[]" class="col-sm-4 control-label fileinput-label">
		Upload your CV 
		<br>
			&amp; Other Testmonials 
			<br>
				(e.g Certificates)
			</label>
			<div class="col-sm-8">
				<!-- The container for the uploaded files -->
				<div id="cv[]-upload" class="fileupload">
					<div class="row fileupload-buttonbar">
						<div class="col-lg-7">
							            <span class="btn btn-success fileinput-button">
                <i class="glyphicon glyphicon-plus"></i>                <span>Browse ...</span>                
						<input type="file" name="cv[]" multiple />
						            </span>            <span class="fileupload-process"></span>        
				</div>
				<div class="col-lg-5 fileupload-progress fade">
					<div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
						<div class="progress-bar progress-bar-success" style="width:0%;"></div>
					</div>
					<div class="progress-extended">
						&nbsp;
					</div>
				</div>
			</div>
			<table role="presentation" class="table table-striped">
				<tbody class="files"></tbody>
			</table>
		</div>
		        <span class="help-block">3 files max. Accepted File Types : .pdf, .doc[x], .xls[x], .txt</span>
	</div>
</div>

Icheckdoc.

Example 1

$form->addRadio('support-rating-3', 'Excellent', 'Excellent');
$form->addRadio('support-rating-3', 'Good', 'Good', 'checked');
$form->addRadio('support-rating-3', 'Fair', 'Fair');
$form->addRadio('support-rating-3', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating-3', 'Please rate our support', true, 'required=required');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'blue'));
<div class="form-group">
	<label required="required" class="main-label col-sm-4 control-label">
		Please rate our support<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<label for="support-rating-3_0"  class="radio-inline">
			<input type="radio" id="support-rating-3_0" name="support-rating-3" value="Excellent" required >
			Excellent
		</label>
		<label for="support-rating-3_1"  class="radio-inline">
			<input type="radio" id="support-rating-3_1" name="support-rating-3" value="Good" required checked>
			Good
		</label>
		<label for="support-rating-3_2"  class="radio-inline">
			<input type="radio" id="support-rating-3_2" name="support-rating-3" value="Fair" required >
			Fair
		</label>
		<label for="support-rating-3_3"  class="radio-inline">
			<input type="radio" id="support-rating-3_3" name="support-rating-3" value="Terrible" required >
			Terrible
		</label>
	</div>
</div>

Example 2

$form->addCheckbox('favourite-animal-5', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-5', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-5', 'duck', 'Duck', 'checked');
$form->addCheckbox('favourite-animal-5', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-5', 'Favourite animal');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'square-custom', '%color%' => 'blue'));
<div class="form-group">
	<label class="col-sm-4 control-label main-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<label for="favourite-animal-5_0" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-5_0" name="favourite-animal-5[]" value="dog" >
			Dog
		</label>
		<label for="favourite-animal-5_1" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-5_1" name="favourite-animal-5[]" value="Cat" >
			cat
		</label>
		<label for="favourite-animal-5_2" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-5_2" name="favourite-animal-5[]" value="Duck" checked>
			duck
		</label>
		<label for="favourite-animal-5_3" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-5_3" name="favourite-animal-5[]" value="Rabbit" >
			rabbit
		</label>
	</div>
</div>

Example 3

$form->addRadio('support-rating-4', 'Excellent', 'Excellent');
$form->addRadio('support-rating-4', 'Good', 'Good', 'checked');
$form->addRadio('support-rating-4', 'Fair', 'Fair');
$form->addRadio('support-rating-4', 'Terrible', 'Terrible');
$form->printRadioGroup('support-rating-4', 'Please rate our support', true, 'required=required');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'flat', '%color%' => 'red'));
<div class="form-group">
	<label required="required" class="main-label col-sm-4 control-label">
		Please rate our support<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<label for="support-rating-4_0"  class="radio-inline">
			<input type="radio" id="support-rating-4_0" name="support-rating-4" value="Excellent" required >
			Excellent
		</label>
		<label for="support-rating-4_1"  class="radio-inline">
			<input type="radio" id="support-rating-4_1" name="support-rating-4" value="Good" required checked>
			Good
		</label>
		<label for="support-rating-4_2"  class="radio-inline">
			<input type="radio" id="support-rating-4_2" name="support-rating-4" value="Fair" required >
			Fair
		</label>
		<label for="support-rating-4_3"  class="radio-inline">
			<input type="radio" id="support-rating-4_3" name="support-rating-4" value="Terrible" required >
			Terrible
		</label>
	</div>
</div>

Example 4

$form->addCheckbox('favourite-animal-6', 'Dog', 'dog');
$form->addCheckbox('favourite-animal-6', 'cat', 'Cat');
$form->addCheckbox('favourite-animal-6', 'duck', 'Duck', 'checked');
$form->addCheckbox('favourite-animal-6', 'rabbit', 'Rabbit');
$form->printCheckboxGroup('favourite-animal-6', 'Favourite animal');
$form->addPlugin('icheck', 'input', 'default', array('%theme%' => 'flat', '%color%' => 'red'));
<div class="form-group">
	<label class="col-sm-4 control-label main-label">
		Favourite animal
	</label>
	<div class="col-sm-8">
		<label for="favourite-animal-6_0" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-6_0" name="favourite-animal-6[]" value="dog" >
			Dog
		</label>
		<label for="favourite-animal-6_1" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-6_1" name="favourite-animal-6[]" value="Cat" >
			cat
		</label>
		<label for="favourite-animal-6_2" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-6_2" name="favourite-animal-6[]" value="Duck" checked>
			duck
		</label>
		<label for="favourite-animal-6_3" class="checkbox-inline">
			<input type="checkbox" id="favourite-animal-6_3" name="favourite-animal-6[]" value="Rabbit" >
			rabbit
		</label>
	</div>
</div>

Materializedoc.

$form = new Form('my-form', 'horizontal', 'novalidate', 'material');
$form->setCols(0, 12);
$form->addInput('text', 'user-name-5', '', 'Your Name', 'required');
Please fill in this form to contact us

* Required fields

<form class="form-horizontal material-form">
	<fieldset>
		<legend>
			Please fill in this form to contact us
		</legend>
		<div class="input-field row">
			<div class=" col-sm-6">
				<span class="glyphicon glyphicon-user prefix"></span>
				<input id="user-name" name="user-name" type="text" value="" required="required" placeholder="Name*" class="form-control">
			</div>
			<div class=" col-sm-6">
				<input id="user-first-name" name="user-first-name" type="text" value="" placeholder="First Name" class="form-control">
			</div>
		</div>
		<div class="input-field row">
			<div class=" col-sm-12">
				<span class="glyphicon glyphicon-envelope prefix"></span>
				<input id="user-email" name="user-email" type="email" value="" required="required" placeholder="Email*" class="form-control">
			</div>
		</div>
		<div class="input-field row">
			<div class="col-sm-offset-3 col-sm-9">
				<button type="submit" name="submit-btn" value="1" class="btn btn-success">
					Send <span class="glyphicon glyphicon-envelope append"></span>
				</button>
			</div>
		</div>
	</fieldset>
	<p class="text-warning">
		* Required fields
	</p>
</form>

Passfielddoc.

$form->addPlugin('passfield', '#user-password-2', 'lower-upper-number-symbol-min8');
$form->addHelper('password must contain lowercase + uppercase letters + number + symbol and be 8 characters long', 'user-password-2');
$form->addInput('password', 'user-password-2', '', 'password', 'required=required');
password must contain lowercase + uppercase letters + number + symbol and be 8 characters long
<div class="form-group">
	<label for="user-password-2" class="col-sm-4 control-label">
		password<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="user-password-2" name="user-password-2" type="password" value="" required="required" class="form-control">
		<span class="help-block">password must contain lowercase + uppercase letters + number + symbol and be 8 characters long</span>
	</div>
</div>

Pickadate (date + time)doc.

Example 1

$form->addPlugin('pickadate', '#date-1');
$form->addInput('text', 'date-1', '', 'Pick a date', 'required=required');
<div class="form-group">
	<label for="date-1" class="col-sm-4 control-label">
		Pick a date<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="date-1" name="date-1" type="text" value="" required="required" class="form-control">
	</div>
</div>

Example 2

$form->addPlugin('pickadate', '#date-2', 'year_month_selectors');
$form->addInput('text', 'date-2', '', 'Pick a date', 'required=required');
<div class="form-group">
	<label for="date-2" class="col-sm-4 control-label">
		Pick a date<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="date-2" name="date-2" type="text" value="" required="required" class="form-control">
	</div>
</div>

Example 3

$form->addPlugin('pickadate', '#time-1', 'pickatime');
$form->addInput('text', 'time-1', '', 'Pick a time', 'required=required');
<div class="form-group">
	<label for="time-1" class="col-sm-4 control-label">
		Pick a time<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<input id="time-1" name="time-1" type="text" value="" required="required" class="form-control">
	</div>
</div>

Pickadate material (date + time)doc.

Same code as pickadate plugin.

pickadate and pickadate material cannot be mixed on same page.
That's why there's no example here.

Recaptchadoc.

$form->addRecaptcha('6Ldg0QkUAAAAABmXaV1b9qdOnyIwVPRRAs4ldoxe');

<div id="recaptcha" class="g-recaptcha" data-sitekey="6Ldg0QkUAAAAABmXaV1b9qdOnyIwVPRRAs4ldoxe"></div>
<br>

Timepickerdoc.

$form->addPlugin('timepicker', '#pick-a-time');
$form->addInput('text', 'pick-a-time', '6:30am', 'Pick a time');
<div class="form-group">
	<label for="pick-a-time" class="col-sm-4 control-label">
		Pick a time
	</label>
	<div class="col-sm-8">
		<input id="pick-a-time" name="pick-a-time" type="text" value="6:30am"  class="form-control">
	</div>
</div>

Tinymcedoc.

$form->addPlugin('tinymce', '#tinymce-message', 'contact-config');
$form->addTextarea('tinymce-message', '', 'Your message');
<div class="form-group">
	<label for="tinymce-message" class="col-sm-4 control-label">
		Your message
	</label>
	<div class="col-sm-8">
		<textarea id="tinymce-message" name="tinymce-message"  class="form-control"></textarea>
	</div>
</div>

Wordcharactercountdoc.

$form->addTextarea('message-max-100', '', 'Your message', 'required=required');
$form->addPlugin('word-character-count', '#message-max-100', 'default', array('%maxAuthorized%' => 100));
<div class="form-group">
	<label for="message-max-100" class="col-sm-4 control-label">
		Your message<sup class="text-danger">* </sup>
	</label>
	<div class="col-sm-8">
		<textarea id="message-max-100" name="message-max-100" required="required" class="form-control"></textarea>
	</div>
</div>

Default Values

From databasedoc.

<?php
use phpformbuilder\Form;
use phpformbuilder\Validator\Validator;
use phpformbuilder\database\Mysql;

/* =============================================
    start session and include form class
============================================= */

session_start();
include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Form.php';

/* =============================================
    validation if posted
============================================= */

if ($_SERVER["REQUEST_METHOD"] == "POST" && Form::testToken('user-form') === true) {
    include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Validator.php';
    include_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . '/phpformbuilder/Validator/Exception.php';
    $validator = new Validator($_POST);
    $required = array('civility', 'user-name', 'user-first-name', 'user-email', 'validated');
    foreach ($required as $required) {
        $validator->required()->validate($required);
    }
    $validator->email()->validate('user-email');

    // check for errors

    if ($validator->hasErrors()) {
        $_SESSION['errors']['user-form'] = $validator->getAllErrors();
    } else {

        require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . 'phpformbuilder/database/db-connect.php';
        require_once rtrim($_SERVER['DOCUMENT_ROOT'], DIRECTORY_SEPARATOR) . 'phpformbuilder/database/Mysql.php';

        $db = new Mysql();
        $filter['user_id']         = Mysql::sqlValue($_POST['user_id'], Mysql::SQLVALUE_NUMBER);
        $update['civility']        = Mysql::SQLValue($_POST['civility']);
        $update['user-name']       = Mysql::SQLValue($_POST['user-name']);
        $update['user-first-name'] = Mysql::SQLValue($_POST['user-first-name']);
        $update['user-email']      = Mysql::SQLValue($_POST['user-email']);
        $update['validated']       = Mysql::SQLValue($_POST['validated']);
        /*      (disabled in demo - no database enabled)

                if (!$db->UpdateRows('users', $update, $filter)) {
                    $msg = '

' . $db->error() . '
' . $db->getLastSql() . '

' . " \n"; } else { $msg = '

Database updated successfully !

' . " \n"; } */ } } if(isset($_GET['user_id']) && is_numeric($_GET['user_id'])) { $user_id = $_GET['user_id']; } if (!isset($_SESSION['errors']['user-form']) || empty($_SESSION['errors']['user-form'])) { // If no error posted /* Retrieve values from db (disabled in demo - no database enabled) $db = new Mysql(); $columns = $db->getColumnNames("users"); $qry = "SELECT * FROM users WHERE user_id='$user_id'"; $db->query($qry); $row = $db->Row(); foreach ($columns as $columnName) { $_SESSION['user-form'][$columnName] = $row->$columnName; } */ // values for demo $user_id = 1; $_SESSION['user-form']['civility'] = 'Ms.'; $_SESSION['user-form']['user-name'] = 'Wilson'; $_SESSION['user-form']['user-first-name'] = 'Susan'; $_SESSION['user-form']['user-email'] = [email protected]'; $_SESSION['user-form']['validated'] = 1; } $form = new form('user-form'); $form->startFieldset('Update User'); $form->addInput('hidden', 'user_id', $user_id); $form->addRadio('civility', 'M.', 'M.'); $form->addRadio('civility', 'Mrs.', 'Mrs.'); $form->addRadio('civility', 'Ms.', 'Ms.'); $form->printRadioGroup('civility', 'Civility : '); $form->addInput('text', 'user-name', '', 'Name', 'size=60, required=required'); $form->addInput('text', 'user-first-name', '', 'First Name', 'size=60, required=required'); $form->addInput('user-email', 'user-email', '', 'user-email : ', 'size=60, required=required'); $form->addRadio('validated', 'Yes', 1); $form->addRadio('validated', 'No', 0); $form->printRadioGroup('validated', 'Validated'); $form->addBtn('button', 'cancel', 0, 'Cancel', 'class=btn btn-warning, data-dismiss=modal', 'btn-group'); $form->addBtn('submit', 'submit', 1, 'Submit ', 'class=btn btn-success', 'btn-group'); $form->printBtnGroup('btn-group'); $form->endFieldset(); ?>
Update User
<fieldset>
	<legend>
		Update User
	</legend>
	<div class="form-group">
		<label  class="main-label col-sm-4 control-label">
			Civility : 
		</label>
		<div class="col-sm-8">
			<label for="civility_0"  class="radio-inline">
				<input type="radio" id="civility_0" name="civility" value="M." >
				M.
			</label>
			<label for="civility_1"  class="radio-inline">
				<input type="radio" id="civility_1" name="civility" value="Mrs." >
				Mrs.
			</label>
			<label for="civility_2"  class="radio-inline">
				<input type="radio" id="civility_2" name="civility" value="Ms." >
				Ms.
			</label>
		</div>
	</div>
	<div class="form-group">
		<label for="name" class="col-sm-4 control-label">
			Name<sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="name" name="name" type="text" value="" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group">
		<label for="first-name" class="col-sm-4 control-label">
			First Name<sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="first-name" name="first-name" type="text" value="" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group">
		<label for="email" class="col-sm-4 control-label">
			email <sup class="text-danger">* </sup>: 
		</label>
		<div class="col-sm-8">
			<input id="email" name="email" type="email" value="" size="60" required="required" class="form-control">
		</div>
	</div>
	<div class="form-group">
		<label  class="main-label col-sm-4 control-label">
			Validated
		</label>
		<div class="col-sm-8">
			<label for="validated_0"  class="radio-inline">
				<input type="radio" id="validated_0" name="validated" value="1" >
				Yes
			</label>
			<label for="validated_1"  class="radio-inline">
				<input type="radio" id="validated_1" name="validated" value="0" >
				No
			</label>
		</div>
	</div>
	<div class="form-group">
		<div class="col-sm-offset-4 col-sm-8">
			<div class="btn-group">
				<button type="button" name="cancel" value="0" class="btn btn-warning" data-dismiss="modal">
					<span class="glyphicon glyphicon-remove prepend"></span>
					Cancel
				</button>
				<button type="submit" name="submit" value="1" class="btn btn-success">
					Submit <span class="glyphicon glyphicon-ok append"></span>
				</button>
			</div>
		</div>
	</div>
</fieldset>

From variablesdoc.

// Default values from variables
if (!isset($_SESSION['errors']['test-form']) || empty($_SESSION['errors']['test-form'])) {

    // register default values
    $_SESSION['test-form']['civility']        = 'Ms.';
    $_SESSION['test-form']['user-name']       = 'Wilson';
    $_SESSION['test-form']['prefered-colors'] = array('blue', 'green');
}
$form = new Form('test-form', 'horizontal', 'novalidate');
$form->addRadio('civility', 'M.', 'M.');
$form->addRadio('civility', 'Mrs.', 'Mrs.');
$form->addRadio('civility', 'Ms.', 'Ms.');
$form->printRadioGroup('civility', 'Civility : ');
$form->addInput('text', 'user-name', '', 'Name', 'size=60, required');
$form->addOption('prefered-colors', 'red', 'red');
$form->addOption('prefered-colors', 'green', 'green');
$form->addOption('prefered-colors', 'yellow', 'yellow');
$form->addOption('prefered-colors', 'pink', 'pink');
$form->addOption('prefered-colors', 'blue', 'blue');
$form->addOption('prefered-colors', 'purple', 'purple');
$form->addOption('prefered-colors', 'black', 'black');
$form->addSelect('prefered-colors', 'Prefered colors', 'multiple');
$form->render()
<form id="test-form" action="/documentation/how-to.php" method="POST" novalidate class="form-horizontal">
	<div>
		<input name="token" type="hidden" value="1206488489592c6d2f6f8874.18585452"  class="form-control">
		<input name="test-form" type="hidden" value="1"  class="form-control">
	</div>
	<div class="form-group">
		<label  class="main-label col-sm-4 control-label">
			Civility : 
		</label>
		<div class="col-sm-8">
			<label for="civility_0"  class="radio-inline">
				<input type="radio" id="civility_0" name="civility" value="M." >
				M.
			</label>
			<label for="civility_1"  class="radio-inline">
				<input type="radio" id="civility_1" name="civility" value="Mrs." >
				Mrs.
			</label>
			<label for="civility_2"  class="radio-inline">
				<input type="radio" id="civility_2" name="civility" value="Ms." checked="checked" >
				Ms.
			</label>
		</div>
	</div>
	<div class="form-group">
		<label for="user-name" class="col-sm-4 control-label">
			Name<sup class="text-danger">* </sup>
		</label>
		<div class="col-sm-8">
			<input id="user-name" name="user-name" type="text" value="Wilson" size="60" required class="form-control">
		</div>
	</div>
	<div class="form-group">
		<label for="prefered-colors" class="col-sm-4 control-label">
			Prefered colors
		</label>
		<div class="col-sm-8">
			<select id="prefered-colors" name="prefered-colors" multiple class="form-control">
				<option value="red" >
					red
				</option>
				<option value="green"  selected="selected">
					green
				</option>
				<option value="yellow" >
					yellow
				</option>
				<option value="pink" >
					pink
				</option>
				<option value="blue"  selected="selected">
					blue
				</option>
				<option value="purple" >
					purple
				</option>
				<option value="black" >
					black
				</option>
			</select>
		</div>
	</div>
</form>

Special forms

 
<div class="text-center">
    <a data-remodal-target="modal-target" class="btn btn-primary btn-lg">Sign Up</a>
</div>
<?php
$form = new Form('sign-up-modal-form-1', 'vertical', 'novalidate');
$form->setCols(0, 12);
$form->addInput('text', 'user-name', '', 'username', 'required');
$form->addInput('email', 'user-email', '', 'e-mail address', 'required');
$form->addHtml('

 

'); $form->addHtml('<div class="text-center">'); $form->addBtn('button', 'cancel-btn', 1, 'Cancel', 'class=btn btn-default, data-modal-close=modal-target', 'submit_group'); $form->addBtn('submit', 'submit-btn', 1, 'Send ', 'class=btn btn-success', 'submit_group'); $form->printBtnGroup('submit_group'); $form->addHtml('</div>'); $form->modal('#modal-target'); ?>
<div class="text-center"><a data-remodal-target="modal-target" class="btn btn-primary btn-lg">Sign Up</a></div>
<div class="remodal" data-remodal-id="modal-target" id="modal-target">
	<button data-remodal-action="close" class="remodal-close"></button>
	<form id="sign-up-modal-form-1" action="/documentation/how-to.php" method="POST" novalidate>
		<div>
			<input name="token" type="hidden" value="2131864592c6d2f7265f9.72100835"  class="form-control">
			<input name="sign-up-modal-form-1" type="hidden" value="1"  class="form-control">
		</div>
		<div class="form-group">
			<label for="user-name">
				username<sup class="text-danger">* </sup>
			</label>
			<input id="user-name" name="user-name" type="text" value="" required class="form-control">
		</div>
		<div class="form-group">
			<label for="user-email">
				e-mail address<sup class="text-danger">* </sup>
			</label>
			<input id="user-email" name="user-email" type="email" value="" required class="form-control">
		</div>
		<p>
			&nbsp;
		</p>
		<div class="text-center">
			<div class="form-group">
				<div class="btn-group">
					<button type="button" name="cancel-btn" value="1" class="btn btn-default" data-modal-close="modal-target">
						Cancel
					</button>
					<button type="submit" name="submit-btn" value="1" class="btn btn-success">
						Send <span class="glyphicon glyphicon-envelope append"></span>
					</button>
				</div>
			</div>
		</div>
	</form>
</div>

Popover formdoc.

 
<div class="text-center">
    <a href="#" id="popover-link" class="btn btn-primary btn-lg">Sign Up</a>
</div>
<?php
$form_popover = new Form('sign-up-popover-form', 'vertical', 'novalidate');
$form_popover->setCols(0, 12);
$form_popover->addInput('text', 'user-name', '', 'username', 'required');
$form_popover->addInput('email', 'user-email', '', 'e-mail address', 'required');
$form_popover->addBtn('submit', 'submit-btn', 1, 'Submit', 'class=btn btn-success');
$popover_options = array(
    'placement' => 'auto',
    'width' =>  600,
    'height' =>  'auto',
    'closeable' => true,
    'animation' => 'pop',
    'backdrop' => false
);
$form_popover->popover('#popover-link', $popover_options);
?>
<div class="text-center"><a href="#" id="popover-link" class="btn btn-primary btn-lg">Sign Up</a></div>
<div class="hidden">
	<div id="sign-up-popover-form-content">
		<form id="sign-up-popover-form" action="/documentation/how-to.php" method="POST" novalidate>
			<div>
				<input name="token" type="hidden" value="124400809592c6d2f749209.10113719"  class="form-control">
				<input name="sign-up-popover-form" type="hidden" value="1"  class="form-control">
			</div>
			<div class="form-group">
				<label for="user-name">
					username<sup class="text-danger">* </sup>
				</label>
				<input id="user-name" name="user-name" type="text" value="" required class="form-control">
			</div>
			<div class="form-group">
				<label for="user-email">
					e-mail address<sup class="text-danger">* </sup>
				</label>
				<input id="user-email" name="user-email" type="email" value="" required class="form-control">
			</div>
			<div class="form-group">
				<button type="submit" name="submit-btn" value="1" class="btn btn-success">
					Submit
				</button>
			</div>
		</form>
	</div>
</div>

Validation

Email sending

Database CRUD