Baricode LMS - Tag Form & Action

Tag Form & Action 📋

Form adalah elemen HTML yang memungkinkan pengguna mengirimkan data ke server — mulai dari login, registrasi, pencarian, pemesanan, hingga komentar. Hampir semua interaksi pengguna di web melibatkan form.

Struktur Dasar

Tag pembungkus seluruh elemen form adalah <form>:

<form action="/proses.php" method="POST">
  <!-- elemen input di sini -->
  <button type="submit">Kirim</button>
</form>

Dua atribut terpenting pada <form>:

action — ke mana data dikirim (URL tujuan)
method — cara pengiriman data (GET atau POST)

Atribut `action`

action menentukan URL endpoint yang akan menerima dan memproses data form:

<!-- Kirim ke file PHP di server -->
<form action="/proses-login.php">...</form>

<!-- Kirim ke halaman yang sama -->
<form action="">...</form>
<form action="#">...</form>

<!-- Kirim ke API endpoint -->
<form action="https://api.example.com/submit">...</form>

<!-- Kirim ke halaman lain di proyek -->
<form action="/halaman-sukses.html">...</form>

Jika atribut action tidak dicantumkan, data dikirim ke URL halaman saat ini secara default.

Atribut `method` — GET vs POST

method menentukan metode HTTP yang digunakan untuk mengirim data:

<!-- Method GET -->
<form action="/cari" method="GET">
  <input type="text" name="kata-kunci">
  <button type="submit">Cari</button>
</form>

<!-- Method POST -->
<form action="/login" method="POST">
  <input type="email" name="email">
  <input type="password" name="password">
  <button type="submit">Masuk</button>
</form>

Perbedaan GET vs POST

Aspek	GET	POST
Data tampil di URL	✅ Ya — `?nama=Budi&email=...`	❌ Tidak
Keamanan	Kurang aman	Lebih aman
Panjang data	Terbatas (~2000 karakter)	Tidak terbatas
Bisa di-bookmark	✅ Ya	❌ Tidak
Cocok untuk	Pencarian, filter, query	Login, registrasi, upload
Cache browser	Di-cache	Tidak di-cache

Contoh URL setelah submit GET:

https://tokobuku.com/cari?judul=html+dasar&kategori=pemrograman&harga=50000

Data tampil jelas di URL — cocok untuk pencarian karena bisa dibagikan dan di-bookmark.

POST menyembunyikan data di body request — cocok untuk data sensitif seperti password atau data pribadi.

Atribut `enctype` — Tipe Encoding Data

enctype menentukan bagaimana data form diencode sebelum dikirim ke server:

<!-- Default — untuk form teks biasa -->
<form action="/submit" method="POST" 
      enctype="application/x-www-form-urlencoded">
  ...
</form>

<!-- Wajib untuk form yang mengandung upload file -->
<form action="/upload" method="POST" 
      enctype="multipart/form-data">
  <input type="file" name="foto">
  <button type="submit">Upload</button>
</form>

<!-- Data dikirim tanpa encoding apapun -->
<form action="/submit" method="POST" 
      enctype="text/plain">
  ...
</form>

Nilai `enctype`	Kapan digunakan
`application/x-www-form-urlencoded`	Default — form teks biasa
`multipart/form-data`	Wajib jika ada `<input type="file">`
`text/plain`	Jarang digunakan, biasanya untuk debugging

Atribut `target` pada Form

Sama seperti tag <a>, form juga memiliki atribut target untuk menentukan di mana response ditampilkan:

<!-- Tampilkan response di tab yang sama — default -->
<form action="/submit" method="POST" target="_self">...</form>

<!-- Tampilkan response di tab baru -->
<form action="/submit" method="POST" target="_blank">...</form>

Atribut `novalidate`

Menonaktifkan validasi bawaan browser — berguna saat validasi ditangani oleh JavaScript atau server:

<form action="/submit" method="POST" novalidate>
  <input type="email" name="email" required>
  <button type="submit">Kirim</button>
</form>

Tanpa novalidate, browser akan memvalidasi email dan field required sebelum data dikirim.

Atribut `autocomplete`

Mengontrol apakah browser boleh mengisi otomatis nilai form dari riwayat sebelumnya:

<!-- Aktifkan autocomplete — default -->
<form action="/submit" autocomplete="on">...</form>

<!-- Nonaktifkan autocomplete — untuk data sensitif -->
<form action="/submit" autocomplete="off">...</form>

