Tag input
Tag input membuat berbagai elemen
formulir HTML: bidang input biasa, bidang untuk
memasukkan kata sandi, kotak centang (checkbox),
tombol radio, tombol.
Tag input harus berada di dalam tag
form.
Ini tidak wajib, tetapi diperlukan untuk mengirim
data ke server dan memprosesnya selanjutnya
melalui PHP.
Tidak memerlukan tag penutup.
Atribut
| Atribut | Keterangan |
|---|---|
type |
Menentukan jenis bidang input. Opsi lihat di bawah. |
value |
Nilai default dalam bidang input. Dalam kasus tombol, menentukan teksnya.
Lebih detail lihat atribut value.
|
placeholder |
Petunjuk dalam bidang input, lebih detail lihat
atribut placeholder.
|
name |
Nama bidang input. Diperlukan untuk mengambil data bidang input di PHP. Untuk fungsi formulir yang benar, nama bidang input tidak boleh sama satu sama lain (dalam satu formulir). Jika sama - di PHP akan datang data dari bidang input yang lebih bawah dalam kode HTML. |
disabled |
Memblokir elemen formulir (tidak hanya input, tetapi hampir semua),
lebih detail lihat atribut disabled.
|
Nilai atribut type
| Nilai | Keterangan |
|---|---|
text |
Membuat bidang input teks biasa. |
password |
Membuat bidang input teks untuk kata sandi. Coba ketik teks di dalamnya - teks akan ditampilkan sebagai bintang. |
checkbox |
Membuat kotak centang (checkbox).
Lebih detail lihat checkbox.
|
radio |
Membuat tombol radio.
Lebih detail lihat radio.
|
hidden |
Membuat input tersembunyi, yang tidak akan terlihat di layar, tetapi akan mengirim data
yang terkandung dalam atribut value ke server.
|
button |
Membuat tombol. Menekan tombol ini
tidak akan mengirim formulir ke server. Tombol ini dapat digunakan di dalam
tautan atau melalui JavaScript.
Secara default tombol tidak memiliki teks (contoh tombol tanpa teks: ),
teks ditentukan menggunakan value.
Lihat juga tag button,
yang juga membuat tombol.
|
submit |
Membuat tombol, yang akan mengirim data ke server.
Teks tombol tergantung pada browser, teks dapat diganti
menggunakan value.
Lihat juga tag button,
yang juga membuat tombol.
|
reset |
Membuat tombol, yang membersihkan formulir yang telah diisi.
Teks tombol tergantung pada browser, teks dapat diganti
menggunakan value.
|
file |
Membuat tombol pemilihan file. Desain tombol ini dilarang diubah
melalui CSS (namun ada cara-cara pintas). Jika Anda memerlukan bidang seperti itu dalam formulir, maka
tag form harus memiliki atribut
enctype dengan nilai multipart/form-data.
|
Nilai baru atribut type di HTML5
Nilai-nilai atribut ini baru, muncul hanya di HTML5, jadi di beberapa browser mereka mungkin tidak bekerja atau bekerja berbeda di browser yang berbeda.
Dalam kasus browser tidak dapat memahami isi
atribut type (misalnya, jika
tidak didukung atau salah dimasukkan),
browser akan menganggap elemen sebagai
input teks biasa, seolah-olah di type ada nilai
text.
Lihat contoh di bawah ini di
berbagai browser. Coba masukkan
teks ke dalam input dan tekan tombol kirim.
Jika teks tidak benar atau bidang kosong -
browser akan memberikan error. Misalnya, jika di
bidang dengan tipe email dimasukkan email yang tidak benar -
browser tidak akan mengizinkan pengiriman formulir dan
akan menampilkan pesan error (teks error
dan tampilannya tidak dapat diubah melalui html css).
Jika bidang kosong - browser juga akan memberikan error,
ini dicapai dengan menggunakan atribut required:
| Nilai | Keterangan |
|---|---|
email |
|
number |
|
url |
|
tel |
|
search |
|
color |
|
date |
|
month |
|
week |
|
datetime |
|
datetime-local |
|
range |
