<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>
<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>
<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>
<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>
<label class="form-group"> <b class="label-text">Profile Photo</b> <input type="file"> </label>
<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>
<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>
<label class="form-group"> <b class="label-text">Email</b> <input type="email" data-validate="email" autocorrect="off" autocapitalize="none" spellcheck="false"> </label>
<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>
We accept:
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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.
type="text"
pattern="[0-9]*"
data-numeric-input-float
<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>
<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>
<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>