Tipe Input

Atribut type pada elemen input menetapkan bentuk kontrol, cara datanya divalidasi, dan papan ketik yang muncul di perangkat sentuh. Elemen input tanpa type berperilaku sebagai text, tetapi menyebutkan tipenya secara eksplisit memberi browser kesempatan menyesuaikan kontrol dan pemeriksaannya. Topik ini membahas tipe text beserta turunannya, number, date, color, dan file, lengkap dengan atribut pendamping seperti min, max, step, accept, dan multiple. Setelah membacanya, pemilihan tipe dapat disesuaikan dengan jenis data yang diminta, bukan sekadar mengandalkan text untuk segala hal.

Tipe menentukan kontrol dan papan ketik#

Browser memperlakukan setiap tipe input sebagai kontrak yang menentukan tiga hal sekaligus. Pertama, bentuk kontrolnya berubah, misalnya pemilih tanggal untuk date dan pemilih warna untuk color. Kedua, validasi bawaan ikut berubah, karena tipe email menolak teks tanpa tanda @ saat formulir dikirim. Ketiga, papan ketik pada perangkat sentuh menyesuaikan diri, misalnya baris angka dan tanda @ lebih dahulu pada papan ketik email.

Penyesuaian papan ketik ini menjadi keuntungan nyata bagi pengguna ponsel, karena tanda @ atau angka dapat dicapai tanpa berpindah tata letak papan ketik secara manual. Apabila kebutuhannya hanya papan ketik angka tanpa makna validasi, atribut inputmode dapat digunakan terpisah pada input type="text". Pemisahan ini penting untuk kasus seperti kode pos, karena nilainya berisi angka tetapi tidak boleh kehilangan angka nol di depannya apabila diperlakukan sebagai bilangan.

Tipe teks dan turunannya#

Tipe text adalah kontrol satu baris untuk masukan bebas, sedangkan tipe lain mengambil bentuk dasar yang sama dengan perilaku tambahan. Tipe email menuntut format alamat surel yang wajar dan mendukung atribut multiple untuk menerima lebih dari satu alamat yang dipisahkan koma. Tipe url menuntut teks yang dimulai dengan skema, misalnya https://. Tipe tel menerima pola nomor telepon apa pun tanpa validasi format, karena aturan nomor telepon berbeda-beda antarnegara, tetapi papan ketiknya tetap menonjolkan angka. Tipe search berperilaku seperti text dengan penyesuaian tampilan khas kotak pencarian pada sebagian browser.

<p>
  <label for="surel">Surel</label>
  <input id="surel" name="surel" type="email">
</p>
<p>
  <label for="situs">Situs dokumentasi</label>
  <input id="situs" name="situs" type="url">
</p>
<p>
  <label for="telepon">Telepon</label>
  <input id="telepon" name="telepon" type="tel">
</p>
<p>
  <label for="cari">Cari alat</label>
  <input id="cari" name="cari" type="search">
</p>

Ketika formulir dikirim, email dan url memeriksa formatnya secara otomatis dan menolak pengiriman dengan pesan error bawaan bila formatnya tidak sesuai. Pemeriksaan ini bersifat pengantar, bukan jaminan kebenaran alamat, sehingga pemeriksaan di server tetap diperlukan untuk data yang benar-benar penting. Atribut multiple pada tipe email melonggarkan pemeriksaannya menjadi menerima beberapa alamat sekaligus yang dipisahkan tanda koma. Tipe tel dan search tidak menambahkan pemeriksaan apa pun, sehingga keduanya murni memengaruhi bentuk kontrol dan papan ketiknya.

Tipe number beserta min, max, dan step#

Tipe number menampilkan kontrol angka dengan tombol naik-turun pada sebagian browser dan papan ketik angka pada perangkat sentuh. Tiga atribut membatasi nilainya. Atribut min menetapkan batas bawah, max menetapkan batas atas, dan step menetapkan kelipatan yang diizinkan, dengan bawaan 1. Formulir akan menolak pengiriman apabila nilai berada di luar batas atau bukan kelipatan dari step.

<p>
  <label for="jumlah">Jumlah unit (5 sampai 40)</label>
  <input id="jumlah" name="jumlah" type="number" min="5" max="40" step="5">
</p>

