Form merupakan elemen penting yang tidak jarang ada pada sebuah website. Sama seperti form dalam kehidupan sehari-hari, form digunakan untuk mendapatkan data dari pengguna
Formulir sering kita jumpai pada website yang memiliki fitur register atau pendaftaran akun. Saya yakin para pembaca di sini sudah pernah menjumpai elemen ini, seperti saat mendaftarkan akun di media sosial
Baiklah, tanpa basa-basi lagi, mari kita langsung ke intinya
Membuat Form di HTML
Untuk membuat form di HTML kita memerlukan tag yang mana pada tag ini kita akan membutuhkan dua atribut khusus dan wajib digunakan antara lain:
- action - berfungsi untuk menentukan aksi atau tindakan yang akan dilakukan pada saat data dikirim. Atribut ini akan mengirimkan data formulir ke alamat URL yang kita tentukan sendiri nanti. Jadi nilai atribut action adalah alamat URL dari file yang akan memproses data form
- metode - digunakan untuk menentukan metode apa yang akan digunakan untuk mengirim data formulir. Ada dua nilai yang perlu Anda ingat saat menggunakan atribut ini, yaitu POST dan GET
Kode diatas tidak akan menampilkan apapun ketika kita menjalankannya di browser
Nah, untuk bisa menampilkan form yang sebenarnya, kita perlu mengetahui terlebih dahulu tentang field pada HTML
Mengetahui Bidang dalam HTML
Field merupakan ruas atau bidang tempat kita akan mengisi data. Salah satu tag yang sering digunakan untuk membuat field di HTML adalah tag .
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <input type="text" name="nama"> </form> </body> </html> _Kode di atas akan menghasilkan field yang digunakan untuk mengisi nama
Tetapi bagaimana pengguna mengetahui bahwa bidang tersebut dicadangkan untuk menulis nama?
Untuk mengatasi masalah tersebut maka kita perlu menambahkan suatu label di atas tag dengan menggunakan tag .
<form action="proses.php" method="POST"> <label>Nama: </label> <input type="text" name="nama"> </form>KELUAR
Pada contoh di atas kita bisa melihat ada dua atribut yaitu type dan name. Kedua atribut ini memang sering disandingkan dengan tag ketika kita membuat form.
Lalu apa gunanya keduanya?
Untuk mengetahuinya silahkan lanjutkan membaca 🙂
Ketik atribut
Atribut type memiliki banyak nilai, namun karena ini adalah pembahasan tentang form maka saya akan menginformasikan nilai-nilai yang sering digunakan untuk membuat form antara lain
- teks - menghasilkan bidang untuk mengisi data dalam bentuk teks
- email – buat kolom untuk mengisi data email tertentu
- kata sandi - membuat bidang untuk mengisi data khusus kata sandi, bidang ini nantinya hanya menampilkan bintang atau lingkaran yang berfungsi untuk menutupi nilai aslinya. Nama juga password
- radio - menghasilkan tombol radio, dengan menggunakan input jenis ini pengguna nantinya akan disuruh memilih salah satu dari dua atau lebih opsi yang tersedia
- checkbox – menghasilkan kotak centang yang memungkinkan pengguna untuk memilih lebih dari satu opsi dari banyak daftar opsi yang disediakan
- nomor - menghasilkan bidang untuk mengisi data numerik
- tanggal – buat bidang untuk mengisi data khusus tanggal
- file - buat bidang untuk mengunggah file
- kirim – menghasilkan tombol kirim
KELUAR
Atribut nama
Atribut ini digunakan sebagai pengidentifikasi untuk nama elemen terkait. Elemen ini akan sangat berguna ketika Anda sudah mulai belajar bahasa pemrograman PHP
Karena digunakan sebagai pengenal suatu elemen, maka tidak akan menampilkan apapun saat dijalankan di browser
Selain dua atribut di atas tag juga terkadang disisipkan beberapa atribut berikut:
Atribut nilai
Atribut ini berfungsi untuk memberikan nilai default pada elemen
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <label> Nama: </label> <input type="text" name="nama" value="Kuro Neko"> </form> </body> </html>KELUAR
Atribut placeholder
Atribut placeholder berfungsi untuk menyediakan teks bantuan di lapangan. Teks ini akan muncul pada saat field kosong, jika field mulai terisi maka placeholder otomatis akan disembunyikan, namun akan muncul kembali saat kosong
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <label> Nama: </label> <input type="text" name="nama" placeholder="Masukkan nama lengkap"> </form> </body> </html> _Hasil
Atribut Diperlukan
Atribut yang akan menghasilkan kondisi sehingga elemen terkait harus diisi atau dilarang dikosongkan
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <label> Nama: </label> <input type="text" name="nama" required><br /> <input type="submit" name="simpan"> </form> </body> </html>KELUAR
Sebenarnya masih banyak lagi atribut yang dapat disisipkan ke dalam elemen , namun di sini hanya saya jelaskan yang sering digunakan saja.
Elemen Lain Untuk Membuat Form di HTML
Selain menggunakan ada juga beberapa tag atau elemen lain yang sering digunakan dalam membuat form, antara lain:
Tag HTML
Tag atau elemen merupakan sebuah field yang mampu menampung beberapa baris kata atau kalimat. Karena kelebihannya mampu menampung banyak baris kalimat, maka textarea sering digunakan sebagai kolom komentar, keterangan, catatan dan karena ini berhubungan dengan form, maka kegunaan adalah sebagai field untuk mengisi data alamat, atau data-data lain yang sangat panjang.
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <label> Alamat: </label> <textarea name="alamat"></textarea> </form> </body> </html> _KELUAR
Tag HTML
Tag merupakan sebuah representasi dari pengaturan yang digunakan untuk memilih deretan opsi atau pilihan baik itu satu ataupun lebih dari itu. Elemen ini nantinya akan menghasilkan semacam dropdown yang berisi nilai-nilai yang kita berikan sebagai pilihan untuk para pengguna.
<!DOCTYPE html> <html> <head> <title>Belajar Form di HTML</title> </head> <body> <form action="proses.php" method="POST"> <label> Kota Asal: </label> <select name="kota"> <option value="bangkalan">Bangkalan</option> <option value="bandung">Bandung</option> <option value="jakarta">Jakarta</option> <option value="malang">Malang</option> <option value="surabaya">Surabaya</option> </select> </form> </body> </html> _KELUAR
Penutupan
Sebenarnya untuk materi form dalam artikel ini saya tidak menjelaskan semuanya, saya hanya membeberkan hal-hal yang mendasar saja, karena sejujurnya materi form sangat banyak dan tidak mungkin untuk dijadikan satu artikel saja.
Oleh karena itu, khusus untuk tutorial bentuk, saya telah membuat bab tersendiri yang dapat Anda baca di sini