HTML form tag | belajar <form> element

HTML Fadlullah Fadul December 3, 2018

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:

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
HTML 
<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.

HTML 
<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.

HTML 
<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

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

SOURCE
editor 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML form tag</title>
    <style>

    </style>
  </head>
  <body>
    <h1>Berlangganan Artikel</h1>

    <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>

    <p><small>*form diatas hanyalah sebuah contoh dan tidak dapat digunakan untuk berlangganan artikel melalui email.</small></p>
  </body>
</html>
SHARE
Previous Article Next Article