Pada contoh tersebut, nilai 12 ditolak saat pengiriman karena bukan kelipatan lima, sedangkan 15 diterima. Nilai yang dikirim tetap berupa teks, sehingga pengubahan ke bilangan dilakukan di sisi server atau skrip sesuai kebutuhan. Untuk nilai desimal, atribut step menerima nilai seperti 0.01, dan atribut ini juga digunakan bersama tombol naik-turun untuk melompati nilai satu langkah setiap penekanan. Apabila max ditiadakan, batas atasnya tidak ada, dan hal yang sama berlaku sebaliknya untuk min, sehingga tombol naik-turun tetap bekerja di arah yang tersisa.

Tipe date dan color#

Tipe date menampilkan pemilih tanggal bawaan browser, lengkap dengan tampilan kalender pada browser modern. Atribut min dan max berlaku juga di sini dengan format YYYY-MM-DD, dan format penanggalan yang tampil mengikuti setelan bahasa perangkat meskipun nilai yang dikirim selalu berupa 2026-05-04 tanpa perubahan. Perilaku ini berarti tampilan dan nilai pengiriman adalah dua hal terpisah, sehingga pemrosesan data tidak perlu menebak format tanggal lokal.

Tipe color menampilkan pemilih warna dan nilainya selalu berupa kode heksadesimal enam digit seperti #1d4ed8. Kontrol ini paling tepat untuk preferensi tampilan, misalnya warna label rak pada aplikasi catatan, karena pemilih warna sistem sudah menangani pemilihan tingkat detailnya. Sebagian browser mengizinkan pengetikan langsung pada keduanya, tetapi format nilainya tetap diperiksa saat pengiriman. Kedua tipe ini menunjukkan pola umum tipe input, yaitu browser menyediakan kontrol khusus agar pengguna tidak perlu mengetik format yang rawan keliru.

Tipe file beserta accept dan multiple#

