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

Tag <input> Pada HTML

previous Previous Page

HTML elemen tag <input> merupakan tag pada HTML yang digunakan untuk menciptakan bidang formulir yang memungkinkan pengguna dalam memasukkan entry data. HTML elemen tag <input> memiliki jenis dan bentuk yang bervariasi sesuai dengan kebutuhan dan nilai data yang terkandung di dalamnya.

Nilai input jenis text mempunyai konten dalam bentuk data teks dan karakter yang dapat menampung character sampai dengan 524,288 characters. Nilai input jenis radio memberikan pilihan bagi pengguna satu buah pilihan dari beberapa pilihan yang diberikan. Nilai input jenis checkbox memberikan pilihan yang dapat diberikan checklist (tanda centang) sehingga pengguna dapat memilih pililhan lebih dari satu sesuai dengan kriteria yang sesuai..

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

Atribut Type Pada Elemen <input>

HTML elemen tag <input> memiliki jenis dan bentuk yang cukup beragam sesuai dengan kebutuhannya. Jenis input ditetapkan di dalam atribut type. Nilai type yang ditawarkan seperti text, email, password, date, radio dan lainnya.

Berikut ini contoh bentuk elemen tag <input> berdasarkan dari jenis type-nya :

HTML

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

Jika dijalankan akan menghasilkan tampilan :

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

HTML

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

Atribut Khusus Pada Elemen Tag <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:

CSS

1
/* Tidak ada */

facebooktwitterwhatapplinkedinpinterest

previous Previous Page

Halaman Terkait

Tag <legend> Pada HTML html
Tag <label> Pada HTML html
Tag <button> Pada HTML html
Tag <select> Pada HTML html
Tag <textarea> Pada HTML html

Tutorial HTML

Paling Banyak Dibaca

1Elemen Heading (h1, h2, h3, h4, h5, h6) Pada HTML 23.971
2Tag <a>: Membuat Link Dengan Gambar 22.351
3Tag <button> Pada HTML 15.887
4Elemen Span Pada HTML 14.034
5Tag <video>: Menambahkan Video Pada HTML 13.423
6Warna RGBA (Red Green Blue Alpha) Pada HTML 12.219
7Elemen Aside Pada HTML 10.719

News Letters

Silahkan masukkan email Anda untuk berlangganan informasi kami

Home | Privacy Policy | About Us | Contact Us | Site Map

©2020 - 2024 All Rights Reserved
This site is maintained by said alfaruq
Batam - Indonesia