Codeigniter Bootstrap Form Builder Save

Codeigniter + Bootstrap 2/3 Form Builder

Project README

Codeigniter Bootstrap 3 Form Builder

Do you want to write forms 60% faster?

Or type 60% less?

Are you using Codegniter and Bootstrap 3?

Then this is the plugin for you!

CodeIgniter library to build form's styled with Bootstrap 3. It's got 5 steps:

Load Libraries
Open Form
Echo out the output of your chosen function
Close your form
Enjoy Easy form building

Load Libraries ==============

Load the Codeigniter form helper, then load the form_builder library.

$this->load->helper('form');
$this->load->library('form_builder');

Open Your form ==============

<?= $this->form_builder->open_form(array('action' => '')); ?>

Echo out your form ==============

<?
/* Prepare variables */
$defaults_object_or_array_from_db = NULL;

$item = new stdClass;
$item->id = 33;
$item->description = '';

$years = range(intval(date('Y')), intval(date('Y')) + 20);
$months = array_map(function ($n) {
	return str_pad($n, 2, '0', STR_PAD_LEFT);
}, range(1, 12));

$exp_month_options = array_combine($months, $months);
$cc_exp_month = '05';

$exp_year_options = array_combine($years, $years);
$cc_exp_year = intval(date('Y')) + 5;

$input_span = 'pull-left ';

/* Build form */
echo $this->form_builder->build_form_horizontal(
		array(
				array(/* HIDDEN */
						'id' => 'id',
						'type' => 'hidden',
						'value' => $item->id
				),
				array(/* INPUT */
						'id' => 'color',
						'placeholder' => 'Item Color',
						'input_addons' => array(
								'pre' => 'color: #',
								'post' => ';'
						),
						'help' => 'this is a help block'
				),
				array(/* DROP DOWN */
						'id' => 'published',
						'type' => 'dropdown',
						'options' => array(
								'1' => 'Published',
								'2' => 'Disabled'
						)
				),
				array(/* TEXTAREA */
						'id' => 'description',
						'type' => 'textarea',
						'class' => 'wysihtml5',
						'placeholder' => 'Item Description (HTML or rich text)',
						'value' => html_entity_decode($item->description)
				),
				array(/* COMBINE */
						'id' => 'expiration_date',
						'type' => 'combine', /* use `combine` to put several input inside the same block */
						'elements' => array(
								array(
										'id' => 'cc_exp_month',
										'label' => 'Expiration Date',
										'autocomplete' => 'cc-exp-month',
										'type' => 'dropdown',
										'options' => $exp_month_options,
										'class' => $input_span . 'required input-small',
										'required' => '',
										'data-items' => '4',
										'pattern' => '\d{1,2}',
										'style' => 'width: auto;',
										'value' => (isset($cc_exp_month) ? $cc_exp_month : '')
								),
								array(
										'id' => 'cc_exp_year',
										'label' => 'Expiration Date',
										'autocomplete' => 'cc-exp-year',
										'type' => 'dropdown',
										'options' => $exp_year_options,
										'class' => $input_span . 'required input-small',
										'required' => '',
										'data-items' => '4',
										'pattern' => '\d{4}',
										'style' => 'width: auto; margin-left: 5px;',
										'value' => (isset($cc_exp_year) ? $cc_exp_year : '')
								)
						)
				),
				array(/* DATE */
						'id' => 'date',
						'type' => 'date'
				),
				array(/* CHECKBOX */
						'id' => 'checkbox_group',
						'label' => 'Checkboxes',
						'type' => 'checkbox',
						'options' => array(
								array(
										'id' => 'checkbox1',
										'value' => 1
										// If no label is set, the value will be used
								),
								array(
										'id' => 'checkbox2',
										'value' => 2,
										'label' => 'Two'
								)
						)
				),
				array(/* RADIO */
						'id' => 'radio_group',
						'label' => 'Radio buttons',
						'type' => 'radio',
						'options' => array(
								array(
										'id' => 'radio_button_yes',
										'value' => 1,
										'label' => 'Yes'
								),
								array(
										'id' => 'radio_button_no',
										'value' => 0,
										'label' => 'No'
								)
						)
				),
				array(/* SUBMIT */
						'id' => 'submit',
						'type' => 'submit'
				)
		), $defaults_object_or_array_from_db);

echo $this->form_builder->close_form();
?>

Close The Form ==============

<?= $this->form_builder->close_form(); ?>

Produces:

