Demo of Formcore Light-weight, validated forms

Text Inputs

Example: Single Line Text


<label class="form-group">
	<b class="label-text">Text</b>
	<input type="text">
</label>
<label class="form-group required">
	<b class="label-text">Required Text</b>
	<input type="text" required>
</label>
<label class="form-group disabled">
	<b class="label-text">Disabled Text</b>
	<input type="text" disabled>
</label>

Example: Name


<div class="sect-group">
	<div class="sect-inner-a">
		<label class="form-group">
			<b class="label-text">First Name</b>
			<input type="text">
		</label>
	</div>
	<div class="sect-inner-b">
		<label class="form-group ">
			<b class="label-text">Last Name</b>
			<input type="text">
		</label>
	</div>
</div>

Example: Multi-line Text, grows with text


<label class="form-group">
	<b class="label-text">Text</b>
	<textarea></textarea>
</label>
<label class="form-group required">
	<b class="label-text">Required Text</b>
	<textarea required></textarea>
</label>
<label class="form-group disabled">
	<b class="label-text">Disabled Text</b>
	<textarea disabled></textarea>
</label>

Example: US Telephone Number


<label class="form-group">
	<b class="label-text">Telephone</b>
	<input type="tel" pattern="[0-9]*" data-validate="phone" data-politespace data-politespace-us-telephone data-politespace-grouplength="3,3,4" data-politespace-delimiter="-" data-numeric-input maxlength="10">
</label>

Example: File Upload


<label class="form-group">
	<b class="label-text">Profile Photo</b>
	<input type="file">
</label>

Example: Multi-line Text, with character counter maxlength


<label class="form-group">
	<b class="label-text">Text</b>
	<textarea id="charcounter-max" maxlength="250"></textarea>
	<span class="character-counter plural">
		<b data-maxlength-count="charcounter-max">250</b> <span class="plural">characters</span><span class="singular">character</span> remaining
	</span>
</label>

Example: Multi-line Text, with character counter minlength


<label class="form-group">
	<b class="label-text">Text</b>
	<textarea id="charcounter-min" minlength="10"></textarea>
	<span class="character-counter plural">
		Enter <b data-maxlength-count="charcounter-min">10</b> more <span class="plural">characters</span><span class="singular">character</span>
	</span>
</label>

Example: Email


<label class="form-group">
	<b class="label-text">Email</b>
	<input type="email" data-validate="email" autocorrect="off" autocapitalize="none" spellcheck="false">
</label>

Example: Credit Card


<label class="form-group">
	<b class="label-text">Card Number</b>
	<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-numeric-input-nav-disabled data-politespace data-politespace-grouplength="4" data-politespace-creditcard data-politespace-creditcard-maxlength data-validate="credit" maxlength="16" placeholder="0000 0000 0000 0000" class="formcore-disable-spinner">
</label>

Example: Credit Card with Preview (Text Only)

We accept:

Visa Mastercard AMEX 

<div class="sect-group creditcarddisplay" data-validator-anchor>
	<label class="sect-inner-a form-group">
		<span class="label-text">Card Number</span>
		<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-numeric-input-nav-disabled data-politespace data-politespace-grouplength="4" data-politespace-creditcard data-politespace-creditcard-maxlength data-validate="credit" maxlength="16" data-credit-card-display placeholder="0000 0000 0000 0000" class="formcore-disable-spinner">
	</label>
	<div class="sect-inner-b">
		<p class="creditcarddisplay_desc">We accept:</p>
		<span class="creditcarddisplay_type creditcarddisplay_type-text creditcarddisplay_type-visa">Visa</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-text creditcarddisplay_type-mastercard">Mastercard</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-text creditcarddisplay_type-amex">AMEX</span>
	</div>
</div>

Example: Credit Card with Preview (3 Images)

We accept:

Visa Mastercard AMEX 

<div class="sect-group creditcarddisplay" data-validator-anchor>
	<label class="sect-inner-a form-group">
		<span class="label-text">Card Number</span>
		<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-numeric-input-nav-disabled data-politespace data-politespace-grouplength="4" data-politespace-creditcard data-politespace-creditcard-maxlength data-validate="credit" maxlength="16" data-credit-card-display placeholder="0000 0000 0000 0000" class="formcore-disable-spinner">
	</label>
	<div class="sect-inner-b">
		<p class="creditcarddisplay_desc">We accept:</p>
		<span class="creditcarddisplay_type creditcarddisplay_type-visa icon-card-visa">Visa</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-mastercard icon-card-mastercard">Mastercard</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-amex icon-card-amex">AMEX</span>
	</div>
