HTML FORMS
Assalamu'alaikum Wr. Wb
Hai teman-teman semua, terima kasih sudah mengunjungi blog saya yang sederhana ini. Untuk kesempatan kali ini kita akan membahas tentang Form pada HTML. Biar lebih jelas langsung saja yuk kita simak...
Form biasanya digunakan untuk mengumpulkan data/informasi dari pengunjung web kita. Contohnya form untuk pendafataran, login, kontak, dll.
Contoh :
Hasilnya:
1. Elemen <INPUT>
Elemen input adalah bentuk elemen yang paling penting.
Elemen input dapat ditampilkan dalam beberapa cara, tergantung pada jenis atribut. Contohnya :
<input type="text">
-Mendefinisikan satu baris kolom input teks.
<input type="radio">
-Mendefinisikan sebuah tombol radio (untuk memilih salah satu dari banyak pilihan)
<input type="password">
-Mendefinisikan kolom untuk menuliskan password/sandi, karakter pada input jenis ini akan ditampilkan dengan tanda bintang (***) untuk menjaga keamanan.
<input type="checkbox">
-Mendefinisikan sebuah kotak centang untuk memilih lebih dari 1 pilihan.
<input type="button">
-Mendefinisikan sebuah tombol.
<input type="submit">
-Mendefinisikan sebuah tombol submit (untuk mengirimkan formulir)
<input type="reset">
-Mendefinisikan sebuah tombol untuk reset (mengulangi)
INPUT TEKS
Contoh :
Hasilnya :
TOMBOL RADIO
Contoh :
Hasilnya :
INPUT PASSWORD
Contoh :
Hasilnya :
INPUT CHECKBOX
Contoh :
Hasilnya :
TOMBOL BUTTON
Contoh :
Hasilnya :
Jika tombol tsb di klik maka akan muncul seperti dibawah ini :
TOMBOL SUBMIT DAN TOMBOL RESET
Contoh :
Hasilnya :
ATRIBUT ACTION
Atribut action mendefinisikan tindakan yang harus dilakukan ketika formulir dikirimkan. Biasanya bentuk data dikirim ke halaman web server ketika pengguna mengklik tombol submit.
Contoh :
Dalam contoh diatas, bentuk data dikirim ke sebuah halaman disebut "konfirmasi.html", data diatas tidak akan diproses karena data dikirim bukan ke server tapi ke halaman html lainnya karena berhubung kita belum masuk ke PHP jadi nanti kalau sudah masuk ke PHP akan dibahas lebih lanjut disesi yang akan datang.
ATRIBUT METHOD
Atribut method menentukan metode HTTP (GET atau POST) yang akan digunakan ketika mengirimkan data formulir.
Contoh :
atau
GET digunakan ketika mengirimkan data yang tidak bersifat rahasia/sensitif karena data yang akan dikirimkan akan terlihat dibidang alamat halaman. GET paling cocok digunakan untuk jumlah pendek karena memiliki keterbatasan ukuran juga.
POST digunakan ketika mengirimkan data yang bersifat rahasia/sensitif atau pribadi. Method POST tidak menampilkan data formulir yang akan dikirim.
POST tidak memiliki keterbatasan ukuran, dan dapat digunakan untuk mengirimkan data dalam jumlah besar.
ATRIBUT NAME
Setiap field input harus memiliki atribut nama untuk disampaikan, jika atribut nama dihilangkan data yang diinput tidak akan dikirim. Untuk contohnya sudah ada dalam beberapa contoh diatas.
PENGELOMPOKAN DATA FORM DENGAN <fieldset>
Elemen <fieldset> digunakan untuk mengelompokan data terkait dlam formulir.
Elemen <legend> mendefinisikan keterangan untuk elemen <fieldset>.
Contoh :
Hasilnya :
2. Elemen <SELECT>
Elemen <select> mendefinisikan daftar drop-down.
Secara default, item pertama dlam daftar drop-down yang dipilih. Untuk menentukan pilihan, tambahkan atribut
selected disalah satu option.
Contoh :
Hasilnya :
3. Elemen <TEXTAREA>
Elemen textarea mendefinisikan field input multi-line.
Atribut rows menentukan jumlah baris dalam textarea.
Artibut cols menentukan lebar/jumlah kolom dalam textarea.
Contoh :
Hasilnya :
4. Elemen HTML5 <DATALIST>
Elemen <datalist> menentukan daftar pilihan yang telah ditetapkan untuk elemen <input>. Pengguna akan melihat daftar drop-down yang telah ditentukan.
Atribut
list pada elemen <input> harus mengacu pada atribut
id dari elemen <datalist>.
Contoh :
Hasilnya :