Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <input> Pada HTML

previous Previous Page

Elemen <input> pada HTML digunakan untuk menciptakan bidang formulir yang memungkinkan pengguna untuk memasukkan data. Elemen <input> dapat berbentuk bilah kotak persegi panjang yang dapat diedit oleh pengguna, kotak pilihan tunggal dan multiple, kotak berisi tanggal maupun input yang berbentuk tombol untuk di tekan. Fungsi dari elemen <input> tergantung dari jenis input yang buat yang dihasilkan dari atribut type-nya.

Elemen <input> merupakan null elemen (elemen kosong) yang tidak memiliki konten apapun. Elemen ini tidak menggunakan tag penutup.

Atribut Type Pada Elemen <input>

Jenis dan bentuk dari elemen <input> sangat beragam tergantung dari penggunaannya yang ditetapkan di dalam atribut type. Berikut ini contoh beberapa bentuk elemen <input> berdasarkan dari jenis elemen inputnya :

HTML

1.  <form action="#" method="post">
2.     <p>
3.     <label>Input tanpa atribut : <input></label>
4.     </p>
5.     <p>
6.     <label>Input type text : <input type="text"></label>
7.     </p>
8.     <p>
9.     <label>Input type password : <input type="password"></label>
10.    </p>
11.    <p>
12.    <label>Input type date : <input type="date"></label>
13.    </p>
14.    <p>
15.    <label>Input type color : <input type="color"></label>
16.    </p>
17.    <p>
18.    <label>Input type radio : <input type="radio" name="radio_" checked> <input type="radio" name="radio_"> <input type="radio" name="radio_"></label>
19.    </p><p>
20.    <label>Input type checkbox : <input type="checkbox" name="box_1" checked> <input type="checkbox" name="box_2"> <input type="checkbox" name="box_3"></label>
21.    </p>
22.    <p>
23.    <input type="submit" value="Kirim">
24.    <input type="reset" value="Reset">
25.    </p>
26. </form>

Jika dijalankan akan menghasilkan tampilan :

Berikut ini contoh lengkap penggunaan tag <input> pada HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.  <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag input HTML</title>
6.  </head>
7.  <body>
8.     <form action="proses.php" method="post">
9.       <fieldset>
10.      <legend>Formulir Pendaftaran Mahasiswa</legend>
11.      <p>
12.      <label for="nama">Nama</label>
13.      <input type="text" name="nama" id="nama" required autocomplete minlength="3">
14.      </p>
15.      <p>
16.      <label for="email">Email</label>
17.      <input type="email" name="email" id="email" required>
18.      </p>     <p>
19.      <label for="alamat">Alamat</label>
20.      <input type="text" name="alamat" id="alamat" required>
21.      </p>     <p>
22.      <label for="no_telp">No Telp</label>
23.      <input type="tel" name="no_telp" required>
24.      </p>     <p>
25.      <label for="gender">Jenis Kelamin</label>
26.      <input type="radio" name="gender" value="laki-laki" checked> Laki-laki
27.      <input type="radio" name="gender" value="perempuan"> Perempuan
28.      </p>     <p>
29.      <label for="hoby">Hoby</label>
30.      <input type="checkbox" name="hoby_1" Value="membaca"> Membaca
31.      <input type="checkbox" name="hoby_2" Value="olahraga"> Olahraga
32.      <input type="checkbox" name="hoby_3" Value="melukis"> Melukis
33.      </p>
34.      <p>
35.      <input type="submit" value="Kirim">
36.      <input type="reset" value="Reset">
37.      </p>
38.      </fieldset>
39.    </form>
40. </body>
41. </html>
42. 
43. 

tag <input> html

