Email, URL, dan Number Input

input type="text" menerima ketikan apa pun, padahal banyak data punya bentuk yang pasti: alamat email selalu memuat tanda @, alamat situs selalu berawalan skema, dan jumlah barang selalu berupa angka. HTML menyediakan tiga jenis input berformat untuk kasus tersebut — email, url, dan number. Ketiganya tetap satu baris seperti text, tetapi membawa aturan format, tombol bantu, dan keyboard khusus di perangkat genggam.

input type=“email” #

input type="email" menerima satu alamat email, dan browser memeriksa formatnya ketika form dikirim: nilai kosong diterima, sedangkan teks yang tidak menyerupai format email ditolak dengan pesan bawaan browser. Di perangkat genggam, keyboard yang muncul umumnya menampilkan tombol @ dan titik, sehingga pengunjung tidak perlu berpindah tata letak keyboard untuk menulis alamat.

Atribut multiple mengubah kontrol ini menjadi penerima daftar: pengunjung boleh menulis beberapa alamat yang dipisah tanda koma, dan browser memeriksa setiap alamat pada daftar tersebut. Kontrolnya pun tampil lebih lebar agar daftar alamat muat terbaca.

input type=“url” #

input type="url" menerima alamat situs dan diperiksa browser dengan aturan yang serupa: nilai kosong diterima, sedangkan teks yang bukan URL absolut — yakni yang tidak mencantumkan skema di awal — ditolak saat form dikirim. Perhatikan bahwa pemeriksaan hanya menilai bentuk, bukan keberadaan situs; alamat lengkap dengan skema dan nama domain akan lolos meskipun situsnya tidak pernah ada. Keyboard perangkat genggam pun menyesuaikan diri dengan menyediakan tombol bantu seperti garis miring dan titik.

input type=“number” #

input type="number" membatasi masukan pada angka dan menampilkan panah naik-turun di sisi kanan kolom. Tiga atribut menyusun batasannya:

• min: nilai terkecil yang diterima.
• max: nilai terbesar yang diterima.
• step: kelipatan yang diizinkan, dengan nilai bawaan 1; nilai any melepas batas kelipatan.

Contoh min="1" max="40" step="1" menghasilkan kontrol penerima bilangan bulat 1 sampai 40, dan panah naik-turun melangkah sebesar kelipatan step. Pemeriksaan min, max, dan step adalah bagian dari validasi batasan; kita cukup mengenalnya di sini, karena section Form Validation membedah seluruh mekanismenya.

Dua Jenis Pendamping: tel dan search #

Dua jenis input lain melengkapi keluarga teks satu baris ini. Keduanya tidak menuntut format tertentu, tetapi keduanya membawa manfaat tersendiri:

tel sengaja bebas aturan format, karena bentuk nomor telepon berbeda-beda antar negara; pemisahan tanda hubung dan kode area menjadi urusan pola validasi pada section berikutnya.

Contoh: Form Kontak #

Toko Budi membuka form kontak untuk penawaran pelatihan masak. Simpan file berikut sebagai form-kontak.html, lalu buka di browser:

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Kontak Toko Budi</title>
</head>
<body>
  <h1>Hubungi Toko Budi</h1>
  <form>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="telepon">Nomor telepon</label>
      <input type="tel" id="telepon" name="telepon">
    </p>
    <p>
      <label for="situs">Alamat situs</label>
      <input type="url" id="situs" name="situs">
    </p>
    <p>
      <label for="peserta">Estimasi jumlah peserta</label>
      <input type="number" id="peserta" name="peserta" min="1" max="40" step="1">
    </p>
    <p>
      <input type="submit" value="Kirim">
    </p>
  </form>
</body>
</html>

Output yang Dihasilkan:

Jendela browser menampilkan:
  - Empat kolom isian: Email, Nomor telepon, Alamat situs,
    dan Estimasi jumlah peserta
  - Kolom jumlah peserta dilengkapi panah naik-turun
  - Tombol "Kirim" di bagian bawah

Berikut peran setiap bagian kode:

1. Baris 13 (input type="email"): menerima alamat email dan diperiksa formatnya saat submit.
2. Baris 17 (input type="tel"): menerima nomor telepon dengan keyboard dial di perangkat genggam.
3. Baris 21 (input type="url"): menerima URL absolut beserta skema.
4. Baris 25 (input type="number"): menerima bilangan bulat 1-40 berkat kombinasi min, max, dan step.
5. Baris 28 (input type="submit"): tombol yang memicu pengiriman dan pemeriksaan format.

Ketiga jenis input berformat di atas menghemat langkah pengunjung sekaligus menyaring data sejak sisi browser. Chapter berikutnya beralih dari isian bebas ke pilihan tertutup: checkbox untuk pilihan mandiri dan radio untuk memilih satu dari sekelompok opsi.

Referensi resmi untuk pendalaman:

• MDN Web Docs — input type=“email”
• MDN Web Docs — input type=“url”
• MDN Web Docs — input type=“number”
• MDN Web Docs — Elemen input

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Kontak Toko Budi</title>
</head>
<body>
  <h1>Hubungi Toko Budi</h1>
  <form>
    <p>
      <label for="email">Email</label>
      <input type="email" id="email" name="email">
    </p>
    <p>
      <label for="telepon">Nomor telepon</label>
      <input type="tel" id="telepon" name="telepon">
    </p>
    <p>
      <label for="situs">Alamat situs</label>
      <input type="url" id="situs" name="situs">
    </p>
    <p>
      <label for="peserta">Estimasi jumlah peserta</label>
      <input type="number" id="peserta" name="peserta" min="1" max="40" step="1">
    </p>
    <p>
      <input type="submit" value="Kirim">
    </p>
  </form>
</body>
</html>