Dokumentasi HTML interaktif: Tipe Input

Q: Ada berapa type input di HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url dan week. Type yang tidak dikenal atau tidak ditulis berperilaku sebagai text.

Q: Apa type input default di HTML?

text. tanpa type, atau dengan type yang tidak dikenal browser, adalah field teks satu baris.

Q: Sebaiknya pakai type="number" untuk nomor telepon atau kode pos?

Tidak. number adalah untuk jumlah: type ini menambahkan tombol putar, dan menolak +, spasi, dan tanda hubung yang ada di nomor telepon. Pakai type="tel" untuk nomor telepon, dan type="text" dengan inputmode="numeric" untuk kode seperti kode pos dan nomor kartu.

Q: Format apa yang dipakai input type date?

Nilainya selalu YYYY-MM-DD, seperti 2026-09-24, apa pun format yang dilihat pembaca di layar. Tampilannya mengikuti locale pembaca; nilai yang dikirim dan dibaca script tidak.

Q: Apakah tag input butuh tag penutup?

Tidak. adalah elemen void: tulis . Tag penutup tidak valid, dan garis miring penutup di diperbolehkan tapi tidak berpengaruh apa-apa.

Tag input dan type-nya

<input> adalah field form, dan atribut type-nya menentukan jenisnya. Tag yang sama bisa membuat kotak teks, slider, pemilih tanggal, atau pemilih warna. Coba setiap field di bawah ini lalu tekan Submit untuk melihat apa yang dikirim form:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Input types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: grid; grid-template-columns: 90px auto; align-items: center; gap: 8px; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>text <input type="text" name="text" value="Hello"></label>
    <label>email <input type="email" name="email" value="ada@example.com"></label>
    <label>password <input type="password" name="password" value="secret"></label>
    <label>number <input type="number" name="number" value="3" min="1" max="10"></label>
    <label>range <input type="range" name="range" min="0" max="100" value="40"></label>
    <label>date <input type="date" name="date" value="2026-09-24"></label>
    <label>color <input type="color" name="color" value="#2563eb"></label>
    <label>checkbox <input type="checkbox" name="checkbox" value="on" checked></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

<input> adalah elemen void, jadi tidak punya tag penutup. name-nya adalah kunci yang dipakai untuk mengirim nilainya, dan value adalah nilai awalnya. type yang tidak ditulis atau salah ketik menghasilkan field teks biasa.

Semua type input HTML

`type`	Apa itu	Catatan
`text`	Satu baris teks	Default-nya
`password`	Teks yang ditampilkan sebagai titik	Tidak terenkripsi dengan sendirinya; kirim lewat HTTPS
`email`	Alamat email	Memvalidasi format; tombol `@` di keyboard ponsel
`url`	Alamat web	Harus diawali skema seperti `https://`
`tel`	Nomor telepon	Keypad telepon di ponsel, tanpa pemeriksaan format
`search`	Kotak pencarian	Sering menampilkan tombol hapus
`number`	Angka	Tombol putar, `min`, `max`, `step`
`range`	Slider	Memang tidak presisi; nilainya berupa angka
`date`	Tanggal	Nilainya `YYYY-MM-DD`
`time`	Jam	Nilainya `HH:MM` (format 24 jam)
`datetime-local`	Tanggal dan jam, tanpa zona waktu	Nilainya `YYYY-MM-DDTHH:MM`
`month`	Tahun dan bulan	Tidak didukung di semua browser
`week`	Tahun dan nomor minggu	Tidak didukung di semua browser
`color`	Pemilih warna	Nilainya `#rrggbb` dalam huruf kecil
`checkbox`	Kotak nyala/mati	Lihat checkbox HTML
`radio`	Satu pilihan dari sebuah grup	Lihat radio button HTML
`file`	Pemilih file	`accept`, `multiple`
`hidden`	Nilai yang dikirim tapi tidak ditampilkan	Untuk ID dan token
`submit`	Tombol submit	`<button type="submit">` lebih fleksibel
`reset`	Tombol reset	Jarang menjadi ide yang baik
`button`	Tombol yang tidak melakukan apa pun dengan sendirinya	Untuk JavaScript
`image`	Tombol submit yang digambar sebagai gambar	Juga mengirim koordinat klik