Elemen Penting di Dalam Form

Form bukan hanya <input> — ada beberapa elemen pendukung yang penting:

<label> — Label Input:

Menghubungkan teks keterangan dengan elemen input. Klik label = fokus ke input:

<!-- Cara 1 — menggunakan atribut for dan id -->
<label for="nama">Nama Lengkap</label>
<input type="text" id="nama" name="nama">

<!-- Cara 2 — input di dalam label -->
<label>
  Nama Lengkap
  <input type="text" name="nama">
</label>

Selalu gunakan <label> — sangat penting untuk aksesibilitas karena screen reader membacakan label saat input difokuskan.

<fieldset> dan <legend> — Mengelompokkan Input:

<form action="/daftar" method="POST">

  <fieldset>
    <legend>Data Pribadi</legend>
    <label for="nama">Nama Lengkap</label>
    <input type="text" id="nama" name="nama"><br><br>

    <label for="tgl-lahir">Tanggal Lahir</label>
    <input type="date" id="tgl-lahir" name="tgl-lahir">
  </fieldset>

  <fieldset>
    <legend>Data Akun</legend>
    <label for="email">Email</label>
    <input type="email" id="email" name="email"><br><br>

    <label for="password">Password</label>
    <input type="password" id="password" name="password">
  </fieldset>

  <button type="submit">Daftar Sekarang</button>

</form>

Hasilnya:

┌─ Data Pribadi ──────────────────────┐
│ Nama Lengkap: [________________]    │
│ Tanggal Lahir: [________________]   │
└─────────────────────────────────────┘

┌─ Data Akun ─────────────────────────┐
│ Email: [________________]           │
│ Password: [________________]        │
└─────────────────────────────────────┘

[Daftar Sekarang]

Contoh Form Login Lengkap

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <style>
    * { box-sizing: border-box; }

    body {
      font-family: sans-serif;
      background: #f0f4ff;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      margin: 0;
    }

    .form-card {
      background: white;
      padding: 40px;
      border-radius: 16px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.1);
      width: 100%;
      max-width: 420px;
    }

    h2 {
      margin: 0 0 24px;
      color: #1e1e1e;
      font-size: 24px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 6px;
      font-size: 14px;
      font-weight: 600;
      color: #374151;
    }

    input {
      width: 100%;
      padding: 10px 14px;
      border: 1px solid #d1d5db;
      border-radius: 8px;
      font-size: 15px;
      transition: border-color 0.2s;
      outline: none;
    }

    input:focus {
      border-color: #4a9eed;
      box-shadow: 0 0 0 3px rgba(74, 158, 237, 0.15);
    }

    .btn-submit {
      width: 100%;
      padding: 12px;
      background-color: #4a9eed;
      color: white;
      border: none;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      transition: background-color 0.2s;
    }

    .btn-submit:hover {
      background-color: #2563eb;
    }

    .form-footer {
      text-align: center;
      margin-top: 16px;
      font-size: 14px;
      color: #6b7280;
    }

    .form-footer a {
      color: #4a9eed;
      text-decoration: none;
    }
  </style>
</head>
<body>

  <div class="form-card">
    <h2>Masuk ke Akun</h2>

    <form action="/login" method="POST" autocomplete="off">

      <div class="form-group">
        <label for="email">Alamat Email</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          placeholder="[email protected]"
          required
        >
      </div>

      <div class="form-group">
        <label for="password">Password</label>
        <input 
          type="password" 
          id="password" 
          name="password" 
          placeholder="Masukkan password Anda"
          required
        >
      </div>

      <button type="submit" class="btn-submit">Masuk</button>

    </form>

    <div class="form-footer">
      Belum punya akun? <a href="/daftar">Daftar sekarang</a>
    </div>
  </div>

</body>
</html>

Contoh Form Registrasi dengan Fieldset