Tipe file menampilkan tombol pemilih berkas yang membuka kotak dialog sistem operasi. Atribut accept membatasi jenis berkas yang dapat dipilih, baik lewat ekstensi seperti .png maupun jenis media seperti image/*. Atribut multiple mengizinkan lebih dari satu berkas dalam sekali pemilihan. Tanpa enctype="multipart/form-data" pada formulirnya, isi berkas tidak akan terkirim dengan benar, karena pengodean bawaan tidak dirancang untuk data biner.

<form action="/unggah" method="post" enctype="multipart/form-data">
  <p>
    <label for="bukti">Foto alat (JPG atau PNG)</label>
    <input id="bukti" name="bukti" type="file" accept=".jpg,.jpeg,.png" multiple>
  </p>
  <p><button type="submit">Unggah</button></p>
</form>

Berbeda dari kontrol lain, tipe file tidak mengirimkan isi berkas sebagai teks pada pengiriman, sehingga pembacaan datanya dilakukan lewat skrip atau di server. Pembatasan accept juga hanya menyaring tampilan pemilih berkas, bukan keamanan yang menjamin berkasnya benar-benar sesuai, sehingga pemeriksaan ulang di server tetap menjadi tanggung jawab aplikasi. Dengan multiple, kunci yang terkirim tetap satu nama, tetapi pasangannya muncul sebanyak berkas yang dipilih, dan semuanya menuntut pengodean multipart yang sama.

Tabel perbandingan tipe#

Tabel berikut merangkum tipe yang paling sering digunakan beserta kontrol bawaan dan pemeriksaan otomatisnya. Empat tipe tambahan, yaitu tel, search, url, dan month, mengikuti pola yang sama dan cukup dipelajari melalui dokumentasinya ketika dibutuhkan.

Baris text pada tabel menjadi pembanding yang penting, karena nilai seluruh tipe pada akhirnya juga dikirim sebagai teks. Perbedaannya terletak pada kontrol dan pemeriksaannya, bukan pada bentuk data yang tiba di server. Perhatikan pula bahwa pemeriksaan pada kolom terakhir tidak selalu satu jenis. Pemeriksaan accept pada tipe file hanya menyaring daftar pemilih berkas, dan format warna pada tipe color dijamin oleh kontrolnya sendiri, sedangkan email, number, dan date memeriksa nilai pada saat pengiriman. Baris text tetap menjadi satu-satunya baris yang tidak memiliki pemeriksaan apa pun.

Berkas utuh ragam tipe input#

Berkas berikut menyatukan seluruh tipe pada topik ini ke dalam satu formulir inventaris laboratorium. Setiap kontrol diberi label yang terasosiasi lewat for dan id, dan tipe yang dipilih mengikuti jenis datanya, mulai dari teks bebas sampai unggahan berkas. Formulir ini menggunakan GET agar perubahan setiap kolom terlihat langsung pada URL saat dikirim, padahal unggahan berkas pada aplikasi nyata menuntut POST beserta enctype="multipart/form-data". Penggantian method tersebut menjadi latihan yang tepat setelah bagian unggahan dipahami.

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contoh tipe input</title>
  <style>
    body { font-family: sans-serif; max-width: 34rem; margin: 0 auto; padding: 0 1rem; }
    p { display: flex; flex-direction: column; gap: 0.25rem; }
    input, select { padding: 0.3rem 0.5rem; font-size: 1rem; }
  </style>
</head>
<body>
  <h1>Inventaris laboratorium sekolah</h1>

  <form action="/alat" method="get">
    <p>
      <label for="nama-alat">Nama alat</label>
      <input id="nama-alat" name="nama-alat" type="text">
    </p>
    <p>
      <label for="pencarian">Pencarian cepat</label>
      <input id="pencarian" name="pencarian" type="search">
    </p>
    <p>
      <label for="telepon">Telepon penanggung jawab</label>
      <input id="telepon" name="telepon" type="tel">
    </p>
    <p>
      <label for="situs">Situs dokumentasi alat</label>
      <input id="situs" name="situs" type="url">
    </p>
    <p>
      <label for="surel">Surel pemesanan</label>
      <input id="surel" name="surel" type="email">
    </p>
    <p>
      <label for="jumlah">Jumlah unit (5 sampai 40)</label>
      <input id="jumlah" name="jumlah" type="number" min="5" max="40" step="5">
    </p>
    <p>
      <label for="kalibrasi">Tanggal kalibrasi terakhir</label>
      <input id="kalibrasi" name="kalibrasi" type="date" min="2020-01-01" max="2026-12-31">
    </p>
    <p>
      <label for="label-warna">Warna label rak</label>
      <input id="label-warna" name="label-warna" type="color" value="#1d4ed8">
    </p>
    <p>
      <label for="bukti">Foto alat (JPG atau PNG)</label>
      <input id="bukti" name="bukti" type="file" accept=".jpg,.jpeg,.png" multiple>
    </p>
    <p><button type="submit">Catat alat</button></p>
  </form>
</body>
</html>

Buka berkasnya di browser dan di ponsel bila memungkinkan, karena dua perbedaan paling jelas justru muncul pada perangkat sentuh, yaitu papan ketik email dan pemilih tanggal bawaan. Mencoba mengisi url dengan teks tanpa skema lalu menekan kirim akan menampilkan pesan error bawaan browser, dan peristiwa itu adalah pengantar yang tepat bagi topik validasi pada bagian akhir modul ini.

Kesalahan umum#

• Menggunakan type="text" untuk segala masukan. Kontrol yang muncul tidak membantu, papan ketik sentuh tidak menyesuaikan, dan validasi format tidak berjalan. Pilih tipe sesuai datanya.
• Mengandalkan accept sebagai keamanan unggahan. Pembatasan itu hanya menyaring daftar pada pemilih berkas, dan berkas lain tetap dapat dikirim melalui cara lain. Periksa ulang berkasnya di server.
• Menganggap nilai date berformat sesuai tampilan lokal. Nilai yang dikirim selalu YYYY-MM-DD, sehingga kode yang memecah format tampilan akan salah.
• Menaruh nilai uang atau kode pos pada type="number" tanpa memikirkan step. Nilai desimal ditolak saat step masih bawaan, sedangkan kode pos kehilangan makna nol di depannya bila diperlakukan sebagai bilangan.

Ringkasan#

• Atribut type menetapkan kontrol, validasi bawaan, dan papan ketik sentuh sekaligus, sehingga pemilihannya mengikuti jenis data yang diminta.
• number dibatasi min, max, dan step, sedangkan date dan color menyediakan pemilih bawaan dengan nilai pengiriman yang formatnya tetap.
• Tipe file menuntut enctype="multipart/form-data" pada formulirnya, dengan accept dan multiple sebagai pengatur pendamping.
• Validasi tipe bersifat pengantar di sisi browser, dan pemeriksaan server tetap diperlukan untuk data yang menentukan.

Referensi#

• Elemen input — MDN — Daftar lengkap tipe input beserta atribut pendampingnya.
• Elemen input — HTML Living Standard (WHATWG) — Spesifikasi setiap tipe input dan aturan nilainya.
• Learn Forms: web.dev — Bagian input types yang memperlihatkan kontrol dan papan ketik per tipe.