Required plugin

This feature requires the plugin file css/style/form.css

Block labels

Labels are stacked on top of the input, and you may add some additional informations using a small element (floated right, or left for RTL):

Additional information Label

<p class="button-height block-label">
	<label for="input" class="label">
		<small>Additional information</small>
		Label
	</label>
	<input type="text" name="input" id="input" class="input full-width" value="">
</p>

If required, you may use a span instead of a label, as long as you use the class label

Inline labels

Inline blocks have a left padding, and the label is floated left in the free space.

Small

Normal label

Medium label

Large label with tip

// Small inline label
<p class="button-height inline-small-label">
	<label for="input" class="label">Label</label>
	<input type="text" name="input" id="input" class="input" value="">
</p>

// Normal inline label
<p class="button-height inline-label">
	<label for="input" class="label">Label</label>
	<input type="text" name="input" id="input" class="input" value="">
</p>

// Medium inline label
<p class="button-height inline-medium-label">
	<label for="input" class="label">Label</label>
	<input type="text" name="input" id="input" class="input" value="">
</p>

// Large inline label
<p class="button-height inline-large-label">
	<label for="input" class="label">
		Label <small>with tip</small>
	</label>
	<input type="text" name="input" id="input" class="input" value="">
</p>

Responsiveness

Inline labels will automatically display as block labels on smaller screens to preserve layout

Required inputs

To style the label of a required input, add the class required to any of its parents:

Required

<p class="button-height required">
	<label for="input" class="label">Label</label>
	<input type="text" name="input" id="input" class="input full-width" value="">
</p>

Fieldsets

Legend

Label 1

Label 2

Label 3

<fieldset class="fieldset">
	<legend class="legend">Legend</legend>

	...
</fieldset>

Fields list

Fields lists are a special style design to be used inside fieldsets. It includes rows, top and bottom tips around inputs, and a special carved section style:

Legend

This is the name that will be displayed on profile page User login

Avatar (*.jpg) Max file size: 2MB

Resize height (in px) Enable crop

New size classes

Since v1.4, you can add the classes compact-field-blocks or mini-field-blocks to the fieldset to use smaller labels

<fieldset class="fieldset fields-list">

	<legend class="legend">Legend</legend>

	<!-- Standard line -->
	<div class="field-block button-height">
		<small class="input-info">Info above input</small>
		<label for="input-1" class="label"><b>Label</b> (tip)</label>
		<input type="text" name="input-1" id="input-1" value="" class="input">
		<small class="input-info">Info below input</small>
	</div>

	<!-- Carved line -->
	<div class="field-drop button-height black-inputs">
		<label for="input-2" class="label"><b>Label</b> (tip)</label>
		<input type="text" name="input-2" id="input-2" value="" class="input">
		<small class="input-info">Info below input</small>
	</div>

</fieldset>

Layouts