Theme Sandbox : Forms

forms.php

<style type="text/css">

	.elgg-form .elgg-col {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 0 0 15px 0;
		width: 100%;
		float: left;
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-1of2,
		.elgg-form .elgg-col-2of4,
		.elgg-form .elgg-col-3of6 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 50%;
			float: left;
		}
	}
	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-1of3,
		.elgg-form .elgg-col-2of6 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 33.33333%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-2of3,
		.elgg-form .elgg-col-4of6 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 66.66667%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-1of4 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 25%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-col-3of4 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 75%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-1of5 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 20%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-2of5 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 40%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-3of5 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 60%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-4of5 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 80%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-1of6 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 16.66667%;
			float: left;
		}
	}

	@media only screen and (min-width: 768px) {
		.elgg-form .elgg-col-5of6 {
			padding-left: 0.9375em;
			padding-right: 0.9375em;
			width: 83.33333%;
			float: left;
		}
	}

	.elgg-form-row {
		*zoom: 1;
		padding: 15px;
	}
	.elgg-form-row:before, .elgg-form-row:after {
		content: " ";
		display: table;
	}
	.elgg-form-row:after {
		clear: both;
	}
	@media only screen and (min-width: 768px) {
		.elgg-form-row .elgg-col:first-child {
			padding-left: 0;
		}
		.elgg-form-row .elgg-col:last-child {
			padding-right: 0;
		}
	}

	// alternating
	.elgg-form-alt .elgg-form-row {
		border-bottom: 1px solid #f1f1f1;
	}
	.elgg-form-alt .elgg-form-row:first-child {
		border-top: 1px solid #f1f1f1;
		margin-top: 10px;
	}
	.elgg-form-alt .elgg-form-row:last-child {
		margin-bottom: 10px;
	}
	.elgg-form-alt .elgg-form-row:nth-child(even) {
		background: #fafafa;
	}

	.elgg-input-radios label, .elgg-input-checkboxes label {
		font-weight: normal;
	}
	label {
		vertical-align: top;
	}
	.required:after {
		content: "*";
		color: red;
		display: inline-block;
		width: auto;
		height: auto;
		vertical-align: top;
		margin-left: 10px;
	}
	label + .elgg-help-text {
		margin-left: 10px;
		font-style: italic;
		font-size: 85%;
		vertical-align: top;
	}
	select {
		display: block;
	}
	select[multiple] {
		width: 100%;
	}

	.elgg-form .elgg-foot {
		text-align: right;
	}

	.elgg-state-has-success * {
		border-color: green;
	}
	.elgg-state-has-error * {
		border-color: red;
	}
	.elgg-state-has-notice * {
		border-color: #4690D6;
	}
	.elgg-form-messages {
		margin: 5px;
	}
	.elgg-form-messages .elgg-message {
		padding: 4px 8px;
	}

