JUI UIPlay: Forms

Code
HTML

<section>
	<h2>Label</h2>
	<p>
		Label provides 6 colors and 4 size options as well as an option to toggle between the round effect and the rectangular effect.
		
		<table>
			<tr>
				<td width="170px">View</td>
				<td width="230px">Class</td>
				<td>Description</td>
			</tr>
			<tr>
				<td>
					<span class="label mini"><i class="icon-gear"></i> Label</span>
				</td>
				<td>
					label mini
				</td>
				<td>Default text box (Mini)</td>
			</tr>
			<tr>
				<td>
					<span class="label small"><i class="icon-gear"></i> Label</span>
				</td>
				<td>
					label small
				</td>
				<td>Default text box (Small)</td>
			</tr>
			<tr>
				<td>
					<span class="label info"><i class="icon-gear"></i> Label</span>
				</td>
				<td>
					label info
				</td>
				<td>Blue text box (Normal)</td>
			</tr>
			<tr>
				<td>
					<span class="label large danger"><i class="icon-gear"></i> Label</span>
				</td>
				<td>
					label large danger
				</td>
				<td>Red text box (Large)</td>
			</tr>
			<tr>
				<td>
					<span class="label mini success">Label</span>
				</td>
				<td>
					label mini success
				</td>
				<td>Green text box (Mini)</td>
			</tr>
		</table>
	</p>
</section>

<section>
	<h2>Input</h2>
	<p>
		Input Box provides 2 colors and 4 size options as well as an option to toggle between the round effect and the rectangular effect.
		
		<table>
			<tr>
				<td width="170px">View</td>
				<td width="230px">Class</td>
				<td>Description</td>
			</tr>
			<tr>
				<td>
					<input type="text" class="input mini" />
				</td>
				<td>
					input mini
				</td>
				<td>Default text box (Mini)</td>
			</tr>
			<tr>
				<td>
					<input type="text" class="input small" />
				</td>
				<td>
					input small
				</td>
				<td>Default text box (Small)</td>
			</tr>
			<tr>
				<td>
					<input type="text" class="input" />
				</td>
				<td>
					input
				</td>
				<td>Default text box (Normal)</td>
			</tr>
			<tr>
				<td>
					<input type="text" class="input large" />
				</td>
				<td>
					input large
				</td>
				<td>Default text box (Large)</td>
			</tr>
			<tr>
				<td>
					<input type="text" class="input" disabled />
				</td>
				<td>
					input disabled
				</td>
				<td>Default text box (Disabled)</td>
			</tr>
		</table>
	</p>
</section>
	
<section>
	<h2>Number / Email</h2>
	<p>
		A form based on HTML5, with colors and sizes that are the same as those of the text box.
		
		<table>
			<tr>
				<td width="175px">View</td>
				<td width="120px">Type</td>
				<td width="140px">Class</td>
				<td>Description</td>
			</tr>
			<tr>
				<td>
					<input type="number" class="input" />
				</td>
				<td>
					number
				</td>
				<td>
					input
				</td>
				<td>Default number box</td>
			</tr>
			<tr>
				<td>
					<input type="email" class="input" placeholder="jui@jennifer.com" />
				</td>
				<td>
					email
				</td>
				<td>
					input
				</td>
				<td>Default email box</td>
			</tr>
		</table>
	</p>
</section>

<section>
    <h2>Textarea</h2>
    <p>
        Same as the text field. Size options are not available.

<table>
			<tr>
				<td width="175px">View</td>
				<td width="120px">Tag</td>
				<td width="140px">Class</td>
				<td>Description</td>
			</tr>
			<tr>
				<td>
					<textarea class="input" style="height: 50px;"></textarea>
				</td>
				<td>
					textarea
				</td>
				<td>
					input
				</td>
				<td>Default text area</td>
			</tr>
			<tr>
				<td>
					<textarea class="input" style="height: 50px;" disabled></textarea>
				</td>
				<td>
					textarea
				</td>
				<td>
					input
				</td>
				<td>Default text area (Disabled)</td>
			</tr>
		</table>
    </p>
</section>

Result API

Result
API