Cara Membuat Formulir HTML (Contoh Dijelaskan)

Formulir digunakan untuk mengumpulkan data dari pengguna, seperti informasi kontak, atau untuk memungkinkan pengguna berinteraksi dengan situs web, seperti mengirim komentar atau melakukan pencarian. Pada artikel ini, kita akan mempelajari cara membuat formulir dasar menggunakan HTML.

Struktur Formulir HTML

Formulir HTML dibuat menggunakan tag. Di dalam tag ini, Anda dapat memiliki berbagai elemen masukan yang berbeda, seperti bidang teks, tombol, kotak centang, tombol radio, dan lainnya.

elemen masukan buka di sini

Elemen Masukan

Bidang Teks

Bidang teks dibuat menggunakan tag dengan atribut jenis dibaringkan teks. Misalnya:

Nama:




Telepon

Elemen digunakan untuk kolom input nomor telepon.

Telepon:


Tanggal

Elemen digunakan untuk memilih tanggal.

Tanggal lahir:


Kata sandi

Elemen digunakan untuk bidang input kata sandi. Teks yang dimasukkan dalam bidang ini ditampilkan sebagai titik untuk menyembunyikan kata sandi.

Kata sandi:


Arsip

Elemen digunakan untuk memungkinkan pengguna untuk memilih file dari sistem file lokal mereka.

Unggah data:


Kotak centang

Elemen digunakan untuk kolom input yang memungkinkan pengguna memilih tidak ada, satu, atau beberapa opsi.

saya menerima syarat dan ketentuan yang berlaku

Radio

Elemen digunakan untuk bidang input yang memungkinkan pengguna memilih satu opsi dari serangkaian opsi.

Jenis kelamin:

Pria

Wanita

Nomor

Elemen digunakan untuk kolom input numerik.

Jumlah:


Jangkauan

Elemen digunakan untuk bidang input yang harus berisi nilai dari rentang nilai.

Volume:




Tombol

Tombol dibuat menggunakan tag dengan atribut jenis dibaringkan kirim. Tombol ini bila ditekan akan mengirimkan form data. Misalnya:

Nama:




Penanganan Formulir Input

Saat tombol kirim ditekan, data formulir dikirimkan untuk diproses. Ini dilakukan melalui salah satu dari dua metode: GET atau POST, yang ditentukan menggunakan atribut metode Di dalam label .

metode DAPATKAN

Metode GET mengirimkan data formulir sebagai bagian dari URL. Ini berguna untuk hal-hal seperti pencarian, di mana data formulir tidak sensitif. Namun metode ini memiliki keterbatasan dalam hal panjang data yang dapat dikirimkan.

elemen masukan buka di sini

metode POST

Metode POST mengirimkan data formulir terpisah dari URL. Ini lebih aman dan dapat menangani jumlah data yang jauh lebih besar, sehingga digunakan untuk hal-hal seperti pengiriman formulir kontak atau login.

elemen masukan buka di sini

Dalam kedua kasus, atribut tindakan digunakan untuk menentukan URL skrip sisi server yang akan memproses data formulir.

Contoh formulir HTML dengan semua elemen 

Berikut adalah formulir yang menggunakan semua elemen yang kami ulas dalam artikel ini:

Formulir pendaftaran

Nama:



Nama keluarga:



Surel:



Telepon:



Tanggal lahir:



Kata sandi:



Unggah data:



saya menerima syarat dan ketentuan yang berlaku


Jenis kelamin:

Pria

Wanita

Jumlah:



Volume:




Formulir ini memiliki kolom untuk nama depan, nama belakang, email, telepon, tanggal lahir, kata sandi, kolom untuk mengunggah a file, kotak centang untuk syarat dan ketentuan, radio untuk memilih jenis kelamin, dan kolom nomor dan jangkauan untuk kuantitas dan volume, masing-masing.

Tombol "Kirim" di bagian akhir adalah tombol yang bertanggung jawab untuk mengirimkan formulir ke URL yang ditentukan dalam atribut tindakan Dari label membentuk (dalam hal ini, "/submit_form"). Agar formulir ini berfungsi di situs web nyata, Anda harus memiliki server yang dikonfigurasi untuk menerima dan memproses informasi dari formulir ini di jalur "/submit_form".