Formulir HTML adalah alat yang ampuh untuk berinteraksi dengan pengguna; namun, karena alasan historis dan teknis, tidak selalu jelas bagaimana menggunakannya secara maksimal. Dalam bab ini, kita akan membahas semua aspek formulir HTML, mulai dari struktur hingga gaya, dari penanganan data hingga widget khusus.
Bentuk: mengumpulkan berbagai jenis data masukan pengguna dan mengirimkannya ke server untuk mewujudkan interaksi data antara pengguna dan server.
Tag form form menyatakan ruang lingkup pengumpulan data, asalkan dalam bentuk, itu adalah data yang akan dikumpulkan.
Mungkin ada beberapa tag formulir dalam satu halaman, dan tag tersebut hanya dapat berada dalam hubungan paralel dan tidak dapat disarangkan. Saat pengguna mengirim data ke server, mereka hanya dapat mengirimkan data dalam satu formulir dalam satu waktu. Jika Anda ingin mengirimkan beberapa formulir, Anda perlu menggunakan interaksi asinkron di js.
elemen <bentuk>
Formulir HTML digunakan untuk mengumpulkan masukan pengguna.
Bentuk HTML definisi elemen:
<form>.formelements.</form>
1. Formulir HTML mengandung elemen formulir.
Elemen formulir mengacu pada berbagai jenis elemen masukan, kotak centang, tombol radio, tombol kirim, dll.
(1) elemen <masukan>
Elemen <input> adalah elemen formulir yang paling penting. Elemen <input> memiliki banyak bentuk, bergantung pada atribut type. Ini adalah tipe yang digunakan dalam bab ini:
(2) Masukan teks
<input type=text> mendefinisikan kolom input satu baris untuk input teks:
<!DOCTYPEhtml><html><body><form>Nama belakang:<br><inputtype=textname=firstname><br>Nama depan:<br><inputtype=textname=lastname></form><p>Silahkan perhatikan bentuknya sendiri tidak terlihat. </p><p>Perhatikan juga bahwa lebar default bidang teks adalah 20 karakter. </p></tubuh></html>
Hasil yang disajikan adalah sebagai berikut:
(3) Masukan tombol radio
<input type=radio> mendefinisikan tombol radio. Tombol radio memungkinkan pengguna untuk memilih salah satu dari sejumlah pilihan:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>Pria<br><inputtype=radioname=sexvalue=2>Wanita</form></body></html>
Hasil yang disajikan adalah sebagai berikut:
(4) Tombol kirim
<input type=submit> mendefinisikan tombol yang digunakan untuk mengirimkan formulir ke pengendali formulir. Pengendali formulir biasanya merupakan halaman server yang berisi skrip untuk memproses data masukan. Pengendali formulir ditentukan dalam atribut tindakan formulir:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nama belakang:<br><inputtype=textname=firstnamevalue=李><br>Nama:<br><inputtype=textname=lastnamevalue= Lei ><br><br><inputtype=submitvalue=Submit></form><p>Jika Anda mengklik Kirim, data formulir akan dikirim ke halaman bernama demo_form.ashx untuk diproses selanjutnya. </p></tubuh></html>
Hasil yang disajikan adalah sebagai berikut:
2. Atribut formulir:
(1) Atribut tindakan
Atribut action mendefinisikan tindakan yang akan dilakukan saat formulir dikirimkan. Cara biasa untuk mengirimkan formulir ke server adalah dengan menggunakan tombol kirim. Biasanya, formulir dikirimkan ke halaman web di server web. Pada contoh di atas, skrip server ditentukan untuk menangani formulir yang dikirimkan:
<formaksi=aksi.php>
Jika atribut tindakan dihilangkan, tindakan akan ditetapkan ke halaman saat ini.
(2) Atribut metode
Atribut metode menentukan metode HTTP (GET atau POST) yang digunakan saat mengirimkan formulir:
<formaksi=aksi.phpmethod=GET>
atau:
<formaksi=aksi.phpmethod=POST>
Kapan menggunakan GET?
Anda dapat menggunakan GET (metode default): jika pengiriman formulir bersifat pasif (seperti permintaan mesin pencari) dan tidak ada informasi sensitif. Saat Anda menggunakan GET, data formulir terlihat di bilah alamat halaman:
action_page.php?nama depan=Han&nama belakang=Meimei
Catatan: GET paling cocok untuk mengirimkan data dalam jumlah kecil. Browser akan menetapkan batas kapasitas (255 karakter).
Kapan menggunakan POST?
Anda harus menggunakan POST: jika formulir sedang memperbarui data, atau berisi informasi sensitif (seperti kata sandi). POST lebih aman karena data yang dikirimkan di bilah alamat halaman tidak terlihat.
(3) Atribut nama
Setiap kolom masukan harus memiliki atribut nama yang disetel jika ingin dikirimkan dengan benar. Contoh ini hanya akan mengirimkan kolom input Nama belakang:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>Nama belakang:<br><inputtype=textvalue=李><br>Nama depan:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>Jika Anda mengklik Kirim, data formulir akan dikirim ke halaman bernama demo_form.ashx. </p><p>Nama belakang tidak akan dikirimkan karena elemen masukan ini tidak memiliki atribut nama. </p></tubuh></html>
Hasil yang disajikan adalah sebagai berikut:
3. Kontrol formulir
Gabungkan data formulir dengan <fieldset>
Elemen <fieldset> menggabungkan data terkait dalam suatu formulir. Elemen <legend> mendefinisikan judul untuk elemen <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>Informasi pribadi:</legend>Nama belakang:<br><inputtype=textname=firstnamevalue=Mickey><br > Nama:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
Formulir digunakan untuk mengumpulkan data pengguna, yang perlu diisi di berbagai kontrol. Kontrol HTML juga diimplementasikan melalui tag, namun akan menampilkan beberapa tampilan khusus dan memiliki beberapa fungsi interaktif.
Formulir HTML dapat berisi kontrol seperti yang ditunjukkan dalam tabel berikut: