Auto Layout
SmartUI::SmartForm
HTML Output (Run Time: 0.0001s)
<form class="smart-form">
<header>Individual Print Fields (setup your own form HTML)</header>
<fieldset>
<div class="row">
<section class="col col-6">
<label class="label">Your Name</label>
<label class="input ">
<i class="icon-append fa fa-user" ></i>
<input type="text" name="name" value="" placeholder="Name" list="list-name-226441664704b03748c838090013" />
<datalist name="" id="list-name-226441664704b03748c838090013">
<option value="Jennifer">Jennifer</option>
<option value="Clark">Clark</option>
<option value="Brendan">Brendan</option>
<option value="Warren">Warren</option>
<option value="Rajah">Rajah</option>
<option value="Demetrius">Demetrius</option>
<option value="Keefe">Keefe</option>
<option value="Leila">Leila</option>
<option value="Fritz">Fritz</option>
<option value="Cassady">Cassady</option>
<option value="Rogan">Rogan</option>
<option value="Candice">Candice</option>
<option value="Brittany">Brittany</option>
<option value="Baxter">Baxter</option>
<option value="Vaughan">Vaughan</option>
<option value="Ivan">Ivan</option>
<option value="Marah">Marah</option>
<option value="Kiara">Kiara</option>
<option value="Brielle">Brielle</option>
<option value="Kennedy">Kennedy</option>
<option value="Peter">Peter</option>
<option value="Kibo">Kibo</option>
<option value="Tanek">Tanek</option>
<option value="Guinevere">Guinevere</option>
<option value="Ronan">Ronan</option>
<option value="Kasper">Kasper</option>
<option value="Otto">Otto</option>
<option value="Brenda">Brenda</option>
<option value="Laith">Laith</option>
<option value="Ella">Ella</option>
<option value="Hanae">Hanae</option>
<option value="Donna">Donna</option>
<option value="Bevis">Bevis</option>
<option value="Celeste">Celeste</option>
<option value="Ila">Ila</option>
<option value="Alana">Alana</option>
<option value="Rowan">Rowan</option>
<option value="Eric">Eric</option>
<option value="Dana">Dana</option>
<option value="Karleigh">Karleigh</option>
<option value="Malik">Malik</option>
<option value="May">May</option>
<option value="Alan">Alan</option>
<option value="Anastasia">Anastasia</option>
<option value="Yardley">Yardley</option>
<option value="Oscar">Oscar</option>
<option value="Hasad">Hasad</option>
<option value="Mohammad">Mohammad</option>
<option value="Nissim">Nissim</option>
<option value="Porter">Porter</option>
<option value="Sophia">Sophia</option>
<option value="Acton">Acton</option>
<option value="Briar">Briar</option>
<option value="Benjamin">Benjamin</option>
<option value="Gregory">Gregory</option>
<option value="Marny">Marny</option>
<option value="Indira">Indira</option>
<option value="Fleur">Fleur</option>
<option value="Fulton">Fulton</option>
<option value="Arsenio">Arsenio</option>
<option value="Jaden">Jaden</option>
<option value="Kylie">Kylie</option>
<option value="Melyssa">Melyssa</option>
<option value="Jerry">Jerry</option>
<option value="Rhiannon">Rhiannon</option>
<option value="Price">Price</option>
<option value="Ginger">Ginger</option>
<option value="Britanney">Britanney</option>
<option value="Wylie">Wylie</option>
<option value="Holly">Holly</option>
<option value="Althea">Althea</option>
<option value="Quintessa">Quintessa</option>
<option value="Fitzgerald">Fitzgerald</option>
<option value="Keefe">Keefe</option>
<option value="Rudyard">Rudyard</option>
<option value="Kareem">Kareem</option>
<option value="Genevieve">Genevieve</option>
<option value="Wang">Wang</option>
<option value="Odessa">Odessa</option>
<option value="Adrienne">Adrienne</option>
<option value="Charity">Charity</option>
<option value="Kieran">Kieran</option>
<option value="Alika">Alika</option>
<option value="Shay">Shay</option>
<option value="Cailin">Cailin</option>
<option value="Xena">Xena</option>
<option value="Walker">Walker</option>
<option value="Adena">Adena</option>
<option value="Bradley">Bradley</option>
<option value="Yvette">Yvette</option>
<option value="Neil">Neil</option>
<option value="Hunter">Hunter</option>
<option value="Marcia">Marcia</option>
<option value="Lavinia">Lavinia</option>
<option value="Cynthia">Cynthia</option>
<option value="Lee">Lee</option>
<option value="Linda">Linda</option>
<option value="Wayne">Wayne</option>
<option value="Liberty">Liberty</option>
<option value="Cathleen">Cathleen</option>
</datalist>
<i></i><b class="tooltip tooltip-top-right">Input name</b>
</label>
<div class="note"><strong>Note:</strong> Type in something to autocomplete</div>
</section>
<section class="col col-6">
<label class="label">Email Address</label>
<label class="input ">
<i class="icon-append fa fa-envelope" ></i>
<input type="email" name="email" value="" placeholder="myemail@domain.com" />
<b class="tooltip tooltip-top-right">This is a tooltip</b>
</label>
</section>
</div>
<section>
<label class="input ">
<input type="text" name="addr" value="" placeholder="Your Address (minimal setup)" />
</label>
</section>
<div class="row">
<section class="col col-6">
<label class="input input-file">
<span class="button">
<input type="file" name="file" onchange="this.parentNode.nextSibling.value = this.value" value="" />
Browse
</span>
<input type="text" name="file-display" readonly value="" />
</label>
</section>
<section class="col col-6">
<label class="select ">
<select name="select">
<option value="1">Jennifer</option>
<option value="2">Clark</option>
<option value="3">Brendan</option>
<option value="4">Warren</option>
<option value="5">Rajah</option>
<option value="6">Demetrius</option>
<option value="7">Keefe</option>
<option value="8">Leila</option>
<option value="9">Fritz</option>
<option value="10">Cassady</option>
<option value="11">Rogan</option>
<option value="12">Candice</option>
<option value="13">Brittany</option>
<option value="14">Baxter</option>
<option value="15">Vaughan</option>
<option value="16">Ivan</option>
<option value="17">Marah</option>
<option value="18">Kiara</option>
<option value="19">Brielle</option>
<option value="20">Kennedy</option>
<option value="21">Peter</option>
<option value="22">Kibo</option>
<option value="23">Tanek</option>
<option value="24">Guinevere</option>
<option value="25">Ronan</option>
<option value="26">Kasper</option>
<option value="27">Otto</option>
<option value="28">Brenda</option>
<option value="29">Laith</option>
<option value="30">Ella</option>
<option value="31">Hanae</option>
<option value="32">Donna</option>
<option value="33">Bevis</option>
<option value="34">Celeste</option>
<option value="35">Ila</option>
<option value="36">Alana</option>
<option value="37">Rowan</option>
<option value="38">Eric</option>
<option value="39">Dana</option>
<option value="40">Karleigh</option>
<option value="41">Malik</option>
<option value="42">May</option>
<option value="43">Alan</option>
<option value="44">Anastasia</option>
<option value="45">Yardley</option>
<option value="46">Oscar</option>
<option value="47">Hasad</option>
<option value="48">Mohammad</option>
<option value="49">Nissim</option>
<option value="50">Porter</option>
<option value="51">Sophia</option>
<option value="52">Acton</option>
<option value="53">Briar</option>
<option value="54">Benjamin</option>
<option value="55">Gregory</option>
<option value="56">Marny</option>
<option value="57">Indira</option>
<option value="58">Fleur</option>
<option value="59">Fulton</option>
<option value="60">Arsenio</option>
<option value="61">Jaden</option>
<option value="62">Kylie</option>
<option value="63">Melyssa</option>
<option value="64">Jerry</option>
<option value="65">Rhiannon</option>
<option value="66">Price</option>
<option value="67">Ginger</option>
<option value="68">Britanney</option>
<option value="69">Wylie</option>
<option value="70">Holly</option>
<option value="71">Althea</option>
<option value="72">Quintessa</option>
<option value="73">Fitzgerald</option>
<option value="74">Keefe</option>
<option value="75">Rudyard</option>
<option value="76">Kareem</option>
<option value="77">Genevieve</option>
<option value="78">Wang</option>
<option value="79">Odessa</option>
<option value="80">Adrienne</option>
<option value="81">Charity</option>
<option value="82">Kieran</option>
<option value="83">Alika</option>
<option value="84">Shay</option>
<option value="85">Cailin</option>
<option value="86">Xena</option>
<option value="87">Walker</option>
<option value="88">Adena</option>
<option value="89">Bradley</option>
<option value="90">Yvette</option>
<option value="91">Neil</option>
<option value="92">Hunter</option>
<option value="93">Marcia</option>
<option value="94">Lavinia</option>
<option value="95">Cynthia</option>
<option value="96">Lee</option>
<option value="97">Linda</option>
<option value="98">Wayne</option>
<option value="99">Liberty</option>
<option value="100">Cathleen</option>
</select>
<i></i>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="label">Multi Select</label>
<label class="select select-multiple">
<select name="select" multiple="multiple" class="custom-scroll">
<option value="1">Jennifer</option>
<option value="2">Clark</option>
<option value="3">Brendan</option>
<option value="4">Warren</option>
<option value="5">Rajah</option>
<option value="6">Demetrius</option>
<option value="7">Keefe</option>
<option value="8">Leila</option>
<option value="9">Fritz</option>
<option value="10">Cassady</option>
<option value="11">Rogan</option>
<option value="12">Candice</option>
<option value="13">Brittany</option>
<option value="14">Baxter</option>
<option value="15">Vaughan</option>
<option value="16">Ivan</option>
<option value="17">Marah</option>
<option value="18">Kiara</option>
<option value="19">Brielle</option>
<option value="20">Kennedy</option>
<option value="21">Peter</option>
<option value="22">Kibo</option>
<option value="23">Tanek</option>
<option value="24">Guinevere</option>
<option value="25">Ronan</option>
<option value="26">Kasper</option>
<option value="27">Otto</option>
<option value="28">Brenda</option>
<option value="29">Laith</option>
<option value="30">Ella</option>
<option value="31">Hanae</option>
<option value="32">Donna</option>
<option value="33">Bevis</option>
<option value="34">Celeste</option>
<option value="35">Ila</option>
<option value="36">Alana</option>
<option value="37">Rowan</option>
<option value="38">Eric</option>
<option value="39">Dana</option>
<option value="40">Karleigh</option>
<option value="41">Malik</option>
<option value="42">May</option>
<option value="43">Alan</option>
<option value="44">Anastasia</option>
<option value="45">Yardley</option>
<option value="46">Oscar</option>
<option value="47">Hasad</option>
<option value="48">Mohammad</option>
<option value="49">Nissim</option>
<option value="50">Porter</option>
<option value="51">Sophia</option>
<option value="52">Acton</option>
<option value="53">Briar</option>
<option value="54">Benjamin</option>
<option value="55">Gregory</option>
<option value="56">Marny</option>
<option value="57">Indira</option>
<option value="58">Fleur</option>
<option value="59">Fulton</option>
<option value="60">Arsenio</option>
<option value="61">Jaden</option>
<option value="62">Kylie</option>
<option value="63">Melyssa</option>
<option value="64">Jerry</option>
<option value="65">Rhiannon</option>
<option value="66">Price</option>
<option value="67">Ginger</option>
<option value="68">Britanney</option>
<option value="69">Wylie</option>
<option value="70">Holly</option>
<option value="71">Althea</option>
<option value="72">Quintessa</option>
<option value="73">Fitzgerald</option>
<option value="74">Keefe</option>
<option value="75">Rudyard</option>
<option value="76">Kareem</option>
<option value="77">Genevieve</option>
<option value="78">Wang</option>
<option value="79">Odessa</option>
<option value="80">Adrienne</option>
<option value="81">Charity</option>
<option value="82">Kieran</option>
<option value="83">Alika</option>
<option value="84">Shay</option>
<option value="85">Cailin</option>
<option value="86">Xena</option>
<option value="87">Walker</option>
<option value="88">Adena</option>
<option value="89">Bradley</option>
<option value="90">Yvette</option>
<option value="91">Neil</option>
<option value="92">Hunter</option>
<option value="93">Marcia</option>
<option value="94">Lavinia</option>
<option value="95">Cynthia</option>
<option value="96">Lee</option>
<option value="97">Linda</option>
<option value="98">Wayne</option>
<option value="99">Liberty</option>
<option value="100">Cathleen</option>
</select>
</label>
</section>
</div>
</fieldset>
<fieldset>
<section>
<label class="label">Textarea</label>
<label class="textarea textarea-resizable ">
<textarea class="custom-scroll" rows="4" name="textarea"></textarea>
</label>
</section>
</fieldset>
<fieldset>
<section>
<label class="label">Collumned Checkboxes</label>
<div class="row">
<div class="col col-4">
<label class="checkbox ">
<input type="checkbox" name="checkbox[]" value="" />
<i></i>This is a checkbox
</label>
<label class="checkbox ">
<input type="checkbox" name="checkbox[]" value="" />
<i></i>checkbox two
</label>
</div>
<div class="col col-4">
<label class="checkbox ">
<input type="checkbox" name="new-name" checked value="" />
<i></i>A third checkbox
</label>
<label class="checkbox ">
<input type="checkbox" name="checkbox[]" value="" />
<i></i>4th Checkbox
</label>
</div>
<div class="col col-4">
<label class="checkbox ">
<input type="checkbox" name="checkbox[]" value="" />
<i></i>5th checkBox
</label>
</div>
</div>
</section>
<section>
<label class="label">Inline!</label>
<div class="inline-group">
<label class="checkbox ">
<input type="checkbox" name="checkbox_inline[]" value="" />
<i></i>one
</label>
<label class="checkbox ">
<input type="checkbox" name="checkbox_inline[]" value="" />
<i></i>two
</label>
<label class="checkbox ">
<input type="checkbox" name="new-name-inline" checked value="" />
<i></i>three
</label>
<label class="checkbox ">
<input type="checkbox" name="checkbox_inline[]" value="" />
<i></i>four
</label>
<label class="checkbox ">
<input type="checkbox" name="checkbox_inline[]" value="" />
<i></i>six
</label>
</div>
</section>
<section>
<label class="checkbox ">
<input type="checkbox" name="solo" value="" />
<i></i>One Checkbox only (minimal setup)
</label>
</section>
</fieldset>
<fieldset>
<section>
<label class="label">Collumned Radios</label>
<div class="row">
<div class="col col-4">
<label class="radio ">
<input type="radio" name="radio" value="" />
<i></i>This is a Radio
</label>
<label class="radio ">
<input type="radio" name="radio" value="" />
<i></i>Radio two
</label>
</div>
<div class="col col-4">
<label class="radio state-disabled">
<input type="radio" name="new-name" checked value="" />
<i></i>A third Radio
</label>
<label class="radio ">
<input type="radio" name="radio" value="" />
<i></i>4th Radio
</label>
</div>
<div class="col col-4">
<label class="radio ">
<input type="radio" name="radio" value="" />
<i></i>5th Radio
</label>
</div>
</div>
</section>
<section>
<label class="label">Inline!</label>
<div class="inline-group">
<label class="radio ">
<input type="radio" name="radio_inline" value="" />
<i></i>one
</label>
<label class="radio ">
<input type="radio" name="radio_inline" value="" />
<i></i>two
</label>
<label class="radio ">
<input type="radio" name="new-name-inline" checked value="" />
<i></i>three
</label>
<label class="radio ">
<input type="radio" name="radio_inline" value="" />
<i></i>four
</label>
<label class="radio ">
<input type="radio" name="radio_inline" value="" />
<i></i>six
</label>
</div>
</section>
<section>
<label class="radio ">
<input type="radio" name="solo" value="" />
<i></i>One Radio only (minimal setup)
</label>
</section>
</fieldset>
<fieldset>
<div class="row">
<section class="col col-6">
<label class="label">Checkbox Toggle</label>
<label class="toggle ">
<input type="checkbox" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 1
</label>
<label class="toggle ">
<input type="checkbox" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 2
</label>
<label class="toggle ">
<input type="checkbox" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 3
</label>
</section>
<section class="col col-6">
<label class="label">Radio Toggle</label>
<label class="toggle ">
<input type="radio" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 1
</label>
<label class="toggle ">
<input type="radio" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 2
</label>
<label class="toggle ">
<input type="radio" name="toggle_checkbox" value="" />
<i data-swchon-text="ON" data-swchoff-text="OFF"></i>Switch 3
</label>
</section>
</div>
</fieldset>
<fieldset>
<section>
<label class="rating">
<input type="radio" name="rating-star" id="rating-star-10" value="" />
<label for="rating-star-10"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-9" value="" />
<label for="rating-star-9"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-8" value="" />
<label for="rating-star-8"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-7" value="" />
<label for="rating-star-7"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-6" value="" />
<label for="rating-star-6"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-5" value="" />
<label for="rating-star-5"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-4" value="" />
<label for="rating-star-4"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-3" value="" />
<label for="rating-star-3"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-2" value="" />
<label for="rating-star-2"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-star" id="rating-star-1" value="" />
<label for="rating-star-1"><i class="fa fa-star"></i></label>
</label>
</section>
<section>
<label class="label">Rating</label>
<label class="rating">
<input type="radio" name="rating-star2" id="rating-star2-8" value="" />
<label for="rating-star2-8"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-7" value="" />
<label for="rating-star2-7"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-6" value="" />
<label for="rating-star2-6"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-5" value="" />
<label for="rating-star2-5"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-4" value="" />
<label for="rating-star2-4"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-3" value="" />
<label for="rating-star2-3"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-2" value="" />
<label for="rating-star2-2"><i class="fa fa-asterisk"></i></label>
<input type="radio" name="rating-star2" id="rating-star2-1" value="" />
<label for="rating-star2-1"><i class="fa fa-asterisk"></i></label>
</label>
<div class="note"><strong>Note:</strong> This is a customized rating field</div>
</section>
</fieldset>
<fieldset>
<section>
<label class="label">Multiple Ratings? No problem!</label>
<div class="rating">
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-6" value="" />
<label for="rating-multiple-227919664704b037a53504739725-6"><i class="fa fa-trophy"></i></label>
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-5" value="" />
<label for="rating-multiple-227919664704b037a53504739725-5"><i class="fa fa-trophy"></i></label>
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-4" value="" />
<label for="rating-multiple-227919664704b037a53504739725-4"><i class="fa fa-trophy"></i></label>
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-3" value="" />
<label for="rating-multiple-227919664704b037a53504739725-3"><i class="fa fa-trophy"></i></label>
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-2" value="" />
<label for="rating-multiple-227919664704b037a53504739725-2"><i class="fa fa-trophy"></i></label>
<input type="radio" name="rating-multiple-227919664704b037a53504739725" id="rating-multiple-227919664704b037a53504739725-1" value="" />
<label for="rating-multiple-227919664704b037a53504739725-1"><i class="fa fa-trophy"></i></label>
The Rating
</div>
<div class="rating">
<input type="radio" name="rating-multiple-227996664704b037a9f201012897" id="rating-multiple-227996664704b037a9f201012897-3" value="" />
<label for="rating-multiple-227996664704b037a9f201012897-3"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-227996664704b037a9f201012897" id="rating-multiple-227996664704b037a9f201012897-2" value="" />
<label for="rating-multiple-227996664704b037a9f201012897-2"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-227996664704b037a9f201012897" id="rating-multiple-227996664704b037a9f201012897-1" value="" />
<label for="rating-multiple-227996664704b037a9f201012897-1"><i class="fa fa-star"></i></label>
</div>
<div class="rating">
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-7" value="" />
<label for="rating-multiple-228041664704b037acb333397819-7"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-6" value="" />
<label for="rating-multiple-228041664704b037acb333397819-6"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-5" value="" />
<label for="rating-multiple-228041664704b037acb333397819-5"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-4" value="" />
<label for="rating-multiple-228041664704b037acb333397819-4"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-3" value="" />
<label for="rating-multiple-228041664704b037acb333397819-3"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-2" value="" />
<label for="rating-multiple-228041664704b037acb333397819-2"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-228041664704b037acb333397819" id="rating-multiple-228041664704b037acb333397819-1" value="" />
<label for="rating-multiple-228041664704b037acb333397819-1"><i class="fa fa-star"></i></label>
</div>
<div class="rating">
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-10" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-10"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-9" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-9"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-8" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-8"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-7" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-7"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-6" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-6"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-5" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-5"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-4" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-4"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-3" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-3"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-2" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-2"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22812664704b037b1b642684263" id="rating-multiple-22812664704b037b1b642684263-1" value="" />
<label for="rating-multiple-22812664704b037b1b642684263-1"><i class="fa fa-star"></i></label>
</div>
<div class="rating">
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-20" value="" />
<label for="rating-multiple-22823664704b037b88058773651-20"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-19" value="" />
<label for="rating-multiple-22823664704b037b88058773651-19"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-18" value="" />
<label for="rating-multiple-22823664704b037b88058773651-18"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-17" value="" />
<label for="rating-multiple-22823664704b037b88058773651-17"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-16" value="" />
<label for="rating-multiple-22823664704b037b88058773651-16"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-15" value="" />
<label for="rating-multiple-22823664704b037b88058773651-15"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-14" value="" />
<label for="rating-multiple-22823664704b037b88058773651-14"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-13" value="" />
<label for="rating-multiple-22823664704b037b88058773651-13"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-12" value="" />
<label for="rating-multiple-22823664704b037b88058773651-12"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-11" value="" />
<label for="rating-multiple-22823664704b037b88058773651-11"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-10" value="" />
<label for="rating-multiple-22823664704b037b88058773651-10"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-9" value="" />
<label for="rating-multiple-22823664704b037b88058773651-9"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-8" value="" />
<label for="rating-multiple-22823664704b037b88058773651-8"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-7" value="" />
<label for="rating-multiple-22823664704b037b88058773651-7"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-6" value="" />
<label for="rating-multiple-22823664704b037b88058773651-6"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-5" value="" />
<label for="rating-multiple-22823664704b037b88058773651-5"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-4" value="" />
<label for="rating-multiple-22823664704b037b88058773651-4"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-3" value="" />
<label for="rating-multiple-22823664704b037b88058773651-3"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-2" value="" />
<label for="rating-multiple-22823664704b037b88058773651-2"><i class="fa fa-star"></i></label>
<input type="radio" name="rating-multiple-22823664704b037b88058773651" id="rating-multiple-22823664704b037b88058773651-1" value="" />
<label for="rating-multiple-22823664704b037b88058773651-1"><i class="fa fa-star"></i></label>
</div>
</section>
</fieldset>
<footer>
<button class="btn btn-primary btn-md " type="submit">Submit</button>
</footer>
</form>SmartUI::SmartForm Class
This is a basic usage of SmartUI's SmartForm class. This class will help you build FORMS easyly without writing too many HML codes. If you want to know more about the real HTML layout, click here
SmartUI::SmartForm($fields [, $options = array()]);
$fields
The $fields is an array parameter will tell the SmartForm what fields to be added.
$fields = array(
'fname' => array(
'type' => 'input', // or FormField::FORM_FIELD_INPUT
'col' => 6,
'properties' => array(
'placeholder' => 'First name',
'icon' => 'fa-user',
'icon_append' => false
)
),
'lname' => array(
'type' => 'input',
'col' => 6,
'properties' => array(
'placeholder' => 'Last name',
'icon' => 'fa-user',
'icon_append' => false
)
),
// so on ...
);
The key of eacy item is the Field's name attribute. It is also used when referring to a field you want to customize. Each item may contain an array or closure (must return the same array format). See below:
$field = array(
'fname' => (
'type' => SmartForm::FORM_FIELD_INPUT, // the type of field.
'col' => 0, // grid column
'properties' => array() // properties of the field type
)
)
Field Types
Below are the fields types used by SmartUI::SmartForm and it's properties
SmartForm::FORM_FIELD_INPUT
$default_prop = array(
'type' => 'text',
'attr' => array(),
'id' => '',
'icon' => '',
'icon_append' => true,
'placeholder' => '',
'value' => '',
'tooltip' => array(),
'disabled' => false,
'autocomplete' => false,
'size' => '',
'class' => array()
);
SmartForm::FORM_FIELD_LABEL
$default_prop = array(
'label' => ''
);
SmartForm::FORM_FIELD_RATINGS
$default_prop = array(
'items' => array(),
'icon' => 'fa-star'
);
SmartForm::FORM_FIELD_RATING
$default_prop = array(
'max' => 5,
'icon' => 'fa-star'
);
SmartForm::FORM_FIELD_TEXTAREA
$default_prop = array(
'rows' => 3,
'attr' => array(),
'class' => array(),
'value' => '',
'id' => '',
'type' => '',
'placeholder' => ''
);
SmartForm::FORM_FIELD_MULTISELECT
$default_prop = array(
'data' => array(),
'display' => '',
'value' => '',
'container' => 'select',
'id' => '',
'attr' => array(),
'class' => array(),
'icon' => '<i></i>',
'disabled' => false
);
SmartForm::FORM_FIELD_SELECT
$default_prop = array(
'data' => array(),
'display' => '',
'value' => '',
'container' => 'select',
'id' => '',
'attr' => array(),
'class' => array(),
'icon' => '<i></i>',
'disabled' => false
);
SmartForm::FORM_FIELD_FILEINPUT
This is handled by the class automatically
SmartForm::FORM_FIELD_INPUT
$default_prop = array(
'type' => 'text',
'attr' => array(),
'id' => '',
'icon' => '',
'icon_append' => true,
'placeholder' => '',
'value' => '',
'tooltip' => array(),
'disabled' => false,
'autocomplete' => false,
'size' => '',
'class' => array()
);
SmartForm::FORM_FIELD_RADIO
$default_prop = array(
'items' => array(
array(
'name' => $name,
'checked' => false,
'value' => '',
'label' => '',
'id' => '',
'disabled' => false
),
'Can Be a String Also', // a string value will directly be the item's label
// next item and so on ...
),
'cols' => 0,
'inline' => false,
'toggle' => false
);
SmartForm::FORM_FIELD_CHECKBOX
Same properties as SmartForm::FORM_FIELD_RADIO
Setup
$fields = array(
'fname' => array(
'type' => 'input', // or FormField::FORM_FIELD_INPUT
'col' => 6,
'properties' => array(
'placeholder' => 'First name',
'icon' => 'fa-user',
'icon_append' => false
)
),
'lname' => array(
'type' => 'input',
'col' => 6,
'properties' => array(
'placeholder' => 'Last name',
'icon' => 'fa-user',
'icon_append' => false
)
),
// so on ...
);
$form = $ui->create_smartform($fields);
Usage
$form->fieldset(0, array('fname'));
$form->fieldset(1, array('lname'));
Print it!
$form->print_html();
Property Reference
Below are the list of available properties for the class:
SmartForm::options
An array of available options
$options = array(
'in_widget' => true // default
);
// sample call
$form->options('in_widget', false); // remove the output form from the widget
SmartForm::field
An array - list of fields (provided upon creation of SmartUI::SmartForm)
$form->field('fname', array(
'type' => 'input', // or FormField::FORM_FIELD_INPUT
'col' => 6,
'properties' => array(
'placeholder' => 'First name',
'icon' => 'fa-user',
'icon_append' => false
)
));
SmartForm::fieldset
An array - list of fields with their corresponding <fieldset> location (o indexed).
$form->fieldset(0, array('fname')); // we set ```fname``` field to the first ```fieldset```
$form->fieldset(1, array('lname', 'address')); // and ```address``` field to the second ```fieldset```
SmartForm::type
An array - list of fields with their corresponding field type
$form->type('fname', SmartForm::FORM_FIELD_INPUT);
$form->type('checboxes', 'radio'); // change the ```type``` of field ```checkboxes``` to type ```SmartForm::FORM_FIELD_RADIO```
SmartForm::property
An array - list of fields with their corresponding properties property
$form->property('fname', array('col' => 3)); // change the ```properties[col]``` value of field ```fname```
SmartForm::header
A string - The form's header HTML content
$form->header('My Form Below!!!');
SmartForm::footer
A string - The form's footer HTML content
$form->footer(function($this) use ($ui) {
return $ui->create_button('Submit', 'primary')->attr(array('type' => 'submit'))->print_html(true);
});
// or ...
$btn = $ui->create_button('Submit', 'primary')->attr(array('type' => 'submit'))->print_html(true);
$form->footer($btn->print_html(true));
SmartForm::widget
A SmartUI::Widget instance - the instance class of SmartUI::Widget. Note that you need to set SmartUI::SmartForm::options['in_widget'] to true
$widget = $form->widget;
// configure your widget
$widget->header('title', 'My Form Widget Title');
SmartForm::title
A string - Title of the SmartForm::widget instance.
$form->title('My New Title');
// same thing when getting $form->widget and setting it's $form->widget->header('title', 'My New Title');
SmartForm::col
An array - List of fields with their corresponding col property
$form->col('lname', 6); // set the col property of field lname to 6