brand brand
Apps
Pages
Documentation
Quickly Build Applications

Exclusively for webapps Based on Bootstrap

Go Appster

Form mask

Give your forms some structure—from inline to horizontal to custom grid implementations—with our form layout options.

Form mask

Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.

(999) 999-9999
dd/mm/yyyy
e.g "999-99-9999"
+40 999 999 999
e.g a*-999-a999
$ 999,999,999.99
dd-mm-yyyy
~9.99 ~9.99 999
e.g "99%"
e.g "999.999.999.9999" 
														
<form action="#">
	<div class="form-group">
		<label class="form-label">Phone</label>
		<input type="text" placeholder="" data-mask="(999) 999-9999" class="form-control">
		<span class="form-text text-muted">(999) 999-9999</span>
	</div>
	<div class="form-group">
		<label class="form-label">Date</label>
		<input type="text" placeholder="" data-mask="99/99/9999" class="form-control">
		<span class="form-text text-muted">dd/mm/yyyy</span>
	</div>
	<div class="form-group">
		<label class="form-label">SSN field 1</label>
		<input type="text" placeholder="" data-mask="999-99-9999" class="form-control">
		<span class="form-text text-muted">e.g "999-99-9999"</span>
	</div>
	<div class="form-group">
		<label class="form-label">Phone field + ext.</label>
		<input type="text" placeholder="" data-mask="+40 999 999 999" class="form-control">
		<span class="form-text text-muted">+40 999 999 999</span>
	</div>
	<div class="form-group">
		<label class="form-label">Product Key</label>
		<input type="text" placeholder="" data-mask="a*-999-a999" class="form-control">
		<span class="form-text text-muted">e.g a*-999-a999</span>
	</div>
	<div class="form-group">
		<label class="form-label">Currency</label>
		<input type="text" placeholder="" data-mask="$ 999,999,999.99" class="form-control">
		<span class="form-text text-muted">$ 999,999,999.99</span>
	</div>
	<div class="form-group">
		<label class="form-label">Date 2</label>
		<input type="text" placeholder="" data-mask="99-99-9999" class="form-control">
		<span class="form-text text-muted">dd-mm-yyyy</span>
	</div>
	<div class="form-group">
		<label class="form-label">Eye Script</label>
		<input type="text" placeholder="" data-mask="~9.99 ~9.99 999" class="form-control">
		<span class="form-text text-muted">~9.99 ~9.99 999</span>
	</div>
	<div class="form-group">
		<label class="form-label">Percent</label>
		<input type="text" placeholder="" data-mask="99%" class="form-control">
		<span class="form-text text-muted">e.g "99%"</span>
	</div>
	<div class="form-group mb-0">
		<label class="form-label">Pc Ip</label>
		<input type="text" placeholder="" data-mask="999.999.999.9999" class="form-control">
		<span class="form-text text-muted">e.g "999.999.999.9999"</span>
	</div>
</form>
Name Values description
data-mask="[value]" (999) 999-9999 / ... / Actives the data mask 
														
<!-- Jasny-bootstrap  JavaScript -->
<script src="vendors/jasny-bootstrap/dist/js/jasny-bootstrap.min.js"></script>