• default style
  • blue style
  • green style
  • red style
  • orange style
Monday 26 Jun 2017
Print

Form Elements

Written by Super User. Posted in Typography

Example page with form elements for you to get an idea on how they look like.

All forms of the Joomla! core extensions look nice with form replacements and all other 3rd party extensions following Joomla! standards.





Form Sample Code
<form>
	<fieldset>
		<p>
			<label for="input1">Sample Input 1</label> <br />
			<input id="input1" class="inputbox" name="input" type="input" />
		</p>
		<p>
			<label for="input2">Sample Input 2</label> <br />
			<input id="input2" class="inputbox" name="input" type="input" />
		</p>
		<p>
			<input id="radio-sample" type="radio" /><label for="radio-sample">Sample Radio Input</label>
			<input id="radio-sample2" type="radio" /><label for="radio-sample2">Sample Radio Input 2</label><br />
			<input id="checkbox-sample" type="checkbox" /><label for="checkbox-sample">Sample CheckBox Input</label>
			<input id="checkbox-sample2" type="checkbox" /><label for="checkbox-sample2">Sample CheckBox Input 2</label>
		</p>
		<p>
			<label for="select">Sample Select Field:</label><br />
			<select id="select">
				<option selected="selected">Option One</option>
				<option>Option Two</option>
			</select>
		</p>
		<p>
			<label for="textarea-sample">Sample Textarea Field:</label><br />
			<textarea id="textarea-sample" class="inputbox" cols="80" rows="5">Textarea text</textarea>
		</p>
		<p>
			<button>Submit Button</button> <input class="button" type="button" value="Reset Input" />
		</p>
	</fieldset>	
</form>