Belajar Cara Membuat Form di HTML

Pada artikel ini saya akan menjelaskan bagaimana cara membuat form di HTML, atau biasa disebut juga dengan formulir. Tapi sebelum itu, ada baiknya kamu mengenal apa itu form.

Form adalah sebuah tempat penginputan data yang nantinya data tersebut akan diproses dan tersimpan disuatu server. Form biasanya mengambil data pengunjung atau user yang menggunakan form itu sendiri.

Data yang dimaksud adalah sesuatu yang kita isi pada sebuah form, seperti mengisi data pada form login, dimana server sudah mengetahui siapa pemilik data tersebut dan akan langsung mengarahkannya ke halaman yang dituju.

Ada juga form registrasi online, form pencaatatan data keryawan dan lain sebagainya yang akan tersimpan ke dalam server untuk dikenali siapa pemilik dari data tersebut.

Untuk cara kerja form sendiri, kita bisa mengambil contoh sebuah contact form. Dimana ketika kita mengisi pesan di dalamnya, maka pesan tersebut akan diproses dan dikirim ke alamat email.

Membuat Form di HTML

Tapi yang akan kita bahas disini hanyalah cara membuatnya saja ya. Untuk pemrosesan data yang telah dilakukan setelah mengisi formnya tidak kita bahas, karena akan keluar konteks pembahasan nantinya.

Cara Membuat Form di HTML

Untuk membuat Form di HTML, kita membutuhkan tag <form>. Akan tetapi, kita membutuhkan beberapa atribut pendukung untuk membuat form. Seperti,

  1. Atribut action, digunakan untuk menentukan lokasi data, ketika data telah tersubmit atau terkirim.
  2. Atribut method, digunakan untuk menentukan metode pengiriman data.

<form action=”proses.php” method=”post”>
<!– memasukan inputan –>
</form>

Kode diatas menjelaskan bahwa setelah seseorang mengisi form, data akan diproses di proses.php dengan metode POST.

Sekarang, kita membutuhkan sebuah inputan yang digunakan untuk melakukan pengisian pada form, agar form tersebut bisa diisi sesuatu dengan tugasnya.

<input type=”text” name=”username” placeholder=”username…” />

  1. type=”text” adalah tipe inputannya, karena memasukan “text” berarti tipe inputannya nanti yang harus dimasukan adalah teks.
  2. name=”username” adalah nama inputannya, yang berarti inputannya untuk memasukan sebuah username.
  3. placeholder=”username…” berfungsi untuk memberikan keterangan pada form inputan.

Membuat Form Pendaftaran

Sekarang kita coba buat sebuah form pendaftaran sederhana dengan inputan sebagai berikut:

  1. Nama Depan
  2. Nama Belakang
  3. Username
  4. Password
  5. Email
  6. Jenis Kelamin

Membuat Form Pendaftaran di HTML

Pada kode diatas ditambahkan juga <fieldset> untuk membuat garis, fungsi sebenarnya yaitu untuk mengelompokan beberapa element didalam sebuah form.

Ada juga <legend> yang berfungsi sebagai caption atau judul dari <fieldset>.

Sampai sini kamu sudah berhasil membuat sebuah form di HTML, selanjutnya kamu bisa mengembangkannya dengan menambahkan CSS di dalamnya atau menggabungkannya dengan bahasa pemrograman PHP agar ketika tombol “SUBMIT/LOGIN/DAFTAR” nya ditekan, dia bisa benar-benar di proses.

Leave a Reply