HTML <form> element

HTML form Tag - Contoh Syntax

Referensi Belajar HTML form tag. Tutorial dan panduan mengenai element <form>...</form> yang digunakan untuk memarkup sebuah form dan elemen pendukungnya. Mencakup penjelasan yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <form>.

---

Deskripsi
Penjelasan HTML form

HTML <form> element digunakan untuk menampung macam-macam element yang berkaitan dengan sebuah form. Dalam sebuah form biasanya terdapat kotak input (control) dan element lainnya yang dapat diedit kemudian ditulis untuk dikirim pada sebuah server untuk diproses guna mendapatkan informasi tertentu dari atau untuk user.
Element yang dapat digunakan untuk melengkapi sebuah form, diantaranya adalah sebagai berikut:

• <button>
• <fieldset>
• <input>
• <label>
• <legend>
• <optgroup>
• <option>
• <select>
• <textarea>

Pada spesifikasi HTML5 <form> element, terdapat atribut tambahan yaitu autocomplete dan novalidate. Adapun atribut yang dihapus dari spesifikasi sebelumnya adalah accept.

Attributes
Atribut HTML Tag <form>

accept-charset Menentukkan character encodings yang diterima oleh server sebelum form dikirim.

Value: character_set

action Menentukkan alamat (URL) yang memproses data form ketika dikirim. Tindakan ini dapat diganti dengan menyebutkan attribute formaction pada <button> atau <input> element.

Value: URL

autocomplete Menentukkan apakah input (control) secara otomatis melengkapi konten yang sebelumnya telah ditulis atau tidak. Hal ini dilakukan otomatis (jika on) oleh browser untuk menampilkan tulisan yang sebelumnya telah diinput untuk menghindari penulisan berulang kali.

Value: on atau off

enctype Menunjukkan encoding type. Konten MIME type yang digunakan untuk mengirimkan data form pada sebuah server. Ini, hanya berlaku untuk form dengan method="post".

Value:
• application/x-www-form-urlencoded: nilai bawaan (default value) jika attribute tidak disebutkan.
• multipart/form-data: nilai ini hanya digunakan jika terdapat <input> element dengan tipe attribute file.
• teks (text/plain)

Nilai (value) diatas dapat pula digunakan pada attribute formenctype untuk sebuah <button> atau <input> element.

method Menentukkan HTPP method yang digunakan oleh browser untuk mengirim data form.

Value:
• post: berkaitan dengan HTTP POST method. Metode ini digunakan untuk mengirim data form yang disisipkan pada body form dan dikirim pada server.
• get: berkaitan dengan HTTP GET method. Metode ini digunakan untuk mengirim data form yang disisipkan pada URI action attribute dengan tanda tanya (?) sebagai pemisah kemudian dikirim ke server. karakter yang digunakan adalah ASCII.

name Menentukkan nama untuk sebuah form.

Value: teks

novalidate Menunjukkan bahwa form tidak perlu divalidasi ketika dikirim pada sebuah server.

Value: novalidate

target Menentukkan tempat dari respon yang diterima setelah mengirim form.

Value: _blank | _self | _parent | _top

---

Global Attributes
Atribut Secara Global (Keseluruhan)

<form> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Silahkan, lihat referensi mengenai HTML Global Attribute

Event Attributes
Atribut event (Peristiwa)

<form> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Silahkan, lihat referensi mengenai HTML Events Attribute

Example
Contoh HTML <form> element

Contoh 1

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

  <label>Nama: <input type="text" name="name"></label>

  <label>Email: <input type="email" name="email"></label>

  <input type="submit" value="Submit">

</form>

---

Contoh 2

Contoh form pencarian.

<form action="http://www.google.com/search" method="get">

 <label>Google: <input type="search" name="q"></label> <input type="submit" value="Cari...">

</form>

---

Contoh 3

Contoh form dengan fieldset, legend dan validasi.

<form action="/buatakun.php" method=post

      oninput="up2.setCustomValidity(up2.value != up.value ? 'Password harus sama antara kotak satu dan kedua.' : '')">

  <fieldset>

    <legend>Buat Akun</legend>

    <p>

    <label for="username">E-mail:</label>

    <input id="username" type=email required name=un>

    </p>

    <p>

    <label for="password1">Password:</label>

    <input id="password1" type=password required name=up>

    </p>

    <p>

    <label for="password2">Ketik ulang password:</label>

    <input id="password2" type=password name=up2>

    </p>

    <p>

    <input type=submit value="Buat Akun">

    </p>

  </fieldset>

</form>

Perhatikan baris ke-6: <label for="username"> dapat diartikan dengan label tersebut ditujukan untuk input control dengan id="username" (baris ke-7).
Jika <input> terletak di dalam <label> element, maka attribut for tidak perlu disebutkan (lihat example 1).

Contoh Lengkap
Demo dengan Source Code Editor

Demo Editor
Demo HTML <form>

Code Editor

• CODE
• RESULT

Browser Support
Status & Dukungan Browser

Berikut adalah keterangan mengenai dukungan (support) dari beberapa browser.

HTML
Element	Chrome	Safari	Firefox	Opera	IE
<form>	Ya	Ya	Ya	Ya	Ya

---

Pengaturan awal CSS yang berlaku 

CSS untuk element <form> yang akan diberlakukan ketika awal inisial.

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