</style>
<form action="#" class="elgg-form">
	<fieldset>
		<legend>Fieldset Legend</legend>
		<div class="elgg-body">
			<div class="elgg-form-row">
				<div class="elgg-col elgg-col-1of2">
					<div class="elgg-form-row  elgg-form-element">
						<label for="f1">Text input</label>
						<span class="elgg-help-text">.elgg-input-text</span>
						<?php
						echo elgg_view('input/text', array(
							'name' => 'f1',
							'id' => 'f1',
							'value' => 'input text',
						));
						?>
					</div>
					<div class="elgg-form-row elgg-form-element elgg-state-has-error">
						<label for="f2" class="required">Password input</label>
						<span class="elgg-help-text">.elgg-input-password</span>
						<?php
						echo elgg_view('input/password', array(
							'name' => 'f2',
							'id' => 'f2',
							'value' => 'password',
							'required' => true
						));
						?>
						<ul class="elgg-form-messages">
							<li class="elgg-message elgg-state-error">
								This field is required
							</li>
						</ul>

					</div>
					<div class="elgg-form-row">
						<div class="elgg-col elgg-col-1of2">
							<div class="elgg-form-element">
								<label for="f3">Radio input (vertical)</label>
								<span class="elgg-help-text">.elgg-input-radios.elgg-vertical</span>
								<?php
								echo elgg_view('input/radio', array(
									'name' => 'f3',
									'id' => 'f3',
									'options' => array('a (.elgg-input-radio)' => 1, 'b (.elgg-input-radio)' => 2),
								));
								?>
							</div>
						</div>
						<div class="elgg-col elgg-col-1of2">
							<div class="elgg-form-element">
								<label for="v31">Radio input (horizontal)</label>
								<span class="elgg-help-text">.elgg-input-radios.elgg-horizontal</span>
								<?php
								echo elgg_view('input/radio', array(
									'name' => 'v31',
									'id' => 'v31',
									'options' => array('c (.elgg-input-radio)' => 3, 'd (.elgg-input-radio)' => 4),
									'align' => 'horizontal'
								));
								?>
							</div>
						</div>
					</div>
					<div class="elgg-form-row">
						<div class="elgg-col elgg-col-1of3">
							<div class="elgg-form-element">
								<label for="f4">Checkboxes input</label>
								<span class="elgg-help-text">.elgg-input-checkboxes.elgg-vertical</span>
								<?php
								echo elgg_view('input/checkboxes', array(
									'name' => 'f4',
									'id' => 'f4',
									'options' => array('a (.elgg-input-checkbox)' => 1, 'b (.elgg-input-checkbox)' => 2),
								));
								?>
							</div>
						</div>
						<div class="elgg-col elgg-col-2of3">
							<div class="elgg-form-element">
								<label for="v41">Checkboxes input</label>
								<span class="elgg-help-text">.elgg-input-checkboxes.elgg-horizontal</span>
								<?php
								echo elgg_view('input/checkboxes', array(
									'name' => 'v41',
									'id' => 'v41',
									'options' => array('c (.elgg-input-checkbox)' => 3, 'd (.elgg-input-checkbox)' => 4),
									'align' => 'horizontal'
								));
								?>
							</div>
						</div>
					</div>
					<div class="elgg-form-row">
						<div class="elgg-col elgg-col-1of2">
							<div class="elgg-form-element">
								<label for="f5">Select input</label>
								<span class="elgg-help-text">.elgg-input-dropdown</span>
								<?php
								echo elgg_view('input/select', array(
									'name' => 'f5',
									'id' => 'f5',
									'options' => array('option 1', 'option 2'),
								));
								?>
							</div>
						</div>
						<div class="elgg-col elgg-col-1of2">
							<div class="elgg-form-element">
								<label for="f51">Select input [multiple]</label>
								<span class="elgg-help-text">.elgg-input-dropdown</span>
								<?php
								echo elgg_view('input/select', array(
									'name' => 'f51[]',
									'id' => 'f51',
									'options_values' => array(
										'value 1' => 'option 1',
										'value 2' => 'option 2',
										'value 3' => 'option 3',
										'value 4' => 'option 4',
										'value 5' => 'option 5',
										'value 6' => 'option 6',
										'value 7' => 'option 7',
									),
									'multiple' => true,
								));
								?>
								<span class="elgg-help-text">Press and hold Ctrl key to select multiple items.</span>
							</div>
						</div>
					</div>
					<div class="elgg-form-row elgg-form-element">
						<label for="f6">Access input</label>
						<span class="elgg-help-text">.elgg-input-access</span>
						<?php
						echo elgg_view('input/access', array(
							'name' => 'f6',
							'id' => 'f6',
							'value' => ACCESS_PUBLIC,
						));
						?>
					</div>
				</div>
				<div class="elgg-col elgg-col-1of2">
					<div class="elgg-form-row elgg-form-element">
						<label for="f7">File input</label>
						<span class="elgg-help-text">.elgg-input-file</span>
						<?php
						echo elgg_view('input/file', array(
							'name' => 'f7',
							'id' => 'f7',
						));
						?>
						<span class="elgg-help-text">Max upload file size is XXX Mb</span>
					</div>
					<div class="elgg-form-row">
						<div class="elgg-col elgg-col-1of4">
							<div class="elgg-form-element">
								<label for="f8">URL input</label>
								<span class="elgg-help-text">.elgg-input-url</span>
								<?php
								echo elgg_view('input/url', array(
									'name' => 'f8',
									'id' => 'f8',
									'value' => 'http://elgg.org/',
								));
								?>
							</div>
						</div>
						<div class="elgg-col elgg-col-2of4">
							<div class="elgg-form-element">
								<label for="f9">Tags input</label>
								<span class="elgg-help-text">.elgg-input-tags</span>
								<?php
								echo elgg_view('input/tags', array(
									'name' => 'f9',
									'id' => 'f9',
									'value' => 'one, two, three',
									'class' => 'required'
								));
								?>
							</div>
						</div>
						<div class="elgg-col elgg-col-1of4">
							<div class="elgg-form-element elgg-state-has-success">
								<label for="f10">Email input</label>
								<span class="elgg-help-text">.elgg-input-email</span>
								<?php
								echo elgg_view('input/email', array(
									'name' => 'f10',
									'id' => 'f10',
									'value' => '[email protected]',
								));
								?>
								<ul class="elgg-form-messages">
									<li class="elgg-message elgg-state-success">
										All is good here
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div class="elgg-form-row elgg-form-element">
						<label for="f11">Autocomplete input</label>
						<span class="elgg-help-text">.elgg-input-autocomplete</span>
						<?php
						echo elgg_view('input/autocomplete', array(
							'name' => 'f11',
							'id' => 'f11',
							'match_on' => 'users',
						));
						?>
					</div>
					<div class="elgg-form-row elgg-form-element elgg-state-has-notice">
						<label for="f12">Date input</label>
						<span class="elgg-help-text">.elgg-input-date</span>
						<?php
						echo elgg_view('input/date', array(
							'name' => 'f12',
							'id' => 'f12',
							'value' => '2012-12-31',
						));
						?>
						<span class="elgg-help-text">Date format YYYY-MM-DD</span>
						<ul class="elgg-form-messages">
							<li class="elgg-message elgg-state-notice">
								Please use the correct date format
							</li>
						</ul>
					</div>
					<div class="elgg-form-row elgg-form-element">
						<label for="f13">User picker input</label>
						<span class="elgg-help-text">.elgg-user-picker</span>
						<?php
						echo elgg_view('input/userpicker', array(
							'name' => 'f13',
							'id' => 'f13',
						));
						?>
					</div>
				</div>
			</div>
			<div class="elgg-form-row">
				<div class="elgg-col elgg-col-2of5">
					<div class="elgg-form-element">
						<label for="f15">Plain textarea input</label>
						<span class="elgg-help-text">.elgg-input-plaintext</span>
						<?php
						echo elgg_view('input/plaintext', array(
							'name' => 'f15',
							'id' => 'f15',
							'value' => $ipsum,
						));
						?>
					</div>
				</div>
				<div class="elgg-col elgg-col-3of5">
					<div class="elgg-form-element">
						<label for="f14">Long textarea input</label>
						<span class="elgg-help-text">.elgg-input-longtext</span>
						<?php
						echo elgg_view('input/longtext', array(
							'name' => 'f14',
							'id' => 'f14',
							'value' => $ipsum,
						));
						?>
					</div>
				</div>
			</div>
		</div>
		<div class="elgg-foot elgg-form-row">
			<?php
			echo elgg_view('input/reset');
			echo elgg_view('input/submit');
			?>
		</div>
	</fieldset>
</form>