PHP Forms Bootstrap layout

Simple form

Required field
Form::fromArray('example5', $data, function($f){
	$f->textField('a', 'Text 1');
	$f->textField('b', 'Text 2');
	$f->textField('c', 'Text 3', ['required' => true, 'hint' => 'Required field']);
}, ['layout' => $layout]);
<form id="example5" class="form bootstrap" method="POST" action="">
<div class="form-group">	<label for="example5_a" class="control-label">Text 1</label>	<input class="form-control" value="Value 1" id="example5_a" name="a" type="text" /></div><div class="form-group">	<label for="example5_b" class="control-label">Text 2</label>	<input class="form-control" value="Value 2" id="example5_b" name="b" type="text" /></div><div class="form-group required">	<label for="example5_c" class="control-label">Text 3</label>	<input class="form-control" required value="Value 3" id="example5_c" name="c" type="text" />	<span class="help-block">Required field</span></div></form>

Hints

Row-level hints offers a hint that spans an entire row (similar to a paragraph).

Field-level hints has a similar look as a static field.

Field hints describe a specific field
Form::fromArray('example5', $data, function($f){
	$f->hint('Row-level hints offers a hint that spans an entire row (similar to a paragraph).', false);
	$f->hint('Field-level hints has a similar look as a static field.', 'Field');
	$f->textField('a', 'Text 1', ['hint' => 'Field hints describe a specific field']);
}, ['layout' => $layout]);
<form id="example5" class="form bootstrap" method="POST" action="">
<p>Row-level hints offers a hint that spans an entire row (similar to a paragraph).</p><div class="form-group">	<label for="" class="control-label">Field</label>	<p class="form-control-static">Field-level hints has a similar look as a static field.</p></div><div class="form-group">	<label for="example5_a" class="control-label">Text 1</label>	<input class="form-control" value="1" id="example5_a" name="a" type="text" />	<span class="help-block">Field hints describe a specific field</span></div></form>

Fieldsets

Fieldset A
Fieldset B 
Form::fromArray('example5', $data, function($f){
	$f->textField('a', 'Text 1');
	$f->fieldset('Fieldset A', function($f){
		$f->textField('b', 'Text 2');
		$f->textField('c', 'Text 3');
	});
	$f->fieldset('Fieldset B', function($f){
		$f->textField('d', 'Text 4');
		$f->textField('e', 'Text 5');
	});
}, ['layout' => $layout]);
<form id="example5" class="form bootstrap" method="POST" action="">
<div class="form-group">	<label for="example5_a" class="control-label">Text 1</label>	<input class="form-control" value="Value 1" id="example5_a" name="a" type="text" /></div>	<fieldset>
		<legend>Fieldset A</legend>
<div class="form-group">	<label for="example5_b" class="control-label">Text 2</label>	<input class="form-control" value="Value 2" id="example5_b" name="b" type="text" /></div><div class="form-group">	<label for="example5_c" class="control-label">Text 3</label>	<input class="form-control" value="Value 3" id="example5_c" name="c" type="text" /></div>	</fieldset>
	<fieldset>
		<legend>Fieldset B</legend>
<div class="form-group">	<label for="example5_d" class="control-label">Text 4</label>	<input class="form-control" value="Value 4" id="example5_d" name="d" type="text" /></div><div class="form-group">	<label for="example5_e" class="control-label">Text 5</label>	<input class="form-control" value="Value 5" id="example5_e" name="e" type="text" /></div>	</fieldset>
</form>

Groups

Form::fromArray('example5', $data, function($f){
	$f->group('Row 1', function($f){
		$f->textField('a', 'Text 1');
		$f->textField('b', 'Text 2');
		$f->textField('c', 'Text 3');
	});
	$f->group('Row 2', function($f){
		$f->textField('d', 'Text 1', ['class' => 'col-xs-8']);
		$f->textField('e', 'Text 2', ['class' => 'col-xs-4']);
	});
	$f->group('Row 3', function($f){
		$f->textField('f', 'Text 1', ['class' => 'col-xs-4']);
		$f->textField('g', 'Text 2', ['class' => 'col-xs-8']);
	});
	$f->group(false, function($f){
		$f->button('Action 1');
		$f->button('Action 2');
	});
}, ['layout' => $layout]);
<form id="example5" class="form bootstrap" method="POST" action="">
<div class="form-group">
	<label>Row 1</label>
	<div class="row">
		<div class="col-xs-4">
			<input class="form-control" value="1" id="example5_a" name="a" type="text" />
		</div>
		<div class="col-xs-4">
			<input class="form-control" id="example5_b" name="b" type="text" />
		</div>
		<div class="col-xs-4">
			<input class="form-control" id="example5_c" name="c" type="text" />
		</div>
	</div>