<form action="/daftar" method="POST" enctype="multipart/form-data">

  <fieldset>
    <legend>Informasi Pribadi</legend>

    <div class="form-group">
      <label for="nama-depan">Nama Depan</label>
      <input type="text" id="nama-depan" name="nama_depan" required>
    </div>

    <div class="form-group">
      <label for="nama-belakang">Nama Belakang</label>
      <input type="text" id="nama-belakang" name="nama_belakang">
    </div>

    <div class="form-group">
      <label for="tgl-lahir">Tanggal Lahir</label>
      <input type="date" id="tgl-lahir" name="tgl_lahir" required>
    </div>

    <div class="form-group">
      <label for="foto">Foto Profil</label>
      <input type="file" id="foto" name="foto" accept="image/*">
    </div>
  </fieldset>

  <fieldset>
    <legend>Informasi Akun</legend>

    <div class="form-group">
      <label for="reg-email">Email</label>
      <input type="email" id="reg-email" name="email" required>
    </div>

    <div class="form-group">
      <label for="reg-password">Password</label>
      <input type="password" id="reg-password" name="password" 
             minlength="8" required>
    </div>

    <div class="form-group">
      <label for="konfirmasi">Konfirmasi Password</label>
      <input type="password" id="konfirmasi" name="konfirmasi_password" required>
    </div>
  </fieldset>

  <button type="submit">Daftar Sekarang</button>
  <button type="reset">Reset Form</button>

</form>

Atribut `name` — Sangat Penting!

Setiap input yang datanya ingin dikirim wajib memiliki atribut name. Inilah yang menjadi key/kunci data saat diterima server:

<!-- Input TANPA name — datanya tidak akan terkirim -->
<input type="text" id="nama">

<!-- Input DENGAN name — datanya terkirim sebagai "nama=nilai" -->
<input type="text" id="nama" name="nama">

Saat form di-submit, server menerima data seperti ini:

nama=Budi Santoso
[email protected]
password=rahasia123

Ringkasan Atribut `<form>`

Atribut	Fungsi	Nilai Umum
`action`	URL tujuan pengiriman data	URL relatif / absolut
`method`	Metode HTTP pengiriman	`GET`, `POST`
`enctype`	Cara encode data	`application/x-www-form-urlencoded`, `multipart/form-data`
`target`	Di mana response ditampilkan	`_self`, `_blank`
`autocomplete`	Izinkan autocomplete browser	`on`, `off`
`novalidate`	Nonaktifkan validasi browser	Boolean

Checklist Form yang Baik ✅

✓ Selalu gunakan method POST untuk data sensitif
✓ Gunakan enctype="multipart/form-data" jika ada upload file
✓ Setiap input memiliki atribut name
✓ Setiap input memiliki label yang terhubung via for dan id
✓ Gunakan fieldset dan legend untuk mengelompokkan input
✓ Tambahkan atribut required untuk field wajib
✓ Gunakan autocomplete="off" untuk data sensitif
✓ Sertakan tombol reset jika form panjang dan kompleks

💡 Tips: Atribut action dan method pada form hanyalah instruksi pengiriman data — siapa yang benar-benar memproses data adalah kode di sisi server (PHP, Python, Node.js, dll). Di tahap belajar HTML murni, kita fokus dulu pada struktur form yang benar. Pemrosesan data di server adalah materi back-end yang dipelajari setelah menguasai HTML dan CSS. 🚀

Tag Form & Action

Tag Form & Action 📋

Struktur Dasar

Atribut `action`

Atribut `method` — GET vs POST

Perbedaan GET vs POST

Atribut `enctype` — Tipe Encoding Data

Atribut `target` pada Form

Atribut `novalidate`

Atribut `autocomplete`

Elemen Penting di Dalam Form

Contoh Form Login Lengkap

Contoh Form Registrasi dengan Fieldset

Atribut `name` — Sangat Penting!

Ringkasan Atribut `<form>`

Checklist Form yang Baik ✅

Informasi Kursus

Pelajaran dalam Kategori Ini

Tag Form & Action

Tag Form & Action 📋

Struktur Dasar

Atribut action

Atribut method — GET vs POST

Perbedaan GET vs POST

Atribut enctype — Tipe Encoding Data

Atribut target pada Form

Atribut novalidate

Atribut autocomplete

Elemen Penting di Dalam Form

Contoh Form Login Lengkap

Contoh Form Registrasi dengan Fieldset

Atribut name — Sangat Penting!

Ringkasan Atribut <form>

Checklist Form yang Baik ✅

Informasi Kursus

Pelajaran dalam Kategori Ini

Atribut `action`

Atribut `method` — GET vs POST

Atribut `enctype` — Tipe Encoding Data

Atribut `target` pada Form

Atribut `novalidate`

Atribut `autocomplete`

Atribut `name` — Sangat Penting!

Ringkasan Atribut `<form>`