@include('includes/header_start')

@include('includes/header_end')

                            <!-- Page title -->
                            <ul class="list-inline menu-left mb-0">
                                <li class="list-inline-item">
                                    <button type="button" class="button-menu-mobile open-left waves-effect">
                                        <i class="ion-navicon"></i>
                                    </button>
                                </li>
                                <li class="hide-phone list-inline-item app-search">
                                    <h3 class="page-title">Form Masks</h3>
                                </li>
                            </ul>

                            <div class="clearfix"></div>
                        </nav>

                    </div>
                    <!-- Top Bar End -->

                    <!-- ==================
                         PAGE CONTENT START
                         ================== -->

                    <div class="page-content-wrapper">

                        <div class="container-fluid">

                            <div class="row">
                                <div class="col-12">
                                    <div class="card m-b-20">
                                        <div class="card-body">
            
                                            <h4 class="mt-0 header-title">Input Masks</h4>
                                            <p class="text-muted m-b-30 font-14">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.
                                            </p>
            
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <div class="p-20">
                                                        <form action="#">
                                                            <div class="form-group">
                                                                <label>ISBN 1</label>
                                                                <input type="text" placeholder="" data-mask="999-99-999-9999-9" class="form-control">
                                                                <span class="font-13 text-muted">e.g "999-99-999-9999-9"</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>ISBN 2</label>
                                                                <input type="text" placeholder="" data-mask="999 99 999 9999 9" class="form-control">
                                                                <span class="font-13 text-muted">999 99 999 9999 9</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>ISBN 3</label>
                                                                <input type="text" placeholder="" data-mask="999/99/999/9999/9" class="form-control">
                                                                <span class="font-13 text-muted">999/99/999/9999/9</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>IPV4</label>
                                                                <input type="text" placeholder="" data-mask="999.999.999.9999" class="form-control">
                                                                <span class="font-13 text-muted">192.168.110.310</span>
                                                            </div>
                                                            <div class="form-group m-b-0">
                                                                <label>IPV6</label>
                                                                <input type="text" placeholder="" data-mask="9999:9999:9999:9:999:9999:9999:9999" class="form-control">
                                                                <span class="font-13 text-muted">4deg:1340:6547:2:540:h8je:ve73:98pd</span>
                                                            </div>
            
                                                        </form>
                                                    </div>
                                                </div>
            
                                                <div class="col-md-6">
                                                    <div class="p-20">
                                                        <form action="#">
            
                                                            <div class="form-group">
                                                                <label>Tax ID</label>
                                                                <input type="text" placeholder="" data-mask="99-9999999" class="form-control">
                                                                <span class="font-13 text-muted">99-9999999</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>Phone</label>
                                                                <input type="text" placeholder="" data-mask="(999) 999-9999" class="form-control">
                                                                <span class="font-13 text-muted">(999) 999-9999</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>Currency</label>
                                                                <input type="text" placeholder="" data-mask="$ 999,999,999.99" class="form-control">
                                                                <span class="font-13 text-muted">$ 999,999,999.99</span>
                                                            </div>
                                                            <div class="form-group">
                                                                <label>Date</label>
                                                                <input type="text" placeholder="" data-mask="99/99/9999" class="form-control">
                                                                <span class="font-13 text-muted">dd/mm/yyyy</span>
                                                            </div>
                                                            <div class="form-group m-b-0">
                                                                <label>Date 2</label>
                                                                <input type="text" placeholder="" data-mask="99-99-9999" class="form-control">
                                                                <span class="font-13 text-muted">dd-mm-yyyy</span>
                                                            </div>
            
                                                        </form>
                                                    </div>
                                                </div> <!-- end col -->
                                            </div> <!-- end row -->
            
                                        </div>
                                    </div>
                                </div> <!-- end col -->
                            </div>
                            <!-- end row -->
            

                        </div><!-- container -->

                    </div> <!-- Page content Wrapper -->

                </div> <!-- content -->

@include('includes/footer_start')

        <!-- Bootstrap inputmask js -->
        <script src="assets/plugins/bootstrap-inputmask/bootstrap-inputmask.min.js" type="text/javascript"></script>

@include('includes/footer_end')