inputtelurlsearchMenengah3 mnt baca

Input Tel, URL, dan Search

Tiga tipe input yang sering salah pakai: tel untuk keyboard HP, url dengan validasi skema, dan search dengan tombol clear.

Masalahnya: Satu Type untuk Semua Itu Kemalasan

Banyak form menulis semua field sebagai type="text": nomor HP, website, kolom pencarian. Akibatnya pengguna HP tidak dapat keyboard yang tepat, format URL tidak dicek, dan kolom pencarian kehilangan tombol hapus bawaannya. Tiga tipe ini masing-masing memberi bonus gratis yang hilang kalau kamu malas memilih type.

type="tel": Keyboard HP, Bukan Validasi

tel ada untuk satu alasan utama: memunculkan keyboard numerik di HP. Itu saja.

html

<label>Nomor HP:
  <input type="tel" name="hp" placeholder="0812-3456-7890"
         autocomplete="tel" required />
</label>

Fakta yang sering disalahpahami: tel tidak memvalidasi apa pun. Browser menerima "abc" sebagai nomor telepon sah, karena format nomor beda tiap negara dan tidak ada standar global yang bisa dicek. Butuh format spesifik? Tambahkan pattern:

html

<input type="tel" name="hp" placeholder="0812-3456-7890"
       pattern="08[0-9]{8,11}"
       title="Nomor HP diawali 08, 10-13 digit" />

pattern berisi regex yang harus cocok dengan seluruh nilai. Atribut title menjadi pesan petunjuk saat validasi gagal. Kombinasi tel + pattern + title adalah paket lengkap untuk nomor HP Indonesia.

type="url": Validasi Skema

Berbeda dengan tel, url benar-benar memvalidasi: nilainya harus URL absolut yang diawali skema seperti http:// atau https://.

html

<label>Website (opsional):
  <input type="url" name="website" placeholder="https://contoh.com" />
</label>

Isi "contoh.com" lalu submit: ditolak karena tidak ada skemanya. Isi "https://contoh.com": lolos. Ini menjebak pengguna yang terbiasa mengetik domain tanpa skema, jadi placeholder contoh lengkap (https://...) sangat membantu. Di HP, type="url" juga memunculkan keyboard dengan tombol ".", "/", dan ".com" yang praktis.

type="search": Bukan Sekadar Text

Untuk validasi, search sama dengan text: tidak mengecek apa-apa. Bedanya ada di perilaku dan makna:

Beberapa browser menampilkan tombol clear (x) di dalam field untuk menghapus isi sekali klik.
Tombol Enter di keyboard HP sering berlabel "Cari".
Secara semantik, ia memberi tahu browser dan assistive technology bahwa ini kolom pencarian, bukan input teks biasa.

html

<form action="/cari" method="get" role="search">
  <label for="q">Cari artikel:</label>
  <input type="search" id="q" name="q" placeholder="cth: flexbox" />
  <button type="submit">Cari</button>
</form>

Atribut role="search" pada form adalah bonus aksesibilitas: screen reader mengumumkannya sebagai wilayah pencarian sehingga mudah ditemukan.

Contoh Nyata: Form Kontak

Ketiganya sering muncul bersamaan dalam satu form:

html

<form action="/kontak" method="post">
  <h2>Hubungi kami</h2>
  <p>
    <label for="k-hp">Nomor HP:</label><br />
    <input type="tel" id="k-hp" name="hp"
           placeholder="0812-3456-7890"
           pattern="08[0-9]{8,11}"
           title="Nomor HP diawali 08, 10-13 digit"
           autocomplete="tel" required />
  </p>
  <p>
    <label for="k-web">Website (opsional):</label><br />
    <input type="url" id="k-web" name="website"
           placeholder="https://tokomu.com" />
  </p>
  <p>
    <label for="k-cari">Cari FAQ dulu:</label><br />
    <input type="search" id="k-cari" name="q"
           placeholder="cth: jam buka" />
  </p>
  <p><button type="submit">Kirim</button></p>
</form>

Setiap field memakai type yang memberi bonus tepat: keyboard numerik plus pola untuk HP, validasi skema untuk website, tombol clear untuk pencarian.

Kesalahan Umum: Salah vs Benar

html

<!-- SALAH: berharap tel memvalidasi format -->
<input type="tel" name="hp" required />
<!-- "abc" lolos! tambahkan pattern kalau butuh format -->

<!-- SALAH: url tanpa contoh skema membingungkan pengguna -->
<input type="url" name="web" placeholder="tokomu.com" />

<!-- BENAR: tel + pattern, url + contoh skema lengkap -->
<input type="tel" name="hp" pattern="08[0-9]{8,11}"
       title="Nomor HP diawali 08" required />
<input type="url" name="web" placeholder="https://tokomu.com" />

Kesalahan lain: type="number" untuk nomor HP (nol di depan hilang, spinner tidak masuk akal untuk nomor telepon), dan search untuk field yang bukan pencarian hanya demi tombol clear-nya.

Catatan teknis: Kalau kamu butuh keyboard numerik tanpa semantik telepon (misalnya kode OTP), pakai inputmode="numeric" pada type="text". inputmode mengontrol keyboard HP tanpa mengubah validasi atau makna field, jadi ia pelengkap yang fleksibel untuk kasus khusus.

Rangkuman

tel untuk keyboard HP (tambah pattern kalau butuh format), url untuk validasi skema otomatis (beri contoh https:// di placeholder), search untuk kolom pencarian dengan tombol clear dan makna semantik. Tiga atribut, nol JavaScript.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Daftar Reseller

Buat form pendaftaran reseller: nama (text), nomor HP (tel + pattern 08..., required), website toko (url, opsional), dan satu kolom search 'cari kode referral' di atas form. Coba submit nomor HP 'abc' untuk membuktikan tel butuh pattern. Type yang tepat membuat form terasa profesional tanpa JavaScript.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Reseller</title>
</head>
<body>
  <h1>Daftar Reseller</h1>
  <!-- search referral di sini -->
  <form action="/reseller" method="post">
    <!-- nama, hp, website di sini -->
  </form>
</body>
</html>

Open Sandbox