Tag HTML <input>

Definisi dan penggunaan

<input> Tag definisikan lapangan input, di mana pengguna dapat memasukkan data.

<input> Element adalah elemen formulir yang paling penting.

<input> Element dapat ditampilkan dengan berbagai cara, tergantung Atribut type.

Berikut adalah jenis masukan yang berbeda:

  • <input type="button">
  • <input type="checkbox">
  • <input type="color">
  • <input type="date">
  • <input type="datetime-local">
  • <input type="email">
  • <input type="file">
  • <input type="hidden">
  • <input type="image">
  • <input type="month">
  • <input type="number">
  • <input type="password">
  • <input type="radio">
  • <input type="range">
  • <input type="reset">
  • <input type="search">
  • <input type="submit">
  • <input type="tel">
  • <input type="text">(Nilai standar)
  • <input type="time">
  • <input type="url">
  • <input type="week">

Lihat Atribut typeUntuk melihat contoh dari setiap jenis masukan!

Contoh

Formulir HTML yang mengandung tiga field input; dua field teks dan tombol kirim:

<form action="/action_page.php">
  <label for="fname">Nama:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Keluarga:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Kirim">
</form>

Coba sendiri

Petunjuk dan catatan

Petunjuk:Selalu gunakan tag <label> untuk menentukan label untuk elemen berikut:

<input type="text">
<input type="checkbox">
<input type="radio">
<input type="file">
<input type="password">

Atribut

Atribut Nilai Deskripsi
accept
  • Ekstensi file
  • audio/*
  • video/*
  • image/*
  • Tipe media

Tentukan jenis file yang akan disubmit melalui pengiriman file.

Tentukan filter jenis file yang dapat dipilih pengguna dari dialog pengiriman file (hanya untuk type="file").
alt Teks Tentukan teks gantian gambar (hanya untuk type="image").
autocomplete
  • on
  • off
 Tentukan apakah elemen <input> harus mengaktifkan penyelesaian otomatis.
autofocus autofocus Tentukan elemen <input> yang harus mendapatkan fokus otomatis saat halaman dimuat.
checked checked Tentukan elemen <input> yang harus dipilih terlebih dahulu saat halaman dimuat (untuk type="checkbox" atau type="radio").
dirname inputname.dir Tentukan arah teks yang akan disubmit.
disabled disabled Tentukan elemen <input> yang harus di nonaktifkan.
form ID formulir Tentukan formulir milik elemen <input>.
formaction URL Tentukan URL pengelola file yang akan diproses untuk mengirimkan formulir (untuk type="submit" dan type="image").
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain
 Menentukan bagaimana data formulir harus dikodekan saat disubmit ke server (berlaku untuk type="submit" dan type="image").
formmethod
  • get
  • post
 Mendefinisikan metode HTTP yang digunakan untuk mengirim data ke URL action (berlaku untuk type="submit" dan type="image").
formnovalidate formnovalidate Mendefinisikan bahwa formulir tidak harus di-verifikasi saat elemen pengiriman disubmit.
formtarget
  • _blank
  • _self
  • _parent
  • _top
Nama bingkai 		Menentukan tempat untuk menampilkan tanggapan yang diterima setelah mengirimkan formulir (berlaku untuk type="submit" dan type="image").
height Pixel Menentukan tinggi elemen <input> (hanya berlaku untuk type="image").
list datalist_id Merujuk ke elemen <datalist> yang mengandung opsi prdefinisi untuk <input>.
max
  • angka
  • Tanggal
 Menentukan nilai maksimum elemen <input>.
maxlength angka Menentukan jumlah karakter maksimum yang diizinkan di elemen <input>.
min
  • angka
  • Tanggal
 Menentukan nilai minimum elemen <input>.
minlength angka Menentukan jumlah karakter minimum yang diperlukan di elemen <input>.
multiple multiple Menentukan apakah pengguna dapat memasukkan nilai lebih dari satu di elemen <input>.
name Teks Menentukan nama elemen <input>.
pattern ekspresi reguler Menentukan ekspresi reguler untuk memeriksa nilai elemen <input>.
placeholder Teks Menentukan tips singkat tentang nilai yang diharapkan elemen <input>.
popovertarget id elemen Menentukan elemen bingkai yang akan dipanggil (hanya berlaku untuk type="button").
popovertargetaction
  • hide
  • show
  • toggle
 Menentukan apa yang terjadi ketika tombol di-klik (hanya berlaku untuk type="button").
readonly readonly Menentukan bahwa input field hanya dapat di-baca.
required required Menentukan bahwa input field harus diisi sebelum mengirimkan formulir.
size angka Menentukan lebar elemen <input> (dengan satuan karakter).
src URL URL gambar yang digunakan untuk tombol pengiriman (hanya berlaku untuk type="image").
step
  • angka
  • any
 Tentukan jarak angka yang sah di antara field input.
type
  • button
  • checkbox
  • color
  • date
  • datetime-local
  • email
  • file
  • hidden
  • image
  • month
  • number
  • password
  • radio
  • range
  • reset
  • search
  • submit
  • tel
  • text
  • time
  • url
  • week
 Tentukan tipe elemen <input> yang akan ditampilkan.
value Teks Tentukan nilai elemen <input>.
width Pixel Tentukan lebar elemen <input> (hanya berlaku untuk type="image").

Atribut Global

<input> Tag juga mendukung Atribut Global di HTML.

Atribut Acara

<input> Tag juga mendukung Atribut Acara di HTML.

Pengaturan CSS Default

Tidak ada.

Dukungan Browser

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan

Halaman yang berhubungan

Panduan HTML:

Panduan Referensi HTML DOM: