Belajar HTML Form Part 1 - Mengenal Form dalam HTML

Assalamu'alaikum warohmatullaahi wabarokaatuh.

Pada postingan kali ini kita akan mulai mempelajari tentang form dalam HTML. Elemen <form> pada HTML digunakan untuk menerima input dari user. Sebuah elemen <form> diapit dengan tag pembuka <form> dan tag penutup </form>

<form>
. Isi form . 
</form>

Dalam sebuah form, kita bisa memasukkan berbagai macam inputan seperti input teks, radiogroup, checkbox, dsb. Untuk mengawali, kita coba mempraktekkan penggunaan form dengan inputan teks. Sintaks dasarnya adalah dengan tag <input> tanpa tag penutup.

Contoh penggunaan form input teks dalam sebuah halaman HTML :

<form>
  Nama Depan:<br>
  <input type="text" name="namadepan">
  <br>
  Nama Belakang:<br>
  <input type="text" name="namabelakang">
</form>

Simpan file tersebut, kemudian jalankan pada web browser. Berikut tampilan yang dihasilkan :

ATRIBUT PADA FORM

1. Atribut Action

Atribut Action digunakan untuk menspesifikasikan halaman yang akan dieksekusi ketika sebuah form dikirimkan. Contoh :

<form action="action_page.php">

Dengan script di atas, ketika user mengirim informasi yang dia input, misal dengan menekan tombol submit, maka form akan mengeksekusi halaman action_page.php. Namun jika atribut action ini dilewati (tidak ditulis), maka form akan mengeksekusi halaman itu sendiri.

2. Atribut Method

Atribut Method digunakan untuk menspesifikasikan metode pengiriman data yang digunakan. Ada dua metode yang biasa digunakan. Yaitu GET dan POST.

Method GET digunakan jika data yang dikirim bersifat pasif (hanya mengirim data saja) dan tidak mengandung data yang sensitif (misal password). Contoh penggunaan method GET :

<form action="action_page.php" method="get">

Dengan menggunakan method GET, maka data yang dikirim akan tampil pada alamat URL seperti berikut :

action_page.php?firstname=Mickey&lastname=Mouse

Method POST digunakan jika form yang dikirim perlu melakukan perubahan data dan jika data mengandung data yang sensitif (misal password). Contoh penggunaan method POST :

<form action="action_page.php" method="post">

Dengan menggunakan method POST, maka data yang dikirim tidak akan tampil pada alamat URL.

3. Atribut Name

Agar data yang terdapat dalam form bisa dikirim dan dieksekusi dengan benar, maka penting untuk memberi nama kepada masing-masing elemen dalam form. Contoh :

<form>
  Nama Depan:<br>
  <input type="text" name="namadepan">
  <br>
  Nama Belakang:<br>
  <input type="text" name="namabelakang">
</form>

Dalam form di atas, dua elemen input memiliki nama yang berbeda, yaitu "namadepan" dan "namabelakang". Sehingga ketika dikirim, data yang diinput di masing-masing elemen bisa dibedakan. 4. Beberapa Atribut Lain Selain ke-3 atribut di atas, ada beberapa atribut lain seperti accept-charset untuk Character Set yang digunakan pada form, enctype, autocomplete, dan novalidate. Berikut contoh form dengan atribut lengkap :

<form action="action_page.php" method="post" target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate>
.
Isi Form
.
</form>

MENGELOMPOKKAN FORM DENGAN FIELDSET

Kita bisa membagi elemen-elemen yang terdapat pada form ke dalam beberapa kelompok dengan menggunakan tag <fieldset>. Contoh :

<form action="action_page.php">
  <fieldset>
    <legend>Personal information:</legend>
    First name:<br>
    <input type="text" name="firstname" value="Mickey">
    <br>
    Last name:<br>
    <input type="text" name="lastname" value="Mouse">
    <br><br>
    <input type="submit" value="Submit">
  </fieldset>
</form>

Simpan dan jalankan script di atas pada web browser Anda. Berikut tampilan yang dihasilkan :

Penjelasan :

• Satu kelompok dalam form ditandai dari tag pembuka <fieldset> dan tag penutup </fieldset>
• Tag <legend> berfungsi untuk memberi judul pada satu fieldset

Demikian seri belajar HTML Form tentang pengenalan HTML Form, semoga bermanfaat.

Terima kasih, wassalamu'alaikum warohmatullaahi wabarokaatuh.