<?php
require_once '../lib/Kendo/Autoload.php';

$phone_number = new \Kendo\UI\MaskedTextBox('phone_number');
$phone_number->value("555 123 4567")
             ->mask("(999) 000-0000");

$credit_card = new \Kendo\UI\MaskedTextBox('credit_card');
$credit_card->value("1234 1234 1234 1234")
            ->mask("0000 0000 0000 0000");

$ssn = new \Kendo\UI\MaskedTextBox('ssn');
$ssn->value("003-12-3456")
    ->mask( "000-00-0000");

$postcode = new \Kendo\UI\MaskedTextBox('postcode');
$postcode->value("W1N 1AC")
         ->mask( "L0L 0LL");

?>

<div class="demo-section k-content">
    <ul id="fieldlist">
        <li>
            <label for="phone_number">Phone number:</label>
            <?= $phone_number->render() ?>
        </li>
        <li>
            <label for="credit_card">Credit Card number:</label>
            <?= $credit_card->render() ?>
        </li>
        <li>
            <label for="ssn">Social security number:</label>
            <?= $ssn->render() ?>
        </li>
        <li>
            <label for="postcode">UK postcode:</label>
            <?= $postcode->render() ?>
        </li>
    </ul>
</div>

<style>
    #fieldlist {
        margin: 0 0 -2em;
        padding: 0;
    }

    #fieldlist li {
        list-style: none;
        padding-bottom: 2em;
    }

    #fieldlist label {
        display: block;
        padding-bottom: 1em;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 12px;
        color: #444;
    }

    #fieldlist input {
        width: 100%;
    }
</style>