</div>

Example: Credit Card with Preview (4 Images)

Visa Mastercard AMEX Discover 

<div class="sect-group creditcarddisplay" data-validator-anchor>
	<label class="sect-inner-a form-group">
		<span class="label-text">Card Number</span>
		<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-numeric-input-nav-disabled data-politespace data-politespace-grouplength="4" data-politespace-creditcard data-politespace-creditcard-maxlength data-validate="credit" maxlength="16" data-credit-card-display placeholder="0000 0000 0000 0000" class="formcore-disable-spinner">
	</label>
	<div class="sect-inner-b">
		<span class="creditcarddisplay_type creditcarddisplay_type-visa icon-card-visa">Visa</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-mastercard icon-card-mastercard">Mastercard</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-amex icon-card-amex">AMEX</span>
		<span class="creditcarddisplay_type creditcarddisplay_type-discover icon-card-discover">Discover</span>
	</div>
</div>

Example: US ZIP Code, allows 5 digits


<label class="form-group">
	<span class="label-text">ZIP Code</span>
	<input type="number" data-validate="zip" inputmode="numeric" pattern="[0-9]*" maxlength="5" placeholder="00000" data-numeric-input data-numeric-input-nav-disabled class="formcore-disable-spinner">
</label>

Example: US ZIP Code, allows full 9 digits


<label class="form-group">
	<span class="label-text">ZIP Code</span>
	<input type="number" data-validate="zip" inputmode="numeric" pattern="[0-9]*" maxlength="9" placeholder="00000" data-numeric-input data-numeric-input-nav-disabled data-politespace data-politespace-grouplength="5," data-politespace-delimiter="-" class="formcore-disable-spinner">
</label>

Example: Integer Numeric Input


<label class="form-group">
	<b class="label-text">Number</b>
	<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-validate="numeric" data-formcore-type="numeric">
</label>

<label class="form-group">
	<b class="label-text">Number without Spinner Buttons</b>
	<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-numeric-input-nav-disabled data-validate="numeric" class="formcore-disable-spinner" data-formcore-type="numeric">
</label>

Prices

Example: Price (Full Dollar Amounts) - with spinner


<label class="form-group">
	<span class="label-text">Price ($)</span>
	<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-validate="numeric" data-politespace data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-reverse step="1" data-formcore-type="price-positive">
</label>

Example: Price (Full Dollar Amounts) without Spinner Buttons


<label class="form-group">
	<span class="label-text">Price ($)</span>
	<input type="number" inputmode="numeric" pattern="[0-9]*" data-numeric-input data-validate="numeric" data-politespace data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-reverse data-numeric-input-nav-disabled class="formcore-disable-spinner" data-formcore-type="price-positive">
</label>

In order to reliably allow cross-browser input of decimal places, we cannot use the numeric keyboards for fields that require a decimal place. Numeric keyboards on iOS and Android do not include a key for the decimal place. This requires use of type="text" and omitting pattern="[0-9]*". Add data-numeric-input-float to tell the numeric keypress filter to allow decimal marks.

Example: Price (Dollars and Cents)


<label class="form-group">
	<span class="label-text">Price ($)</span>
	<input type="text" inputmode="numeric" data-numeric-input data-numeric-input-float data-politespace data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-decimal-mark="." data-politespace-reverse data-formcore-type="price-float-positive">
</label>

Example: Price (Full Dollar Amounts, allows Negative)


<label class="form-group">
	<span class="label-text">Price ($)</span>
	<input type="text" inputmode="numeric" data-numeric-input data-numeric-input-negative data-politespace data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-reverse data-formcore-type="price">
</label>

Example: Price (Dollars and Cents, allows Negative)


<label class="form-group">
	<span class="label-text">Price ($)</span>
	<input type="text" inputmode="numeric" data-numeric-input data-numeric-input-float data-numeric-input-negative data-politespace data-politespace-grouplength="3" data-politespace-delimiter="," data-politespace-decimal-mark="." data-politespace-reverse data-formcore-type="price-float">
</label>