Atribut Khusus Pada Elemen <input>

  • name
    Menetapkan nama kontrol inputan yang akan dikirim ke server.
  • value
    Menetapkan nilai / isi data dari kontrol inputan yang akan dikirim ke server.
  • autofocus
    Menentukan elemen input agar tersorot pertama kali saat browser dimuat. Nilai : autofocus
  • autocomplete
    Menentukan elemen input agar otomatis dilengkapi dengan kata yang sebelumnya pernah dituliskan di bilah input tersebut.
    Nilai : on | off
  • maxlength
    Menetapkan jumlah maksimal karakter yang harus diisikan di bilah inputan, jika melebihi jumlah maksimalnya, bilah input tersebut tidak dapat diisikan karakter lagi.
    Nilai : number (angka)
  • minlength
    Menetapkan jumlah minimal karakter yang harus diisikan di bilah inputan, jika jumlah karakter kurang dari jumlah minimalnya, akan muncul pesan pop-up yang berisi pesan jumlah karakter tidak sesuai dengan nilai minimal karakter.
    Nilai : number (angka)
  • max
    Menetapkan nilai angka terbesar ataupun tanggal terbesar dari input control dengan input type number dan input type date.
    Nilai : number (angka) | date (tanggal)
  • min
    Menetapkan nilai angka terkecil ataupun tanggal terkecil dari input control dengan input type number dan input type date.
    Nilai : number (angka) | date (tanggal)
  • size
    Menentukan lebar input control dalam piksel.
  • width
    Menentukan lebar input control pada input type image dalam piksel.
  • height
    Menentukan tinggi input control pada input type image dalam piksel.
  • checked
    Menentukan elemen input akan diberi nilai atau di centang pada input type checkbox dan input type radio saat halaman pertama kali dimuat.
    Nilai : checked
  • required
    Menentukan elemen input harus diisi sebelum data dikirim ke server saat tombol submit ditekan. Nilai : required
  • alt
    Menentukan teks alternatif untuk gambar, atribut ini berlaku untuk input type image.
  • placeholder
    Menentukan petunjuk singkat (hint) pada elemen input. Jika elemen tersebut disorot, teks petujuk singkat tersebut akan menghilang.
    Nilai : teks
  • readonly
    Menetapkan elemen input tersebut hanya dapat dibaca, tidak untuk diedit. Nilai : readonly
  • disabled
    Menetapkan elemen input menjadi nonaktif dan tidak bisa dipilih atau disorot. Nilai : disabled
  • pattern
    Menentukan pola regular expression pada elemen input, untuk membatasi karakter, huruf, kata yang bisa diinputkan pada bilah input tersebut.
  • accept
    Menentukan jenis file yang dapat dimasukkan pada elemen input, misalnya *.txt, *.png, *.jpeg maka hanya file-file tersebut yang bisa pilih saat menu pop-up pilihan file ditampilkan. Atribut ini hanya berlaku untuk input type file.
  • formaction
    Menetapkan URL tujuan saat data pada form dikirim ke server, hanya berlaku bagi elemen input pada input type button dan input type image.
  • formenctype
    Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server. Berlaku jika mengirim data dalam bentuk method post, dan hanya berlaku bagi elemen input pada input type button dan input type image.
    Nilai :
    • application/x-www-form-urlencoded, merupakan nilai default.
    • multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
    • teks/plain
  • formmethod
    Memberitahukan browser, bagaimana cara mengirim data ke server. Hanya berlaku bagi elemen input pada input type button dan input type image
    Nilai :
    • post, mengirimkan data dalam bentuk HTTP POST. Merupakan jenis pengiriman data melalui body halaman HTML secara langsung.
    • get, mengirimkan data dalam bentuk HTTP GET. Merupakan jenis pengiriman data dengan melewatkan parameter data melalui URL.
  • formtarget
    Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan ke server. Hanya berlaku bagi elemen input pada input type button dan input type image
    Nilai : _blank | _self | _parent | _top
  • type
    Menentukan jenis / type inputan. Inputan ini memiliki berbagai jenis yang digunakan sesuai dengan keperluannya.
    Nilai :
    • button, membuat tombol yang bisa diklik, biasanya untuk mengeksekusi perintah pada javascript.
    • submit, membuat tombol jenis submit, digunakan untuk mengeksekusi form untuk dikirim ke server.
    • reset, membuat tombol jenis reset, digunakan untuk menyetel ulang isian kembali ke semula.
    • text (nilai default), menentukan jenis isian berupa angka, huruf dan printable atau non-printable character pada input.
    • email, menentukan jenis isian dalam format email. Jika yang dimasukkan bukan dalam format email, formulir tidak bisa di kirim ke server.
    • number, menentukan jenis isian dalam format angka (0-9). Jika yang dimasukkan selain angka formulir tidak bisa di kirim ke server.
    • password, membuat jenis isian dalam format password dan character yang dimasukkan disamarkan dengan tanda * (asteric).
    • tel, menentukan jenis isian dalam format telpon.
    • url, menentukan jenis isian dalam format URL.
    • radio, menentukan isian dalam bentuk single opsi / pilihan yang dapat dipilih oleh pengguna.
    • checkbox, menentukan isian dalam bentuk multiple opsi / pilihan yang dapat dipilih oleh pengguna.
    • image, menentukan isian dalam bentuk gambar, jika pengguna mengklik titik tertentu pada gambar, maka titik tersebutlah yang akan dikirim ke server.
    • file, menentukan isian dalam bentuk file. Semua jenis file dapat dikirim lewat type ini.
    • hidden, menyertakan input yang diperuntukkan bagi programmer. Input ini tidak bisa dilihat oleh pengguna secara visual, namun sangat berguna untuk menyisipkan berbagai data misalnya dengan script tertentu dapat mengetahui jenis browser yang dipakai, koordinat pengguna, ataupun jenis smartphone yang dipakai pengguna untuk dikirim ke server tanpa terdeteksi pengguna.
    • range, membuat tombol dalam bentuk slide yang bisa digeser kanan kiri. Nilai ditentukan oleh atribut min dan atribut max dalam bentuk angka. Angka ini yang akan dijadikan sebagai data.
    • color, menentukan isian dalam bentuk warna (color).
    • date, menentukan isian dalam bentuk tanggal (tanggal-bulan-tahun).
    • time, menentukan isian dalam bentuk waktu (jam:menit:detik).
    • week, menentukan isian dalam bentuk urutan minggu, misal : minggu pertama = 01, minggu ke-10 : 10, dst. Tidak semua browser support dengan type ini.
    • month, menentukan isian dalam bentuk bulan (bulan-tahun). Tidak semua browser support dengan type ini.

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<input>yayayayaya

Global Attributes :

Tag <input> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <input> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <input> pada HTML:

/* Tidak ada */

facebooktwittergoogle pluswhatapplinkedinpinterest

previous Previous Page

Daftar Isi HTML