<form action="" class="form-horizontal col-sm-12" autocomplete="on" enctype="multipart/form-data" method="post" accept-charset="utf-8">
	<input type="hidden" name="id" value="33" />
	<div class="form-group">
		<label for="color" class="col-sm-2 control-label">Color</label>
		<div class="col-sm-9">
			<div class="input-group">
				<span class="input-group-addon">color: #</span>
				<input type="text" name="color" value="" id="color" placeholder="Item Color" class="form-control"  />
				<span class="input-group-addon">;</span>
			</div>
			<span class="help-block">this is a help block</span>
		</div>
	</div>
	<div class="form-group">
		<label for="published" class="col-sm-2 control-label">Published</label>
		<div class="col-sm-9">
			<select name="published" id="published" class="valid form-control">
				<option value="1">Published</option>
				<option value="2">Disabled</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label for="description" class="col-sm-2 control-label">Description</label>
		<div class="col-sm-9">
			<textarea name="description" cols="40" rows="10" id="description" class="form-control wysihtml5" placeholder="Item Description (HTML or rich text)" ></textarea>
		</div>
	</div>
	<div class="form-group">
		<label for="expiration_date" class="col-sm-2 control-label">Expiration Date</label>
		<div class="col-sm-9">
			<select name="cc_exp_month" id="cc_exp_month" label="Expiration Date" autocomplete="cc-exp-month" class="pull-left required input-small valid form-control" required="" data-items="4" pattern="\d{1,2}" style="width: auto;">
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05" selected="selected">05</option>
				<option value="06">06</option>
				<option value="07">07</option>
				<option value="08">08</option>
				<option value="09">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>
			<select name="cc_exp_year" id="cc_exp_year" label="Expiration Date" autocomplete="cc-exp-year" class="pull-left required input-small valid form-control" required="" data-items="4" pattern="\d{4}" style="width: auto; margin-left: 5px;">
				<option value="2016">2016</option>
				<option value="2017">2017</option>
				<option value="2018">2018</option>
				<option value="2019">2019</option>
				<option value="2020">2020</option>
				<option value="2021" selected="selected">2021</option>
				<option value="2022">2022</option>
				<option value="2023">2023</option>
				<option value="2024">2024</option>
				<option value="2025">2025</option>
				<option value="2026">2026</option>
				<option value="2027">2027</option>
				<option value="2028">2028</option>
				<option value="2029">2029</option>
				<option value="2030">2030</option>
				<option value="2031">2031</option>
				<option value="2032">2032</option>
				<option value="2033">2033</option>
				<option value="2034">2034</option>
				<option value="2035">2035</option>
				<option value="2036">2036</option>
			</select>
		</div>
	</div>
	<div class="form-group">
		<label for="date" class="col-sm-2 control-label">Date</label>
		<div class="col-sm-9">
			<input type="date" name="date" value="" id="date" class="form-control"  />
		</div>
	</div>
	<div class="form-group">
		<label for="checkbox_group" class="col-sm-2 control-label">Checkboxes</label>
		<div class="col-sm-9">
			<label class="checkbox-inline">
				<input type="checkbox" name="checkbox_group" value="1" id="checkbox_group" label="1"  />
				1
			</label>
			<label class="checkbox-inline">
				<input type="checkbox" name="checkbox_group" value="2" id="checkbox_group" label="Two"  />
				Two
			</label>
		</div>
	</div>
	<div class="form-group">
		<label for="radio_group" class="col-sm-2 control-label">Radio buttons</label>
		<div class="col-sm-9">
			<label class="radio-inline">
				<input type="radio" name="radio_group" value="1" id="radio_group" label="Yes"  />
				Yes
			</label>
			<label class="radio-inline">
				<input type="radio" name="radio_group" value="0" id="radio_group" label="No"  />
				No
			</label>
		</div>
	</div>
	<div class="form-group">
		<label for="submit" class="col-sm-2 control-label">
		</label>
		<div class="col-sm-9">
			<input type="submit" name="submit" value="Submit"  class="btn btn-primary" name="submit" value="" />
		</div>
	</div>
</form>

ScreenShot

Open Source Agenda is not affiliated with "Codeigniter Bootstrap Form Builder" Project. README Source: wallter/codeigniter_bootstrap_form_builder

Stars

Open Issues

Last Commit

7 years ago

Repository

wallter/codeigniter_bootstrap_form_builder

License

MIT

Open Source Agenda Badge

<a href="https://www.opensourceagenda.com/projects/codeigniter-bootstrap-form-builder"><img src="https://www.opensourceagenda.com/projects/codeigniter-bootstrap-form-builder/reviews/badge.svg" alt="Open Source Agenda"></a>

Submit Review Review Your Favorite Project

Submit Resource Articles, Courses, Videos

Submit Article Submit a post to our blog

From the blog

Dec 11, 2022

How to Choose Which Programming Language to Learn First?

From the blog

Dec 11, 2022