Form Masked Inputs

<!-- Phone Number -->
<div class="fancy-form"><!-- input -->
<i class="fa fa-phone-square"></i>

<!-- replace here any input from below if you want fancy style (icon + tooltip) -->
<input type="text" class="form-control masked" data-format="(999) 999-999999" data-placeholder="X" placeholder="Enter telephone">

<span class="fancy-tooltip top-left"> <!-- positions: .top-left | .top-right -->
	<em>Type Your Phone Number</em>
</span>
</div>


<!--Phone + Optional Extention -->
<input type="text" class="form-control masked" data-format="(+999) 999-9999? 99999" data-placeholder="X" placeholder="Enter telephone">


<!--Zip code -->
<input type="text" class="form-control masked" data-format="99999" data-placeholder="X" placeholder="Zip code">


<!--Date Format #1 -->
<input type="text" class="form-control masked" data-format="99/99/9999" data-placeholder="_" placeholder="DD/MM/YYYY">


<!--Date Format #2 -->
<input type="text" class="form-control masked" data-format="99-99-9999" data-placeholder="_" placeholder="DD-MM-YYYY">


<!--Time -->
<input type="text" class="form-control masked" data-format="99:99:99" data-placeholder="_" placeholder="00:00:00">


<!--Date + Time -->
<input type="text" class="form-control masked" data-format="99/99/9999 99:99:99" data-placeholder="_" placeholder="DD/MM/YYYY 00:00:00">


<!--IPV4 -->
<input type="text" class="form-control masked" data-format="999.999.999.999" data-placeholder="_" placeholder="192.168.1.1">


<!--IPV6 -->
<input type="text" class="form-control masked" data-format="9999:9999:9999:9:999:9999:9999:9999" data-placeholder="_" placeholder="9999:9999:9999:9:999:9999:9999:9999">


<!--Money / Currency -->
<input type="text" class="form-control masked" data-format="999,999,999,999,999.99" data-placeholder="_" placeholder="000,000,000,000,000.00">


<!--ISBN 1 -->
<input type="text" class="form-control masked" data-format="999-99-999-9999-9" data-placeholder="_" placeholder="999-99-999-9999-9">


<!--ISBN 2 -->
<input type="text" class="form-control masked" data-format="999 99 999 9999 9" data-placeholder="_" placeholder="999 99 999 9999 9">


<!--TAX IS -->
<input type="text" class="form-control masked" data-format="99-9999999" data-placeholder="_" placeholder="Tax Id">


<!--Product Serial -->
<input type="text" class="form-control masked" data-format="***-****-****-****" data-placeholder="_" placeholder="Enter product serial">


<!--HEX Color -->
<input type="text" class="form-control masked" data-format="#ffffff" data-placeholder="_" placeholder="Color HEX code">


<!--Alpha Characters -->
<input type="text" class="form-control masked" data-format="aaaaaa-aaaaaa" data-placeholder="X" placeholder="Enter alpha characters">


<!--Product Activation -->
<input type="text" class="form-control masked" data-format="a*-999-a999" data-placeholder="_" placeholder="Enter Product Activation">