Xmeter Style Guide

<figure>
	<form>
		<fieldset>
			<legend>Integer at lacus et diam tristique <code>fieldset legend</code> suscipit.</legend>
			Aenean consectetur <code>fieldset</code> suscipit urna, non vehicula lacus blandit et.
		</fieldset>
		<fieldset>
			<legend>single line text inputs</legend>
			<input type="text" placeholder="input type text"/>
			<input type="email" placeholder="input type email"/>
			<input type="password" placeholder="input type password"/>
			<input type="search" placeholder="input type search"/>
			<input type="tel" placeholder="input type tel"/>
			<input type="url" placeholder="input type url"/>
		</fieldset>
		<fieldset>
			<legend>date/time</legend>
			<input type="datetime-local"/>
			<input type="date"/>
			<input type="time"/>
			<input type="week"/>
			<input type="month"/>
		</fieldset>
		<fieldset>
			<legend>without text input</legend>
			<input type="color"/>
			<input type="file"/>
			<input type="hidden"/>
			<input type="number" placeholder="input type number"/>
			<input type="range"/>
		</fieldset>
		<fieldset>
			<legend>check boxes</legend>
			<input type="checkbox"/>
			<label>select</label>
			<label>
				<input type="checkbox"/>
				all
			</label>
			<input id="checkboxid" type="checkbox"/>
			<label for="checkboxid">applicable</label>
		</fieldset>
		<fieldset>
			<legend>radio buttons</legend>
			<input type="radio" name="radiogroup1"/>
			<label>select</label>
			<label>
				<input type="radio" name="radiogroup1"/>
				only
			</label>
			<input id="radioid" type="radio" name="radiogroup1"/>
			<label for="radioid">one</label>
		</fieldset>
		<fieldset>
			<legend>drop-down list (select only one)</legend>
			<select>
				<option>option 1</option>
				<optgroup label="label for option 2">
					<option>option 2a</option>
					<option>option 2b</option>
					<option>option 2c</option>
				</optgroup>
				<option>option 3</option>
			</select>
			<input list="b" placeholder="select it or type it"/>
			<datalist id="b">
				<!-- optgroup not a valid child of datalist -->
				<option>option 1</option>
				<option>option 2</option>
				<option>option 3</option>
			</datalist>
		</fieldset>
		<fieldset>
			<legend>drop-down list (select multiple)</legend>
			<select multiple="">
				<option>option 1</option>
				<optgroup label="label for option 2">
					<option>option 2a</option>
					<option>option 2b</option>
					<option>option 2c</option>
				</optgroup>
				<option>option 3</option>
			</select>
		</fieldset>
		<fieldset>
			<legend>buttons</legend>
			<input type="button" value="button"/>
			<input type="reset"/>
			<input type="submit"/>
			<button type="button">button</button>
			<button type="reset">reset</button>
			<button type="submit">submit</button>
		</fieldset>
		<fieldset>
			<legend>textarea</legend>
			<textarea></textarea>
		</fieldset>
	</form>
</figure>