</div>
<div class="form-group">
	<label>Row 2</label>
	<div class="row">
		<div class="col-xs-8">
			<input class="form-control col-xs-8" value="2" id="example5_d" name="d" type="text" />
		</div>
		<div class="col-xs-4">
			<input class="form-control col-xs-4" id="example5_e" name="e" type="text" />
		</div>
	</div>
</div>
<div class="form-group">
	<label>Row 3</label>
	<div class="row">
		<div class="col-xs-4">
			<input class="form-control col-xs-4" id="example5_f" name="f" type="text" />
		</div>
		<div class="col-xs-8">
			<input class="form-control col-xs-8" value="3" id="example5_g" name="g" type="text" />
		</div>
	</div>
</div>
<div class="form-group">
	<div class="clearfix">
		<button class="btn btn-primary" type="button">Action 1</button>
		<button class="btn btn-primary" type="button">Action 2</button>
	</div>
</div>
</form>

Checkboxes

Checkbox using regular label
Checkbox using inline label
Form::fromArray('checkboxes', $data, function($f){
	$f->checkbox('a', 'Text 1', null, ['hint' => 'Checkbox using regular label']);
	$f->checkbox('b', 'Text 2', false, ['hint' => 'Checkbox using inline label']);
	$f->group('Label', function($f){
		$f->checkbox('c', 'Text 3');
		$f->checkbox('d', 'Text 4');
	}, ['hint' => 'Checkbox using group']);
}, ['layout' => $layout]);
<form id="checkboxes" class="form bootstrap" method="POST" action="">
	<input value="0" name="a" type="hidden" />
	<input value="0" name="b" type="hidden" />
	<input value="0" name="c" type="hidden" />
	<input value="0" name="d" type="hidden" />
<div class="checkbox">	<label for="checkboxes_a" class="control-label">		<input type="checkbox" id="checkboxes_a" name="a" value="1" />		Text 1	</label>	<span class="help-block">Checkbox using regular label</span></div><div class="checkbox">	<label for="checkboxes_b" class="control-label">		<input type="checkbox" id="checkboxes_b" name="b" value="1" />		Text 2	</label>	<span class="help-block">Checkbox using inline label</span></div><div class="form-group">
	<label>Label</label>
	<div class="clearfix">
		<label class="form-checkbox" class="checkbox-inline"><input type="checkbox" id="checkboxes_c" name="c" value="1" /> Text 3</label>
		<label class="form-checkbox" class="checkbox-inline"><input type="checkbox" id="checkboxes_d" name="d" value="1" /> Text 4</label>
	</div>
</div>
</form>

Addons

Prefix
Suffix
Prefix
Suffix
Form::fromArray('example_prefix_suffix', $data, function($f){
	$f->textField('a', 'Text 1');
	$f->textField('b', 'Text 2', ['prefix' => 'Prefix']);
	$f->textField('c', 'Text 3', ['suffix' => 'Suffix']);
	$f->textField('d', 'Text 4', ['prefix' => 'Prefix', 'suffix' => 'Suffix']);
}, ['layout' => $layout]);
<form id="example_prefix_suffix" class="form bootstrap" method="POST" action="">
<div class="form-group">	<label for="example_prefix_suffix_a" class="control-label">Text 1</label>	<input class="form-control" value="Value 1" id="example_prefix_suffix_a" name="a" type="text" /></div><div class="form-group">	<label for="example_prefix_suffix_b" class="control-label">Text 2</label>	<div class="input-group"><div class="input-group-addon">Prefix</div><input class="form-control" value="Value 2" id="example_prefix_suffix_b" name="b" type="text" /></div></div><div class="form-group">	<label for="example_prefix_suffix_c" class="control-label">Text 3</label>	<div class="input-group"><input class="form-control" value="Value 3" id="example_prefix_suffix_c" name="c" type="text" /><div class="input-group-addon">Suffix</div></div></div><div class="form-group">	<label for="example_prefix_suffix_d" class="control-label">Text 4</label>	<div class="input-group"><div class="input-group-addon">Prefix</div><input class="form-control" value="Value 4" id="example_prefix_suffix_d" name="d" type="text" /><div class="input-group-addon">Suffix</div></div></div></form>

Supported controls

Use the "type" option to use custom type such as number.
Passwords are not persistent if autocomplete is off
Another way to add custom input fields (same as using textField with type).

link

static

