Tutorial HTML / Memilih jenis input untuk email, angka, tanggal, dan pilihan

Tutorial HTML

Dibuat 2026-11-02 Terakhir Diubah 2026-11-02

Jenis type dari input memberi tahu browser jenis nilai atau pilihan apa yang diwakili oleh bidang tersebut. Alamat email, jumlah, nilai tanggal, kotak centang, dan tombol opsi memiliki perilaku yang berbeda. Pilih jenis berdasarkan data dan keputusan yang harus dibuat pengguna, bukan hanya berdasarkan tampilan visual.

Tetapkan jenis ke nilai

<form method="get">
  <p><label for="email">Alamat E-Mail</label>
     <input id="email" name="email" type="email"></p>
  <p><label for="quantity">Jumlah</label>
     <input id="quantity" name="quantity" type="number" min="1"></p>
  <p><label for="visit-date">Tanggal Kunjungan</label>
     <input id="visit-date" name="date" type="date"></p>
  <button type="submit">Periksa</button>
</form>

Simpan contoh dalam file HTML dan uji setiap bidang. email dapat memberikan validasi dasar untuk format alamat dan antarmuka input yang sesuai pada beberapa perangkat. number dapat menetapkan nilai minimum bersama dengan min; kontrol terlihat untuk date tergantung pada browser dan sistem operasi. Server harus selalu memeriksa apakah tanggal yang dikirimkan valid untuk tujuan aplikasi.

Sebuah jumlah adalah angka yang dapat Anda gunakan untuk perhitungan, tetapi kode pos dapat memiliki nol di depan dan nomor telepon dapat menyertakan kode negara atau tanda baca. Gunakan text atau tel untuk nilai semacam itu daripada number. Tanyakan apakah nilainya merupakan jumlah numerik, bukan hanya apakah mengandung digit.

Kotak centang atau tombol opsi?

Pilih kotak centang untuk keputusan Ya/Tidak yang independen atau beberapa pilihan independen. Pilih tombol opsi dengan name yang sama jika hanya satu opsi dari sebuah grup yang dapat dipilih. Bandingkan penamaan grup dengan contoh fieldset dan legend dalam artikel Membuat Formulir dengan fieldset, legend, dan autocomplete yang mudah dipahami.

<fieldset>
  <legend>Pembaruan</legend>
  <label><input type="checkbox" name="news" value="yes"> Terima berita</label>
</fieldset>
<fieldset>
  <legend>Cara kontak yang disukai</legend>
  <label><input type="radio" name="contact" value="email"> Alamat E-Mail</label>
  <label><input type="radio" name="contact" value="phone"> Telepon</label>
</fieldset>

Input radio berbagi name="contact", oleh karena itu memilih satu opsi akan membatalkan pilihan opsi lain. value adalah nilai yang dikirimkan, yang tidak harus sesuai dengan label yang terlihat. Masukkan grup ini ke dalam form dengan tombol kirim untuk mengujinya: Kotak centang news yang tidak dicentang tidak menyertakan entri dalam data formulir, sementara memilih alamat email contact=email mengirimkannya. Jika aplikasi Anda perlu membedakan antara "Tidak" yang eksplisit dan tidak ada jawaban, buat pilihan ini dan prosesnya secara sadar di sisi server.

Bandingkan antarmuka dengan nilai yang dikirimkan

Jenis	Tujuan	Perhatian
`email`	Sebuah string yang diformat sebagai email	Tidak memeriksa keberadaan kotak surat
`number`	Sebuah jumlah numerik	Rentang, langkah, dan kemungkinan kosong dipisahkan
`date`	Sebuah tanggal	Antarmuka bervariasi menurut lokal; nilainya menggunakan `yyyy-mm-dd` (tahun-bulan-hari)
`checkbox`	Sebuah pilihan independen	Sebuah kotak centang yang tidak dicentang tidak berkontribusi pada entri manapun
radio	Sebuah pilihan dari grup dengan nama yang sama	Sebuah fieldset bersama tidak menggantikan nilai name bersama

Simpan contoh lengkap di visit.html dan gunakan alamat tes name@example.com. Jika grup radio yang diperlukan dibiarkan tanpa jawaban, pengiriman akan diblokir, sedangkan pilihan opsional Berita mengubah daftar data.

<!doctype html>
<html lang="id-ID">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Latihan jenis bidang</title>
</head>
<body>
  <h1>Berlatih dengan permintaan kunjungan</h1>
  <form id="visit-form" method="get">
    <p><label for="visit-email">Alamat E-Mail</label>
      <input id="visit-email" name="email" type="email" required></p>
    <p><label for="visit-day">Tanggal Kunjungan</label>
      <input id="visit-day" name="date" type="date" required></p>
    <p><label for="visit-quantity">Jumlah</label>
      <input id="visit-quantity" name="quantity" type="number" min="1" step="1" value="1"></p>
    <fieldset>
      <legend>Cara kontak</legend>
      <label><input type="radio" name="contact" value="email" required> Alamat E-Mail</label>
      <label><input type="radio" name="contact" value="phone"> Telepon</label>
    </fieldset>
    <p><label><input type="checkbox" name="news" value="yes"> Berita</label></p>
    <button type="submit">Periksa nilai yang dimasukkan</button>
  </form>
</body>
</html>

Pilih sebuah tanggal dan periksa document.getElementById("visit-day").value di konsol. Memilih 20 Mei 2030 akan menghasilkan nilai dalam bentuk 2030-05-20, terlepas dari tampilan kalender yang dilokalkan. Centang dan hapus centang pada Berita kemudian bandingkan daftar entri dengan perintah di bawah.

Array.from(new FormData(document.getElementById("visit-form")).entries())

Format nilai dari sebuah field tanggal di MDN

Periksa lebih dari sekadar tipe

Setiap bidang selalu memerlukan label yang dapat dimengerti dan, jika nilainya akan dikirim, sebuah name. Sebuah bidang type="email" dapat dibiarkan kosong, kecuali jika Anda juga mewajibkan nilai dengan required; format dan kewajiban adalah aturan yang terpisah. Anda dapat menambahkan required ke sekelompok tombol radio jika pemilihan jawaban benar-benar diperlukan. Uji apa yang dikirimkan oleh browser, dan validasikan nilai-nilai penting di server. Referensi untuk elemen input di MDN mencantumkan tipe dan batasan yang didukung. Tipe dan kewajiban, panjang dan jangkauan adalah terpisah; uji batasnya dalam Validasi formulir dengan kewajiban, panjang, dan batas jangkauan.

Tutorial HTML