Type teks dan keyboard ponsel

email, url, tel, search dan text semuanya terlihat seperti kotak teks di desktop. Perbedaannya ada di validasi dan, di ponsel, keyboard mana yang terbuka. Border di contoh ini berubah hijau atau merah sesuai penilaian browser terhadap nilainya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text types</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    input { display: block; font: inherit; margin-top: 4px; padding: 4px 8px; border: 2px solid #9ca3af; border-radius: 6px; }
    input:valid { border-color: #16a34a; }
    input:invalid { border-color: #dc2626; }
  </style>
</head>
<body>
  <form>
    <label>email <input type="email" name="email" value="ada@example"></label>
    <label>url <input type="url" name="site" value="example.com"></label>
    <label>tel <input type="tel" name="phone" value="+1 555 0100"></label>
    <label>text with inputmode="numeric" <input type="text" name="zip" inputmode="numeric" pattern="[0-9]{5}" value="02134"></label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

ada@example adalah email yang valid bagi browser: browser hanya memeriksa ada teks, @, dan domain, bukan apakah domainnya punya titik. Pemeriksaan sungguhan terjadi di server.
example.com bukan url yang valid, karena tidak punya skema. https://example.com valid.
tel menerima apa saja. Format nomor telepon terlalu berbeda antar negara, jadi tidak ada pemeriksaan bawaan; tambahkan pattern kalau kamu butuh.
inputmode="numeric" meminta ponsel menampilkan keyboard angka tanpa masalah yang dimiliki type="number", itulah kenapa ini pilihan yang tepat untuk kode pos, kode sekali pakai, dan nomor kartu.

number dan range

Keduanya menerima min, max dan step. number untuk nilai yang pasti; range adalah slider untuk nilai yang angka pastinya kurang penting. Slider range tidak menampilkan angka, jadi pasangkan dengan <output>:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>number and range</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
  </style>
</head>
<body>
  <form>
    <label>Tickets
      <input type="number" name="tickets" min="1" max="8" step="1" value="2">
    </label>
    <label>Price per kg
      <input type="number" name="price" min="0" step="0.01" value="4.99">
    </label>
    <label>Volume
      <input type="range" name="volume" id="volume" min="0" max="100" step="5" value="60">
      <output for="volume" id="shown">60</output>
    </label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const volume = document.querySelector('#volume');
    volume.addEventListener('input', () => {
      document.querySelector('#shown').textContent = volume.value;
    });
  </script>
</body>
</html>

step default-nya 1 untuk number, jadi field harga tanpa step="0.01" akan menolak 4.99 saat form dikirim. Di JavaScript, input.value selalu berupa string; pakai input.valueAsNumber untuk mendapatkan angka.

Tanggal dan jam

Type tanggal dan jam membuka pemilih bawaan browser. Yang dilihat pembaca mengikuti locale mereka (09/24/2026, 24.09.2026), tapi nilainya selalu dalam format tetap yang sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Date and time</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 10px; }
    code { background: #e5e7eb; padding: 2px 6px; }
  </style>
</head>
<body>
  <form>
    <label>date <input type="date" name="date" value="2026-09-24" min="2026-01-01"></label>
    <label>time <input type="time" name="time" value="14:30"></label>
    <label>datetime-local <input type="datetime-local" name="when" value="2026-09-24T14:30"></label>
  </form>
  <p>Values: <code id="out"></code></p>

  <script>
    const form = document.querySelector('form');
    const show = () => {
      document.querySelector('#out').textContent =
        [...form.elements].map((f) => f.value).join('  |  ');
    };
    form.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Format tetap itulah yang diterima server dan dibaca JavaScript, jadi kamu tidak perlu mem-parse "24.09.2026". min dan max memakai format yang sama. datetime-local tidak punya zona waktu: kalau zona waktu penting, konversikan di server dengan zona waktu pembaca.

color dan file

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>color and file</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 12px; }
    #swatch { display: inline-block; width: 60px; height: 24px; border-radius: 4px; vertical-align: middle; }
  </style>
</head>
<body>
  <form>
    <label>Theme color <input type="color" name="color" id="color" value="#16a34a"></label>
    <p>Preview: <span id="swatch"></span></p>
    <label>Photos <input type="file" name="photos" accept="image/*" multiple></label>
    <button type="submit">Submit</button>
  </form>

  <script>
    const color = document.querySelector('#color');
    const paint = () => { document.querySelector('#swatch').style.background = color.value; };
    color.addEventListener('input', paint);
    paint();
  </script>
</body>
</html>

accept="image/*" membatasi pemilih file hanya untuk gambar (dan menawarkan kamera di ponsel); atribut ini juga menerima ekstensi, seperti accept=".pdf,.docx". Ini hanya petunjuk untuk pemilih file, jadi periksa tipe file-nya di server. multiple mengizinkan beberapa file. Upload sungguhan juga butuh method="post" dan enctype="multipart/form-data" di form.

Saran dengan datalist

<datalist> memberi field teks daftar saran sambil tetap mengizinkan nilai apa pun. Hubungkan keduanya dengan atribut list:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datalist</title>
</head>
<body>
  <form>
    <label>Language
      <input name="language" list="languages" placeholder="Start typing">
    </label>
    <datalist id="languages">
      <option value="JavaScript"></option>
      <option value="Python"></option>
      <option value="Java"></option>
      <option value="Rust"></option>
    </datalist>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Ketik "ja" di field untuk melihat saran yang cocok. Berbeda dengan select, pembaca bisa mengetik nilai yang tidak ada di daftar.

Atribut yang berlaku di input

Atribut	Fungsinya
`name`	Kunci yang dipakai untuk mengirim nilai
`value`	Nilai awal
`placeholder`	Petunjuk yang muncul saat field kosong (bukan label)
`required`	Harus diisi sebelum dikirim
`disabled`	Tidak bisa dipakai, dan tidak dikirim
`readonly`	Tidak bisa diedit, tapi tetap dikirim
`autocomplete`	Apa yang diisi otomatis: `email`, `name`, `current-password`, `one-time-code`, `off`
`min`, `max`, `step`	Batas untuk angka, range, tanggal, dan jam
`minlength`, `maxlength`	Batas panjang untuk type teks
`pattern`	Regular expression yang harus cocok dengan seluruh nilai
`inputmode`	Keyboard ponsel yang ditampilkan: `numeric`, `decimal`, `email`, `tel`, `url`
`list`	`id` dari sebuah `<datalist>`
`multiple`	Beberapa nilai, untuk `email` dan `file`
`accept`	Tipe file untuk `file`

Kesalahan umum

type="number" untuk nomor telepon, kode pos, atau nomor kartu. Semua itu bukan jumlah. Pakai tel atau text dengan inputmode="numeric".
Field harga tanpa step="0.01". Nilai desimal gagal divalidasi.
Memakai placeholder sebagai label. Placeholder hilang begitu pembaca mengetik.
Mengandalkan accept atau type="email" untuk keamanan. Keduanya hanya untuk kenyamanan; server memeriksa lagi.
type="month" atau type="week" tanpa fallback. Beberapa browser menampilkan field teks biasa.
Tag penutup </input>. <input> adalah elemen void.

Pertanyaan yang sering diajukan

Ada berapa type input di HTML?

22: button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url dan week. Type yang tidak dikenal atau tidak ditulis berperilaku sebagai text.

Apa type input default di HTML?

text. <input> tanpa type, atau dengan type yang tidak dikenal browser, adalah field teks satu baris.

Sebaiknya pakai type="number" untuk nomor telepon atau kode pos?

Tidak. number adalah untuk jumlah: type ini menambahkan tombol putar, dan menolak +, spasi, dan tanda hubung yang ada di nomor telepon. Pakai type="tel" untuk nomor telepon, dan type="text" dengan inputmode="numeric" untuk kode seperti kode pos dan nomor kartu.

Format apa yang dipakai input type date?

Nilainya selalu YYYY-MM-DD, seperti 2026-09-24, apa pun format yang dilihat pembaca di layar. Tampilannya mengikuti locale pembaca; nilai yang dikirim dan dibaca script tidak.

Apakah tag input butuh tag penutup?

Tidak. <input> adalah elemen void: tulis <input type="text" name="city">. Tag penutup </input> tidak valid, dan garis miring penutup di <input /> diperbolehkan tapi tidak berpengaruh apa-apa.

Konsep terkait

Tipe Input HTML: Semua 22 Type dari Tag input