Blog Belajar HTML: Input type tel HTML5

Input type tel khusus digunakan untuk memasukkan data nomor telepon.

Deskripsi
Nomor telepon identik dengan kode area, misalnya untuk kota Padang menggunakan 0751, sedangkan di Jakarta menggunakan 021. Contoh lain nomor ponsel diawali dengan 4 angka menandakan kode kartu provider, misalnya 0853 untuk kartu AS, 0819 untuk kartu XL. Dengan ini ditarik kesimpulan nomor telepon dan ponsel memiliki format masing-masing.

Type tel
Untuk memvalidasi nomor telepon dan ponsel yang dimasukkan pengguna maka gunakanlah atribut tel. Anda dapat menentukan format sesuai keinginan.

Format
Dari penjelasan di awal kita menarik kesimpulan untuk nomor telepon formatnya: (9999)-9999999 sementara untuk nomor ponsel (9999)-9999999. Contohnya: (0751)-6294613, untuk nomor ponsel (0853)-56972846.

Sintak
<input type="tel" pattern="pattern" name="name" required />
pattern diganti dengan pattern menggunakan Regular Expresion (RegEx). Name merupakan nama variabel input type, misalnya telepon.

Pattern
Untuk nomor telepon dengan format (9999)-9999999 adalah: \(\d\d\d\d\)-\d\d\d\d\d\d\d, sedangkan untuk nomor ponsel dengan format (9999)-9999999 adalah: \(\d\d\d\d\)-\d\d\d\d\d\d\d\d. Huruf d artinya allow digit (hanya menerim angka).

Contoh: typetel.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Input type tel html5</title>
        </head>
    <body>
<form action="" method="POST">
<label>Nomor Telepon</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d" name="telepon" placeholder="(999)-99999999" required />

<br /><br />
<label>Nomor Ponsel</label>
<input type="tel" pattern="\(\d\d\d\d\)-\d\d\d\d\d\d\d\d" name="ponsel" placeholder="(9999)-999999999" required />
        <button type="submit">Oke</button>
    </form>
    </body>
</html>