PHP Forms Plain layout

Simple form

View form source

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]);

View output html

<form id="example5" class="form plain" method="POST" action="">
<div class="form-row">
<span class="form-label">Text 1</span>
<span class="form-field"><input value="Value 1" id="example5_a" name="a" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 2</span>
<span class="form-field"><input value="Value 2" id="example5_b" name="b" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row required">
<span class="form-label">Text 3</span>
<span class="form-field"><input required value="Value 3" id="example5_c" name="c" type="text" /></span>
<span class="form-hint">Required field</span>
</div></form>

Hints

View form source

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]);

View output html

<form id="example5" class="form plain" method="POST" action="">
<div class="form-row">
<span class="form-field">Row-level hints offers a hint that spans an entire row (similar to a paragraph).</span>
</div><div class="form-row">
<span class="form-label">Field</span>
<span class="form-field">Field-level hints has a similar look as a static field.</span>
</div><div class="form-row">
<span class="form-label">Text 1</span>
<span class="form-field"><input value="1" id="example5_a" name="a" type="text" /></span>
<span class="form-hint">Field hints describe a specific field</span>
</div></form>

Fieldsets

View form source

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]);

View output html

<form id="example5" class="form plain" method="POST" action="">
<div class="form-row">
<span class="form-label">Text 1</span>
<span class="form-field"><input value="Value 1" id="example5_a" name="a" type="text" /></span>
<span class="form-hint"></span>
</div>	<fieldset>
		<legend>Fieldset A</legend>
<div class="form-row">
<span class="form-label">Text 2</span>
<span class="form-field"><input value="Value 2" id="example5_b" name="b" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 3</span>
<span class="form-field"><input value="Value 3" id="example5_c" name="c" type="text" /></span>
<span class="form-hint"></span>
</div>	</fieldset>
	<fieldset>
		<legend>Fieldset B</legend>
<div class="form-row">
<span class="form-label">Text 4</span>
<span class="form-field"><input value="Value 4" id="example5_d" name="d" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 5</span>
<span class="form-field"><input value="Value 5" id="example5_e" name="e" type="text" /></span>
<span class="form-hint"></span>
</div>	</fieldset>
</form>

Groups

View form source

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]);

View output html

<form id="example5" class="form plain" method="POST" action="">
<div class=\"form-group\"><span class="form-label">Row 1</span>
<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" /></div><div class=\"form-group\"><span class="form-label">Row 2</span>
<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" /></div><div class=\"form-group\"><span class="form-label">Row 3</span>
<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" /></div><div class=\"form-group\"><button type="button">Action 1</button><button type="button">Action 2</button></div></form>

Checkboxes

View form source

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]);

View output html

<form id="checkboxes" class="form plain" 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="form-row">
<span class="form-label"></span>
<span class="form-field"><input type="checkbox" id="checkboxes_a" name="a" value="1" /></span>
<span class="form-hint">Checkbox using regular label</span>
</div><div class="form-row">
<span class="form-field"><input type="checkbox" id="checkboxes_b" name="b" value="1" /></span>
<span class="form-hint">Checkbox using inline label</span>
</div><div class=\"form-group\"><span class="form-label">Label</span>
<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></div></form>

Addons

View form source

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]);

View output html

<form id="example_prefix_suffix" class="form plain" method="POST" action="">
<div class="form-row">
<span class="form-label">Text 1</span>
<span class="form-field"><input value="Value 1" id="example_prefix_suffix_a" name="a" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 2</span>
<span class="form-field"><span class="form-addon"><span class="form-prefix">Prefix</span><input value="Value 2" id="example_prefix_suffix_b" name="b" type="text" /></span></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 3</span>
<span class="form-field"><span class="form-addon"><input value="Value 3" id="example_prefix_suffix_c" name="c" type="text" /><span class="form-suffix">Suffix</span></span></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Text 4</span>
<span class="form-field"><span 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></span></span>
<span class="form-hint"></span>
</div></form>

Supported controls

View form source

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]);

View output html

<form id="smoketest" class="form plain" 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-row">
<span class="form-label">Text</span>
<span class="form-field"><input id="smoketest_text_field" name="text_field" type="text" /></span>
<span class="form-hint">Use the "type" option to use custom type such as number.</span>
</div><div class="form-row">
<span class="form-label">Password</span>
<span class="form-field"><input autocomplete="off" id="smoketest_password_field" name="password_field" type="password" /></span>
<span class="form-hint">Passwords are not persistent if autocomplete is off</span>
</div><div class="form-row">
<span class="form-label">Email</span>
<span class="form-field"><input placeholder="email@example.net" id="smoketest_custom_field" name="custom_field" type="email" /></span>
<span class="form-hint">Another way to add custom input fields (same as using textField with type).</span>
</div><div class="form-row">
<span class="form-label">Textarea</span>
<span class="form-field"><textarea id="smoketest_textarea" name="textarea" ></textarea></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Select</span>
<span 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>
</span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Static text</span>
<span class="form-field"></span>
</div><div class="form-row">
<span class="form-label">Static link</span>
<span class="form-field"><a href="https://example.net">link</a></span>
</div><div class="form-row">
<span class="form-label">Lorem ipsum dot sit amet.</span>
<span class="form-field">static</span>
</div><div class="form-row">
<span class="form-label">File upload</span>
<span class="form-field"><input id="smoketest_upload" name="upload" type="file" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label"></span>
<span class="form-field"><label><input type='checkbox' name='upload_remove' id='smoketest_upload_remove' value='1' />Ta bort</label></span>
</div><div class="form-row">
<span class="form-label"></span>
<span class="form-field"><input type="checkbox" id="smoketest_checkbox" name="checkbox" value="1" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Manual</span>
<span class="form-field"><em>Custom html</em></span>
</div><div class="form-row">
<span class="form-field"><button type="submit">Submit button</button></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-field"><button class="btn-success" type="button">Generic button</button></span>
<span class="form-hint"></span>
</div><div class=\"form-group\"><span class="form-label">Inline group</span>
<button class="btn-default" type="button">Button 1</button><button class="btn-danger" type="button">Button 2</button><button type="button">Button 3</button></div>	<fieldset>
		<legend>Fieldset</legend>
<div class="form-row">
<span class="form-label">Input 1</span>
<span class="form-field"><input id="smoketest_text1" name="text1" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Input 2</span>
<span class="form-field"><input id="smoketest_text2" name="text2" type="text" /></span>
<span class="form-hint"></span>
</div><div class="form-row">
<span class="form-label">Input 3</span>
<span class="form-field"><input id="smoketest_text3" name="text3" type="text" /></span>
<span class="form-hint"></span>
</div>	</fieldset>
</form>