0Pricing
HTML Academy · Pelajaran

Elemen form action method enctype

Siapkan elemen form dengan action, method, dan enctype.

Elemen form action method enctype adalah pelajaran HTML Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar HTML Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus HTML Academy mencakup 4 pelajaran total.

Apa Itu Formulir?

Formulir HTML adalah cara utama bagi pengguna untuk mengirimkan data ke server:

  • Login dan pendaftaran
  • Kueri pencarian
  • Checkout dan pembayaran
  • Kontak dan umpan balik

Setiap formulir dimulai dengan elemen <form>.

Elemen form

Elemen <form> membungkus semua kontrol formulir:

<form action="/submit" method="post">
  <!-- form controls go here -->
  <button type="submit">Send</button>
</form>
<!-- When the user submits, the browser sends the form data
     to the URL specified in action using the method specified -->

Atribut action

Atribut action menentukan tujuan pengiriman data formulir:

<form action="/api/login">...</form>      <!-- relative path -->
<form action="https://api.example.com/form">...</form>  <!-- absolute -->
<form action="">...</form>                 <!-- current URL (empty) -->
<form>...</form>                           <!-- no action = current URL -->

Atribut method

Atribut method mengontrol cara pengiriman data:

<form method="get">...</form>
<!-- GET: appends data to URL as query string
     example.com/search?q=html&sort=date
     Used for: search forms, filters, bookmarkable results -->

<form method="post">...</form>
<!-- POST: sends data in the request body
     Data is not visible in the URL
     Used for: login, registration, file uploads, sensitive data -->

GET vs POST

GET dan POST memiliki karakteristik yang berbeda:

  • GET — data berada dalam URL (panjang terbatas), dapat ditambahkan ke markah, disimpan dalam cache, idempoten
  • POST — data berada dalam isi permintaan (tanpa batas), tidak dapat ditambahkan ke markah, tidak disimpan dalam cache, tidak idempoten

Aturan praktis: jika pengiriman tidak mengubah state server → GET; jika mengubahnya → POST.

Atribut enctype

Atribut enctype mengontrol cara pengodean data formulir untuk permintaan POST:

<!-- Default: URL-encoded (text/form fields) -->
<form method="post" enctype="application/x-www-form-urlencoded">

<!-- For file uploads: multipart -->
<form method="post" enctype="multipart/form-data">
  <input type="file" name="avatar">
</form>

<!-- Plain text (rare): -->
<form method="post" enctype="text/plain">

Atribut novalidate

Atribut novalidate menonaktifkan validasi bawaan peramban:

<form action="/submit" method="post" novalidate>
  <!-- Validation handled by JavaScript instead -->
  <input type="email" name="email">
  <button type="submit">Submit</button>
</form>

Atribut target pada formulir

Atribut target mengontrol tempat respons ditampilkan:

<form action="/search" target="_blank">
  <!-- Response opens in a new tab -->
</form>
<!-- Values: _blank, _self, _parent, _top, or a frame name -->
<!-- Rarely used — most forms stay on the same page or use AJAX -->

autocomplete pada formulir

Atribut autocomplete mengontrol pengisian otomatis oleh peramban:

<!-- Off: disable autofill for the entire form -->
<form autocomplete="off">

<!-- On (default): allow autofill -->
<form autocomplete="on">

<!-- Better: control at the field level:
<input type="email" autocomplete="email">
<input type="current-password" autocomplete="current-password">
-->

Pengiriman Formulir dengan JavaScript

Cegah pengiriman bawaan dan tangani dengan JavaScript:

<form id="contact-form" action="/contact" method="post">
  <input type="text" name="name">
  <button type="submit">Send</button>
</form>

<script>
document.getElementById('contact-form').addEventListener('submit', async (e) => {
  e.preventDefault();  // stop normal browser submission
  const data = new FormData(e.target);
  const res = await fetch('/contact', { method: 'POST', body: data });
  // handle response...
});
</script>

action dan method Bersama-sama

Contoh formulir lengkap dengan action dan method yang benar:

<form action="/api/newsletter" method="post">
  <label for="email">Email address</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">Subscribe</button>
</form>
<!-- POST because: creating a subscription = server state change -->

Pemeriksaan Singkat

Metode formulir apa yang sebaiknya digunakan saat mengunggah file?

Ringkasan: Elemen form

Hal-hal penting tentang elemen formulir:

  • action — URL yang menerima data formulir
  • method="get" — data berada dalam URL (pencarian, filter)
  • method="post" — data berada dalam isi permintaan (data sensitif, perubahan state)
  • enctype="multipart/form-data" — diperlukan untuk mengunggah file
  • novalidate — menonaktifkan validasi peramban

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Elemen form action method enctype” gratis?

Ya — teks lengkap “Elemen form action method enctype” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus HTML Academy, upgrade ke CoddyKit PRO. Kursus HTML Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Elemen form action method enctype”?

Siapkan elemen form dengan action, method, dan enctype. Kamu berlatih HTML Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai HTML Academy?

Tidak diperlukan pengalaman sebelumnya. HTML Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Elemen form action method enctype” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran HTML Academy ini?

Ya. Setiap pelajaran HTML Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Elemen form action method enctype
  2. Jenis Input text password email number tel
  3. Elemen label dan Aksesibilitas
  4. Elemen button: submit reset button
← Kembali ke HTML Academy