Elemen input pada HTML

method="get">

Input text pada HTML
Digunakan untuk menginput teks. Merupakan tipe default dari elemen input.

Elemen input tipe teks ini dapat dipakai untuk berbagai macam tipe data. Dapat berupa teks, nama, alamat, tanggal, nomor hp, email dan sebagainya. Akan tetapi sebaiknya dipakai untuk tipe data teks saja. Atribut value dapat digunakan untuk menentukan nilai awal pada input.

Input password pada HTML
Input ini sama dengan input tipe teks, hanya saja teksnya tersembunyi.

Input tipe password juga dapat diberi nilai awal dengan atribut value. Tapi juga dapat dikosongkan seperti di atas.

Input textarea pada HTML
Textarea dapat digunakan untuk input teks dengan banyak baris.

Jl. Suka sama senang

Tidak seperti elemen input, nilai awal pada elemen textarea tidak diletakkan di atribut value, tapi diletakkan di antara tag pembuka dan penutup textarea.

Input select pada HTML
Input select digunakan untuk memilih di antara beberapa pilihan.


--Pilih Hobi--
1. Komputer
2. Otomotif
3. Memasak
4. Melukis
5. Bernyanyi


Pilihan di dalam elemen select dinyatakan dengan elemen option. Teks yang tampil diapit oleh tag option, sedangkan nilai yang dikirim ke server dinyatakan dalam atribut value pada elemen option.

Kita juga dapat menentukan pilihan awal yang terpilih dengan atribut selected.

Input select multiple pada HTML
Dengan atribut multiple, elemen select akan berubah tampilannya dan dapat memilih lebih dari satu pilihan.


--Pilih Hobi--
1. Komputer
2. Otomotif
3. Memasak
4. Melukis
5. Bernyanyi



--Pilih Hobi--
1. Komputer
2. Otomotif
3. Memasak
4. Melukis
5. Bernyanyi


Jika mengirim data ke server dengan bahasa PHP, atribut name pada checkbox perlu diberi tanda kurung siku seperti di atas agar data hobi menjadi suatu array.

Nilai yang terkirim ke server adalah nilai di dalam atribut value. Sedangkan teks yang mendampingi checkbox dapat diketikkan setelah tag input checkbox.

Jika diperlukan, dapat menambahkan atribut checked sehingga checkbox tertentu dapat tercentang dari awal.

Input radiobutton pada HTML
Tipe input radio memiliki fungsi yang sama dengan input select. Memilih satu di antara banyak. Saya lebih menganjurkan menggunakan select karena tampilannya lebih ringkas.

1. Komputer

2. Otomotif

3. Memasak

4. Melukis

5. Bernyanyi


Karena radio button bersifat pilihan, tidak perlu menggunakan array pada atribut name. Dan sama seperti checkbox, atribut checked pada radio button menentukan opsi yang terpilih sejak awal.

Input file pada HTML
Input file pada HTML berguna untuk memilih dan mengirimkan file.ke server. Agar dapat mengirimkan file, elemen form yang berisi input file harus ditambahkan atribut enctype="multipart/form-data".

Input submit pada HTML
Input submit berbentuk seperti tombol dan biasanya diletakkan di akhir form. Ketika diklik, input submit akan mengirimkan isi form ke server, ke alamat yang tertera pada atribut action pada elemen form.



Nilai pada atribut value akan menjadi tulisan yang tampil pada tombol submit.

onclick adalah salah satu event pada javascript. Di dalam atribut / event onclick tersebut dapat dimasukkan kode ataupun fungsi javascript.

Elemen button merupakan perkembangan pada HTML 5 yang memiliki tampilan dan fungsi yang sama dengan input button. Hanya penulisannya saja yang sedikit berbeda.

Input hidden pada HTML
Seperti namanya, input hidden tidak tampil pada halaman HTML. Biasanya digunakan untuk meneruskan atau menyimpan variabel dari server pada halaman client.



Karena digunakan untuk menyimpan nilai, biasanya tipe input ini selalu disertai atribut name dan value. Akan tetapi dengan teknologi ajax dan json, tipe input ini sudah agak jarang dipakai.

Tipe Input baru pada HTML 5
Terdapat banyak tipe input baru yang distandarkan pada HTML 5. Karena masih baru, terkadang tipe-tipe ini masih belum didukung oleh beberapa browser. Berikut tipe-tipe input baru tersebut:

Input email dan url pada HTML 5
Tipe input ini pada dasarnya sama seperti input teks, terkecuali bila digabung dengan atribut required, browser langsung memvalidasi apakah input tersebut valid atau tidak valid.

email:

homepage:

Input number pada HTML 5
Tipe number juga sama dengan input text, kecuali input number hanya dapat diisi dengan angka.






Input tanggal pada HTML 5
Terdapat beberapa tipe input tanggal, antara lain: date, month, week dan time. Akan tetapi tipe input ini baru didukung oleh chrome saja.

anggal:

Bulan:

Minggu:

Waktu:

Input range pada HTML 5
Input range digunakan untuk memilih angka dalam batasan nilai tertentu.

Pilih angka:

Input color pada HTML 5

Input color digunakan untuk memilih warna.

Pilih warna kesukaan: