PHP Forms Table 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 table" method="POST" action="">
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example5_a">Text 1</label></th>
			<td class="form-field"><input value="Value 1" id="example5_a" name="a" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example5_b">Text 2</label></th>
			<td class="form-field"><input value="Value 2" id="example5_b" name="b" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr class="required">
			<th class="form-label"><label for="example5_c">Text 3</label></th>
			<td class="form-field"><input required value="Value 3" id="example5_c" name="c" type="text" /></td>
			<td class="form-hint" >Required field</td>
			<td class="form-error"></td>
		</tr>
	</table>
</form>

Hints

Row-level hints offers a hint that spans an entire row (similar to a paragraph).
Field 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 table" method="POST" action="">
	<table class="layout">
		<tr>
			<td class="form-field" colspan="4">Row-level hints offers a hint that spans an entire row (similar to a paragraph).</td>
		</tr>
		<tr>
			<th class="form-label">Field</th>
			<td class="form-field" colspan="3">Field-level hints has a similar look as a static field.</td>
		</tr>
		<tr >
			<th class="form-label"><label for="example5_a">Text 1</label></th>
			<td class="form-field"><input value="1" id="example5_a" name="a" type="text" /></td>
			<td class="form-hint" >Field hints describe a specific field</td>
			<td class="form-error"></td>
		</tr>
	</table>
</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 table" method="POST" action="">
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example5_a">Text 1</label></th>
			<td class="form-field"><input value="Value 1" id="example5_a" name="a" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
	<fieldset>
		<legend>Fieldset A</legend>
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example5_b">Text 2</label></th>
			<td class="form-field"><input value="Value 2" id="example5_b" name="b" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example5_c">Text 3</label></th>
			<td class="form-field"><input value="Value 3" id="example5_c" name="c" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
	</fieldset>
	<fieldset>
		<legend>Fieldset B</legend>
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example5_d">Text 4</label></th>
			<td class="form-field"><input value="Value 4" id="example5_d" name="d" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example5_e">Text 5</label></th>
			<td class="form-field"><input value="Value 5" id="example5_e" name="e" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
	</fieldset>
</form>

Groups

Row 1
Row 2
Row 3
Form::fromArray('example5', $data, function($f){
	$f->group('Row 1', function($f){
		$f->textField('a', 'Text 1', ['style' => 'width: 50px;']);
		$f->textField('b', 'Text 2', ['style' => 'width: 50px;']);
		$f->textField('c', 'Text 3', ['style' => 'width: 50px;']);
	});
	$f->group('Row 2', function($f){
		$f->textField('d', 'Text 1', ['style' => 'width: 50px;']);
		$f->textField('e', 'Text 2', ['style' => 'width: 50px;']);
		$f->textField('f', 'Text 3', ['style' => 'width: 50px;']);
	});
	$f->group('Row 3', function($f){
		$f->textField('g', 'Text 1', ['style' => 'width: 50px;']);
		$f->textField('h', 'Text 2', ['style' => 'width: 50px;']);
		$f->textField('i', 'Text 3', ['style' => 'width: 50px;']);
	});
	$f->group(false, function($f){
		$f->button('Action 1');
		$f->button('Action 2');
	});
}, ['layout' => $layout]);
<form id="example5" class="form table" method="POST" action="">
	<table class="layout">
		<tr class="form-group">
			<th class="form-label">Row 1</th>
			<td class="form-field"><input style="width: 50px;" value="1" id="example5_a" name="a" type="text" /><input style="width: 50px;" id="example5_b" name="b" type="text" /><input style="width: 50px;" id="example5_c" name="c" type="text" />			</td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr class="form-group">
			<th class="form-label">Row 2</th>
			<td class="form-field"><input style="width: 50px;" id="example5_d" name="d" type="text" /><input style="width: 50px;" value="2" id="example5_e" name="e" type="text" /><input style="width: 50px;" id="example5_f" name="f" type="text" />			</td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr class="form-group">
			<th class="form-label">Row 3</th>
			<td class="form-field"><input style="width: 50px;" id="example5_g" name="g" type="text" /><input style="width: 50px;" id="example5_h" name="h" type="text" /><input style="width: 50px;" value="3" id="example5_i" name="i" type="text" />			</td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr class="form-group">
			<td class="form-field" colspan="4"><button type="button">Action 1</button><button type="button">Action 2</button>			</td>
		</tr>
	</table>
</form>

Checkboxes

Checkbox using regular label
Label Checkbox using group
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 table" 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" />
	<table class="layout">
		<tr >
			<th class="form-label"><label for="checkboxes_a">Text 1</label></th>
			<td class="form-field"><input type="checkbox" id="checkboxes_a" name="a" value="1" /></td>
			<td class="form-hint" >Checkbox using regular label</td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<td class="form-field" colspan="4"><label><input type="checkbox" id="checkboxes_b" name="b" value="1" /> Text 2</label></td>
		</tr>
		<tr class="form-group">
			<th class="form-label">Label</th>
			<td class="form-field"><label class="form-checkbox" ><input type="checkbox" id="checkboxes_c" name="c" value="1" /> Text 3</label><label class="form-checkbox" ><input type="checkbox" id="checkboxes_d" name="d" value="1" /> Text 4</label>			</td>
			<td class="form-hint" >Checkbox using group</td>
			<td class="form-error"></td>
		</tr>
	</table>
</form>

Addons

