Some text some message..
Some text some message..
Some text some message..
Some text some message..

Tag <form> Pada HTML

Previous Page

Elemen <form> pada HTML digunakan untuk menciptakan formulir dengan isian input dari pengguna. Elemen form tidak sepenuhnya menciptakan bidang formulir namun elemen ini merupakan wadah induk untuk menempatkan elemen lain terkait formulir seperti input type[text], input type[password], input type[radio], input type[checkbox], textarea, button dan lainnya.

Elemen <form> dapat mengirimkan data ke server melalui URL tujuan yang sudah ditetapkan sebelumnya. Saat anda ingin membuat konten interaktif seperti mengirimkan komentar, membuat pendaftaran member, pendaftaran email berlangganan, maupun halaman pembayaran, elemen <form> sudah pasti akan digunakan untuk menciptakan konten tersebut.

Contoh Kode

Berikut ini contoh sederhana elemen <form> :

1.  <form action="#" method="GET">
2.     <label for="name">Nama</label>
3.     <input name="nama" id="nama">
4.     <label for="email">Email</label>
5.     <input name="email" id="email">
6.     <input type="submit" value="kirim">
7.  </form>

Akan menghasilkan tampilan :


Atribut Khusus

Berikut ini atribut khusus pada elemen <form> :

  • name
    Menetapkan nama elemen <form> (deprecated)
  • action
    Menetapkan URL tujuan tempat dimana data akan diproses setelah tombol submit ditekan.
    Nilai = URL
  • method
    Memberitahukan browser, bagaimana cara mengirim data ke server.
    Nilai :
    • post, mengirimkan data dalam bentuk HTTP POST. Merupakan jenis pengiriman data melalui body halaman HTML secara langsung.
    • get, mengirimkan data dalam bentuk HTTP GET. Merupakan jenis pengiriman data dengan melewatkan parameter data melalui URL.
  • target
    Menentukan konteks pada browser, bagaimana respon browser saat data dikirimkan ke server
    Nilai : _blank | _self | _parent | _top
  • enctype
    Menentukan jenis MIME type yang digunakan untuk mengirimkan data ke server. Berlaku jika mengirim data dalam bentuk method post.
    Nilai :
    • application/x-www-form-urlencoded, nilai default
    • multipart/form-data, jika mengirimkan/menyertakan input berjenis file.
    • teks/plain
  • onSubmit
    Menjalankan script saat tombol submit ditekan.
  • onReset
    Menjalankan script saat tombol reset ditekan.

Elemen HTML yang dapat digunakan untuk menyusun sebuah formulir diantaranya :

Berikut ini contoh menggunakan tag <form> pada HTML :

Kode Script :

1.  <!DOCTYPE html>
2.  <html>
3.     <head>
4.     <meta charset="utf-8">
5.     <title>Demo tag form HTML</title>
6.  </head>
7.  <body>
8.  <form action="proses.php" method="post">
9.   <fieldset>
10.  <legend>Berlangganan Email</legend>
11.  <p>
12.    <label for="name">Nama</label>
13.    <input type="text" name="nama" id="nama" required autocomplete>
14.  </p>
15.  <p>
16.    <label for="email">Email</label>
17.    <input type="email" name="email" id="email" required>
18.  </p>
19.  <p>
20.  <input type="submit" value="Kirim">
21.  <input type="reset" value="Reset">
22.  </p>
23.  </fieldset>
24. </form>
25. </body>
26. </html>
27. 
28. 

Jika dijalankan pada browser akan menghasilkan tampilan sebagai berikut :
tag <form> html

Browser Pendukung :

Elemencromeinternet explorerfirefoxsafariopera
<form>yayayayaya

Global Attributes :

Tag <form> mendukung Global Atribut di dalam HTML yang artinya bahwa pada tag ini dapat sisipkan atribut yang bersifat global yang secara umum berlaku pada semua komponen tag HTML.
Silahkan kunjungi Atribut Global Pada HTML untuk mengetahui detail global atribut pada HTML

Event Attributes :

Tag <form> mendukung Event Atribut atau atribut acara (kejadian). Atribut acara ini merupakan wilayah javascript tentang bagaimana menampilkan halaman web. Misalnya saat halaman web sedang loading (onload) sampai interaksi user pada halaman web tersebut seperti scrolling layar (onscroll), menekan tombol pada keyboard (onkeypress, onkeydown), mengarahkan mouse (onmouseover) dan lainnya.
Silahkan kunjungi Event Atribut Pada HTML untuk mengetahui detail event atribut pada HTML.

Pengaturan Default CSS :

Nilai default pengaturan gaya untuk elemen <form> pada HTML:

form{
display: block;
margin-top: 0em;
}

noteCatatan : Pada website interaktif modern, mengirimkan data ke server tidak harus selalu menggunakan media elemen <form>. Tapi menggunakan gabungan HTML dengan Javascript ataupun jquery. Dimana Javascript dapat menangani pengiriman data melalui asynchronous HTTP request tanpa harus melakukan reload halaman HTML, tapi dilakukan dibalik layar. Dengan menggunakan fungsi AJAX, data dikirimkan ke server dibalik layar. Pada kondisi tersebut beberapa atribut seperti method dan action tidak lagi diperlukan.

facebooktwittergoogle pluswhatapplinkedinpinterest

Previous Page

Daftar Isi HTML