0Pricing
HTML Academy · Ders

form Öğesi: action, method ve enctype

action, method ve enctype içeren bir form öğesi oluşturmayı öğrenin.

form Öğesi: action, method ve enctype, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.

Form Nedir?

HTML formları, kullanıcıların bir sunucuya veri göndermesinin temel yoludur:

  • Oturum açma ve kayıt
  • Arama sorguları
  • Sipariş tamamlama ve ödeme
  • İletişim ve geri bildirim

Her form <form> öğesiyle başlar.

form Öğesi

<form> öğesi, tüm form denetimlerini kapsar:

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

action Özniteliği

action özniteliği, form verilerinin gönderileceği yeri belirtir:

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

method Özniteliği

method özniteliği, verilerin nasıl gönderileceğini denetler:

<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 ve POST Karşılaştırması

GET ve POST'un özellikleri farklıdır:

  • GET — URL'de veri (uzunluk sınırlı), yer imi oluşturulabilir, önbelleğe alınabilir, aynı etkiyi güvenle tekrarlayabilir
  • POST — gövdede veri (uzunluk sınırsız), yer imi oluşturulamaz, önbelleğe alınmaz, tekrarlanması aynı etkiyi garanti etmez

Pratik kural: gönderme sunucu durumunu değiştirmiyorsa → GET; değiştiriyorsa → POST.

enctype Özniteliği

enctype özniteliği, POST istekleri için form verilerinin nasıl kodlanacağını denetler:

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

novalidate Özniteliği

novalidate özniteliği, tarayıcının yerleşik doğrulamasını devre dışı bırakır:

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

form Üzerindeki target Özniteliği

target özniteliği, yanıtın nerede görüntüleneceğini denetler:

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

form Üzerinde autocomplete

autocomplete özniteliği, tarayıcının otomatik doldurma özelliğini denetler:

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

JavaScript ile Form Gönderme

Varsayılan gönderimi engelleyip JavaScript ile yönetin:

<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 ve method Birlikte

Doğru action ve method kullanılan eksiksiz form örneği:

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

Hızlı Kontrol

Bir dosya yüklerken hangi form method değerini kullanmalısınız?

Özet: form Öğesi

form öğesinin temel noktaları:

  • action — form verilerini alan URL
  • method="get" — URL'de veri (arama, filtreler)
  • method="post" — gövdede veri (hassas veriler, durum değişiklikleri)
  • enctype="multipart/form-data" — dosya yüklemeleri için gereklidir
  • novalidate — tarayıcı doğrulamasını devre dışı bırakır

Sıkça Sorulan Sorular

“form Öğesi: action, method ve enctype” dersi ücretsiz mi?

Evet — “form Öğesi: action, method ve enctype” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.

“form Öğesi: action, method ve enctype” dersinde ne öğreneceğim?

action, method ve enctype içeren bir form öğesi oluşturmayı öğrenin. HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

HTML Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“form Öğesi: action, method ve enctype” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. form Öğesi: action, method ve enctype
  2. Girdi Türleri: text, password, email, number ve tel
  3. label Öğesi ve Erişilebilirlik
  4. button Öğesi: submit, reset ve button
← HTML Academy Sayfasına Dön