Prefix
Suffix
PrefixSuffix
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 table" method="POST" action="">
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example_prefix_suffix_a">Text 1</label></th>
			<td class="form-field"><input value="Value 1" id="example_prefix_suffix_a" name="a" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example_prefix_suffix_b">Text 2</label></th>
			<td class="form-field"><div class="form-addon"><span class="form-prefix">Prefix</span><input value="Value 2" id="example_prefix_suffix_b" name="b" type="text" /></div></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example_prefix_suffix_c">Text 3</label></th>
			<td class="form-field"><div class="form-addon"><input value="Value 3" id="example_prefix_suffix_c" name="c" type="text" /><span class="form-suffix">Suffix</span></div></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="example_prefix_suffix_d">Text 4</label></th>
			<td class="form-field"><div class="form-addon"><span class="form-prefix">Prefix</span><input value="Value 4" id="example_prefix_suffix_d" name="d" type="text" /><span class="form-suffix">Suffix</span></div></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
</form>

Layout hints

Lorem ipsum
Lorem ipsum
Lorem ipsum
Form::fromArray('example5', $data, function($f){
	$f->textarea('foo', 'Regular textarea', ['hint' => 'Lorem ipsum']);
	$f->textarea('bar', '"tworow"', ['tworow' => true, 'hint' => 'Lorem ipsum']);
	$f->textarea('baz', '"tworow" + "fill"', ['tworow' => true, 'fill' => true, 'hint' => 'Lorem ipsum']);
}, ['layout' => $layout]);
<form id="example5" class="form table" method="POST" action="">
	<table class="layout">
		<tr >
			<th class="form-label"><label for="example5_foo">Regular textarea</label></th>
			<td class="form-field"><textarea id="example5_foo" name="foo" ></textarea></td>
			<td class="form-hint" >Lorem ipsum</td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label tworow" colspan="4"><label for="example5_bar">"tworow"</label></th>
		</tr>
		<tr >
			<td class="form-field" valign="top" colspan="2"><textarea id="example5_bar" name="bar" ></textarea></td>
			<td class="form-hint"  valign="top">Lorem ipsum</td>
			<td class="form-error" valign="top"></td>
		</tr>
		<tr >
			<th class="form-label tworow" colspan="2" valign="top"><label for="example5_baz">"tworow" + "fill"</label></th>
			<td class="form-hint"  valign="top">Lorem ipsum</td>
			<td class="form-error" valign="top"></td>
		</tr>
		<tr >
			<td class="form-field" colspan="4"><textarea id="example5_baz" name="baz" ></textarea></td>
		</tr>
	</table>
</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
Lorem ipsum dot sit amet. static
Custom html
Inline group
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 table" method="POST" action="">
	<input value="Hidden (this wont show at all)" name="name" type="hidden" />
	<input value="0" name="checkbox" type="hidden" />
	<table class="layout">
		<tr >
			<th class="form-label"><label for="smoketest_text_field">Text</label></th>
			<td class="form-field"><input id="smoketest_text_field" name="text_field" type="text" /></td>
			<td class="form-hint" >Use the "type" option to use custom type such as number.</td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_password_field">Password</label></th>
			<td class="form-field"><input autocomplete="off" id="smoketest_password_field" name="password_field" type="password" /></td>
			<td class="form-hint" >Passwords are not persistent if autocomplete is off</td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_custom_field">Email</label></th>
			<td class="form-field"><input placeholder="email@example.net" id="smoketest_custom_field" name="custom_field" type="email" /></td>
			<td class="form-hint" >Another way to add custom input fields (same as using textField with type).</td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_textarea">Textarea</label></th>
			<td class="form-field"><textarea id="smoketest_textarea" name="textarea" ></textarea></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_select">Select</label></th>
			<td class="form-field"><select id="smoketest_select" name="select">
<option value="0">A</option>
<option value="1">B</option>
<option value="2">C</option>
</select>
</td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="">Static text</label></th>
			<td class="form-field"></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="">Static link</label></th>
			<td class="form-field"><a href="https://example.net">link</a></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr>
			<th class="form-label">Lorem ipsum dot sit amet.</th>
			<td class="form-field" colspan="3">static</td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_upload">File upload</label></th>
			<td class="form-field"><input id="smoketest_upload" name="upload" type="file" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for=""></label></th>
			<td class="form-field"><label><input type='checkbox' name='upload_remove' id='smoketest_upload_remove' value='1' />Ta bort</label></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_checkbox">Checkbox</label></th>
			<td class="form-field"><input type="checkbox" id="smoketest_checkbox" name="checkbox" value="1" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="">Manual</label></th>
			<td class="form-field"><em>Custom html</em></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<td class="form-field" colspan="4"><button type="submit">Submit button</button></td>
		</tr>
		<tr >
			<td class="form-field" colspan="4"><button class="btn-success" type="button">Generic button</button></td>
		</tr>
		<tr class="form-group">
			<th class="form-label">Inline group</th>
			<td class="form-field"><button class="btn-default" type="button">Button 1</button><button class="btn-danger" type="button">Button 2</button><button type="button">Button 3</button>			</td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
	<fieldset>
		<legend>Fieldset</legend>
	<table class="layout">
		<tr >
			<th class="form-label"><label for="smoketest_text1">Input 1</label></th>
			<td class="form-field"><input id="smoketest_text1" name="text1" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_text2">Input 2</label></th>
			<td class="form-field"><input id="smoketest_text2" name="text2" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
		<tr >
			<th class="form-label"><label for="smoketest_text3">Input 3</label></th>
			<td class="form-field"><input id="smoketest_text3" name="text3" type="text" /></td>
			<td class="form-hint" ></td>
			<td class="form-error"></td>
		</tr>
	</table>
	</fieldset>
</form>
Fork me on GitHub