Waktu pertama kali kenal form, elemen <input> kelihatannya cuma satu alat saja. Padahal sebenarnya dia lebih mirip pisau lipat serbaguna — satu tag yang bisa berubah jadi field yang benar-benar berbeda, cukup lewat satu atribut: type. Ganti type="text" jadi type="email", browser langsung ikut memvalidasi alamat email untukmu. Ganti jadi type="date", muncul pemilih kalender. Ganti jadi type="color", terbuka roda warna.
Memilih type yang pas itu salah satu kebiasaan paling berharga di HTML. Tipe yang benar memberimu validasi gratis, keyboard layar yang lebih cocok di HP, tampilan native yang sesuai, dan aksesibilitas yang lebih baik — semua tanpa satu baris JavaScript pun. Artikel ini akan membahas setiap tipe input yang perlu kamu tahu, apa yang diberikan masing-masing, dan kapan sebaiknya dipakai.
Kalau kamu belum sempat baca dasar-dasar membuat form, ada baiknya lirik dulu Form dan Input HTML — artikel ini berasumsi kamu sudah tahu apa itu <form>, <label>, dan <input>.
Cara kerja atribut type
Setiap <input> otomatis dianggap type="text" kalau kamu tidak menuliskan tipenya. Atribut type memberi tahu browser jenis data apa yang dipegang field itu, lalu browser menyesuaikan field-nya agar pas:
<input type="text" />
<input type="email" />
<input type="number" />
<input type="date" />Empat baris ini sama-sama menghasilkan <input>, tapi perilakunya beda-beda. Yang text menerima apa saja. Yang email mengecek ada tidaknya @ sebelum mengizinkan form dikirim. Yang number memunculkan panah naik/turun kecil dan menolak huruf. Yang date membuka kalender. Elemennya sama, pengalamannya empat macam — semua digerakkan oleh satu kata itu.
Keyboard di HP ikut berubah
Di HP dan tablet, tipe input diam-diam mengubah keyboard layar yang muncul. type="email" menampilkan keyboard dengan tombol @ dan . yang sudah siap. type="tel" memunculkan papan angka. type="url" menambahkan tombol .com. Jadi memilih tipe yang tepat bukan cuma soal validasi — ini benar-benar bikin nyaman buat mayoritas pengguna yang membuka situsmu dari HP.
Tipe input berbasis teks
Semua ini kelihatannya seperti kotak teks, tapi masing-masing mengubah perilaku, validasi, atau keyboard-nya.
text — default polos
Field sehari-hari untuk nama, judul, jawaban singkat bebas — apa saja yang tidak cocok dengan tipe yang lebih spesifik:
<label for="name">Nama lengkap</label>
<input type="text" id="name" name="name" />email — memvalidasi bentuk alamat
Browser mengecek apakah nilainya terlihat seperti email (ada @ dan ada teks di kedua sisinya) sebelum form boleh dikirim:
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="john@example.com" />Kalau John Doe mengetik john@@example lalu menekan kirim, browser memblokirnya dan menampilkan pesan bawaan — tanpa perlu JavaScript. Tambahkan atribut multiple dan field-nya jadi menerima beberapa alamat sekaligus, dipisah koma.
password — menyembunyikan ketikan
Karakter muncul sebagai titik atau bintang supaya tidak ada yang bisa membaca nilainya dari balik bahu pengguna:
<label for="pw">Kata sandi</label>
<input type="password" id="pw" name="password" />password menyembunyikan, bukan mengamankan
Input password hanya menyembunyikan teks secara visual saja. Dia sama sekali tidak mengenkripsi atau melindungi nilainya saat dikirim ke server — itu tugas HTTPS dan backend-mu. Jangan pernah menganggap type="password" bikin datanya aman; dia cuma menjaga teksnya tidak terlihat di layar.
search — kotak pencarian
Secara fungsi mirip text, tapi browser sering menatanya sebagai field pencarian membulat dan kadang menambah tombol “bersihkan” (×) kecil:
<input type="search" name="q" placeholder="Cari artikel…" />tel — nomor telepon
Format nomor telepon di dunia terlalu banyak ragamnya untuk divalidasi browser, jadi tel tidak mengecek nilainya. Yang dia lakukan adalah memunculkan papan angka telepon di HP — sebuah keuntungan yang benar-benar terasa:
<label for="phone">Telepon</label>
<input type="tel" id="phone" name="phone" />url — alamat web
Memvalidasi bahwa nilainya berupa URL yang benar (dia mengharapkan skema seperti https://):
<input type="url" name="website" placeholder="https://acy-partner.com" />Input angka dan rentang
number — field numerik
Hanya menerima angka, menampilkan panah spinner, dan berpadu cantik dengan min, max, serta step:
<label for="qty">Jumlah</label>
<input type="number" id="qty" name="qty" min="1" max="10" step="1" value="1" />min/maxmenentukan rentang yang diizinkan.stepmengatur lompatan nilainya —step="0.5"membolehkan setengah-setengah,step="any"membolehkan desimal berapa pun.
Pakai tel untuk yang mirip angka tapi sebenarnya bukan
type="number" itu untuk kuantitas sungguhan yang bakal kamu hitung — umur, harga, jumlah barang. Dia jadi pilihan yang salah untuk nomor kartu kredit, nomor telepon, kode pos, atau kode OTP, karena hal-hal itu bisa punya angka nol di depan, spasi, atau panjang yang malah dirusak oleh spinner angka. Untuk yang seperti itu, pakai type="text" (sering ditambah inputmode="numeric") atau type="tel".
range — slider
Kalau angka pastinya tidak sepenting sekadar memilih nilai di suatu skala, range memberimu slider yang bisa digeser:
<label for="volume">Volume</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50" />Pengguna menggeser, bukan mengetik. Karena nilainya tidak kelihatan di slider-nya, biasanya orang menampilkan angkanya secara langsung dengan sedikit JavaScript atau elemen <output> di sebelahnya.
Input tanggal dan waktu
Tipe-tipe ini membuka pemilih native, jadi pengguna tidak perlu menebak-nebak format tanggal yang kamu mau.
<label for="dob">Tanggal lahir</label>
<input type="date" id="dob" name="dob" />
<label for="appt">Waktu janji temu</label>
<input type="time" id="appt" name="appt" />
<input type="datetime-local" name="meeting" />
<input type="month" name="billing" />
<input type="week" name="sprint" />date— kalender, menghasilkan nilai seperti2026-08-07.time— jam dan menit.datetime-local— tanggal dan waktu sekaligus, tanpa zona waktu.month— satu bulan penuh (2026-08).week— nomor minggu tertentu.
Kamu bisa membatasi tanggal dengan min dan max persis seperti pada angka, misalnya min="2026-01-01" untuk memblokir tanggal yang sudah lewat.
Nilainya selalu dalam format yang baku
Bagaimanapun tampilan kalender di mata pengguna — versi Indonesia, Amerika, atau apa pun — nilai yang sebenarnya dikirim form selalu berupa format ISO yang baku (YYYY-MM-DD untuk tanggal). Browser yang mengurus tampilan lokalnya; kamu terima string yang bersih dan bisa diprediksi. Konsistensi inilah salah satu alasan terbaik memakai input tanggal native ketimbang tiga dropdown terpisah.
Input pilihan: checkbox dan radio
Dua ini spesial — mereka tidak memegang teks ketikan, melainkan mewakili sebuah pilihan, dan sangat bergantung pada atribut name dan value.
checkbox — saklar nyala/mati yang berdiri sendiri
Setiap checkbox adalah tombol ya/tidak miliknya sendiri. Beberapa bisa dicentang sekaligus:
<label><input type="checkbox" name="topics" value="html" /> HTML</label>
<label><input type="checkbox" name="topics" value="css" /> CSS</label>
<label><input type="checkbox" name="topics" value="js" checked /> JavaScript</label>Atribut checked membuat sebuah kotak sudah tercentang sejak awal. Tiap kotak hanya mengirimkan value-nya kalau dia dalam keadaan tercentang.
radio — pilih tepat satu dari satu grup
Tombol radio yang berbagi name yang sama membentuk satu grup, dan hanya satu di grup itu yang bisa dipilih dalam satu waktu:
<p>Pilih paket:</p>
<label><input type="radio" name="plan" value="free" checked /> Free</label>
<label><input type="radio" name="plan" value="pro" /> Pro</label>
<label><input type="radio" name="plan" value="team" /> Team</label>Tombol radio wajib berbagi name yang sama
Keajaiban pengelompokan radio sepenuhnya datang dari atribut name. Kalau kamu lupa memberi mereka name yang sama, tiap radio jadi grup sendiri-sendiri dan pengguna bisa memilih semuanya sekaligus — padahal itu malah menggagalkan tujuannya. name sama = satu pilihan; name beda = tombol-tombol yang berdiri sendiri.
Input khusus
Ada beberapa tipe lagi yang menangani pekerjaan spesifik.
color — pemilih warna
Membuka roda warna bawaan sistem operasi dan mengembalikan nilai hex seperti #00b8e6:
<label for="brand">Warna merek</label>
<input type="color" id="brand" name="brand" value="#00b8e6" />file — unggah berkas
Memungkinkan pengguna memilih berkas (atau beberapa) dari perangkatnya. Atribut accept memberi petunjuk tipe yang diizinkan, dan multiple membolehkan memilih lebih dari satu:
<label for="avatar">Foto profil</label>
<input type="file" id="avatar" name="avatar" accept="image/*" />hidden — data yang tidak dilihat pengguna
Field yang tidak tampak di halaman tapi tetap ikut terkirim bersama form. Berguna untuk menyelipkan ID atau token tanpa menampilkannya:
<input type="hidden" name="form_id" value="contact-2026" />submit, reset, dan button
Input juga bisa berperan sebagai tombol, walaupun elemen <button> yang berdiri sendiri biasanya lebih enak dipakai:
<input type="submit" value="Kirim" />
<input type="reset" value="Bersihkan form" />submit mengirim form, reset mengembalikan semua field ke nilai awalnya, dan button polos tidak melakukan apa-apa sampai JavaScript merangkainya.
Memadukan tipe dengan atribut validasi
Tipe input jadi jauh lebih bertenaga kalau kamu padukan dengan atribut validasi. Keduanya bekerja bahu-membahu:
<input type="email" name="email" required />
<input type="number" name="age" min="18" max="120" required />
<input type="text" name="username" minlength="3" maxlength="20" required />
<input type="url" name="site" pattern="https://.*" />required— field wajib diisi sebelum kirim.min/max— batas angka atau tanggal.minlength/maxlength— batas jumlah karakter untuk teks.pattern— pola regular expression yang harus dipenuhi nilainya.
Tipe menentukan jenis datanya; atribut-atribut ini menentukan aturan di sekitarnya. Digabung, keduanya memberimu validasi yang luar biasa banyak secara gratis, bahkan sebelum data sempat meninggalkan browser.
Jangan pernah jadikan browser satu-satunya pemeriksa
Validasi bawaan memang hebat untuk menuntun pengguna yang jujur, tapi sangat gampang diakali — siapa pun bisa mematikan JavaScript, mengedit HTML, atau mengirim permintaan langsung ke server. Validasi sisi browser itu lapisan kenyamanan, bukan lapisan keamanan. Selalu validasi (dan bersihkan) ulang setiap nilai di backend. Browser menjaga pengguna tetap di jalur yang benar; server-mu yang menjaga datamu tetap aman.
Cara memilih tipe yang tepat
Saat menambah sebuah field, tanyakan satu hal: ini sebenarnya data jenis apa? Lalu pilih tipe yang cocok.
- Nama atau teks bebas →
text - Alamat email →
email - Sesuatu yang rahasia →
password - Nomor telepon →
tel - Situs web →
url - Kuantitas sungguhan yang bakal dihitung →
number - Nilai di sebuah skala →
range - Tanggal atau waktu →
date/time/datetime-local - Satu pilihan dari beberapa →
radio - Beberapa saklar yang berdiri sendiri →
checkbox - Sebuah warna →
color - Unggah berkas →
file
Membiasakan diri memilih tipe yang spesifik ketimbang asal pakai text itulah yang membedakan form yang sekadar berfungsi dengan form yang benar-benar enak diisi — apalagi di HP, di mana keyboard yang tepat saja sudah menghemat banyak usaha orang.
Penutup
Atribut type adalah keputusan paling berpengaruh yang kamu buat pada sebuah <input>. Ini yang perlu kamu bawa pulang:
- Satu elemen
<input>bisa menjelma jadi banyak field berbeda, murni lewattype-nya. - Tipe yang tepat memberimu validasi gratis, keyboard HP yang sesuai, dan tampilan native yang benar — tanpa JavaScript.
- Tipe keluarga teks (
text,email,password,search,tel,url) menyetel validasi dan keyboard. numberuntuk kuantitas sungguhan; pakaitextatauteluntuk kode dan ID yang bukan hitungan matematika.- Tipe tanggal/waktu mengembalikan nilai yang bersih dan baku sambil menampilkan pemilih lokal yang ramah.
radiodancheckboxmewakili pilihan dan bergantung padanamesertavalueagar bekerja benar.- Tipe khusus (
color,file,hidden,submit) menutupi sisanya. - Padukan tipe dengan
required,min/max,pattern, dan kawan-kawan — tapi selalu validasi ulang di server.
Setelah kamu nyaman memilih tipe, langkah berikutnya yang wajar adalah menata bagaimana sebuah form panjang diorganisir — mengelompokkan field, menambah teks bantuan, dan menyusun semuanya dengan rapi. Di situlah struktur dan styling mengambil alih dari blok-blok dasar yang baru saja kamu kuasai.