Custom html
Fieldset 
Form::create('smoketest', function($f){
	$f->hiddenField('name', 'Hidden (this wont show at all)', ['value' => '8']);
	$f->textField('text_field', 'Text', ['hint' => 'Use the "type" option to use custom type such as number.']);
	$f->passwordField('password_field', 'Password', ['hint' => 'Passwords are not persistent if autocomplete is off', 'autocomplete' => 'off']);
	$f->customField('custom_field', 'email', 'Email', ['hint' => 'Another way to add custom input fields (same as using textField with type).', 'placeholder' => 'email@example.net']);
	$f->textarea('textarea', 'Textarea');
	$f->select('select', 'Select', FormOptions::fromArray(['A', 'B', 'C']));
	$f->staticValue('static', 'Static text');
	$f->link('link', 'https://example.net', 'Static link');
	$f->hint('static', 'Lorem ipsum dot sit amet.');
	$f->uploadField('upload', 'File upload', ['remove' => true]);
	$f->checkbox('checkbox', 'Checkbox');
	$f->manual('manual', 'Manual', '<em>Custom html</em>', false);
	$f->submit('Submit button');
	$f->button('Generic button', ['class' => 'btn-success']);
 
	/* groups allows you to put multiple fields inline (label is optional) */
	$f->group('Inline group', function($f){
		$f->button('Button 1', ['class' => 'btn-default']);
		$f->button('Button 2', ['class' => 'btn-danger']);
		$f->button('Button 3');
	});
 
	/* fieldsets */
	$f->fieldset('Fieldset', function($f){
		$f->textField('text1', 'Input 1');
		$f->textField('text2', 'Input 2');
		$f->textField('text3', 'Input 3');
	});
}, ['layout' => $layout]);
<form id="smoketest" class="form bootstrap" method="POST" action="">
	<input value="Hidden (this wont show at all)" name="name" type="hidden" />
	<input value="0" name="checkbox" type="hidden" />
<div class="form-group">	<label for="smoketest_text_field" class="control-label">Text</label>	<input class="form-control" id="smoketest_text_field" name="text_field" type="text" />	<span class="help-block">Use the "type" option to use custom type such as number.</span></div><div class="form-group">	<label for="smoketest_password_field" class="control-label">Password</label>	<input class="form-control" autocomplete="off" id="smoketest_password_field" name="password_field" type="password" />	<span class="help-block">Passwords are not persistent if autocomplete is off</span></div><div class="form-group">	<label for="smoketest_custom_field" class="control-label">Email</label>	<input class="form-control" placeholder="email@example.net" id="smoketest_custom_field" name="custom_field" type="email" />	<span class="help-block">Another way to add custom input fields (same as using textField with type).</span></div><div class="form-group">	<label for="smoketest_textarea" class="control-label">Textarea</label>	<textarea class="form-control" id="smoketest_textarea" name="textarea" ></textarea></div><div class="form-group">	<label for="smoketest_select" class="control-label">Select</label>	<select class="form-control" id="smoketest_select" name="select">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
</div><div class="form-group">	<label for="" class="control-label">Static text</label>	<p class="form-control-static"></p></div><div class="form-group">	<label for="" class="control-label">Static link</label>	<p class="form-control-static"><a href="https://example.net">link</a></p></div><div class="form-group">	<label for="" class="control-label">Lorem ipsum dot sit amet.</label>	<p class="form-control-static">static</p></div><div class="form-group">	<label for="smoketest_upload" class="control-label">File upload</label>	<input class="form-control" id="smoketest_upload" name="upload" type="file" /></div><div class="form-group">	<label><input type='checkbox' name='upload_remove' id='smoketest_upload_remove' value='1' />Ta bort</label></div><div class="checkbox">	<label for="smoketest_checkbox" class="control-label">		<input type="checkbox" id="smoketest_checkbox" name="checkbox" value="1" />		Checkbox	</label></div><div class="form-group">	<label for="" class="control-label">Manual</label>	<em>Custom html</em></div><div class="form-group">	<button class="btn btn-primary" type="submit">Submit button</button></div><div class="form-group">	<button class="btn btn-success" type="button">Generic button</button></div><div class="form-group">
	<label>Inline group</label>
	<div class="clearfix">
		<button class="btn btn-default" type="button">Button 1</button>
		<button class="btn btn-danger" type="button">Button 2</button>
		<button class="btn btn-primary" type="button">Button 3</button>
	</div>
</div>
	<fieldset>
		<legend>Fieldset</legend>
<div class="form-group">	<label for="smoketest_text1" class="control-label">Input 1</label>	<input class="form-control" id="smoketest_text1" name="text1" type="text" /></div><div class="form-group">	<label for="smoketest_text2" class="control-label">Input 2</label>	<input class="form-control" id="smoketest_text2" name="text2" type="text" /></div><div class="form-group">	<label for="smoketest_text3" class="control-label">Input 3</label>	<input class="form-control" id="smoketest_text3" name="text3" type="text" /></div>	</fieldset>
</form>
Fork me on GitHub