0 gün Seviye 1 Avar Teknolojileri

Form Temelleri

Ders 25/45 · 6 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda kullanıcıdan bilgi alan basit bir form yazabileceksiniz.

Bir formun parçaları

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form</title>
</head>
<body>
  <form method="get">
    <label for="ad">Adınız:</label>
    <input type="text" id="ad" name="ad">
    <button type="submit">Gönder</button>
  </form>
</body>
</html>
  • form Bütün form elemanlarını kapsar.
  • label Alanın yazılı adıdır.
  • input Kullanıcının bilgi girdiği alandır. Boş bir elemandır.
  • button type="submit" Formu gönderir.

label ve input nasıl bağlanır?

label etiketinin for değeri, input etiketinin id değeriyle aynı olmalıdır. Yukarıdaki önizlemede Adınız yazısına tıklayın: imleç kutunun içine gelir. Ekran okuyucular da alanın adını bu sayede okur.

name niteliği

name, gönderilen verinin adıdır. name yazılmayan alanlar gönderilmez.

Form gönderilince ne olur?

Önizleme kutuları formları göndermez

Bu sitedeki önizleme kutuları güvenlik nedeniyle form gönderimini engeller. Gönder düğmesine bastığınızda bir şey olmaması normaldir. Aşağıdaki denemeyi kendi index.html dosyanızda yapın.

Yukarıdaki formu kendi dosyanıza kopyalayın, bir ad yazıp Gönder düğmesine basın. Adres çubuğunun sonunda şunu görürsünüz:

index.html?ad=Ali

ad kısmı name niteliğinden, Ali kısmı ise kullanıcının yazdığı değerden gelir.

Bu verileri kaydetmek için bir sunucu programı gerekir. HTML yalnızca formu oluşturur ve veriyi gönderir.

action ve method

  • action Verinin gönderileceği adres. Yazılmazsa form aynı sayfaya gönderilir.
  • method Verinin nasıl gönderileceği.
    • get Veriyi adres çubuğunda gönderir. Arama kutuları için uygundur.
    • post Veriyi adreste göstermeden gönderir. Şifre ve kişisel bilgiler için kullanılır.
post şifreleme değildir

post veriyi yalnızca adres çubuğundan gizler. Verinin yolda okunamaması için sitenin https:// kullanması gerekir.

Düğme türleri

  • type="submit" Formu gönderir. Form içindeki düğmelerin varsayılan türüdür.
  • type="reset" Formu temizler.
  • type="button" Kendi başına hiçbir şey yapmaz, JavaScript ile kullanılır.
Sık yapılan hatalar

name yazmamak. Alan görünür ama verisi gönderilmez.

label yerine yalnızca placeholder kullanmak. placeholder kutuya soluk bir ipucu yazar ve kullanıcı yazmaya başlayınca kaybolur. Her alanın bir label etiketi olmalıdır.

for ile id değerlerini farklı yazmak. İkisi birebir aynı olmalıdır.

Soru 1

Formu gönderdiniz ama bir alanın değeri adres çubuğunda yok. En olası neden nedir?

  • O alanın name niteliği yoktur :: Doğru.
  • O alanın id niteliği yoktur :: Gönderilen verinin adı name ile belirlenir.
  • label etiketi yoktur :: label veri gönderimini etkilemez.
Soru 2

Bir arama kutusu için hangi method uygundur?

  • get :: Doğru. Arama adresi kopyalanıp paylaşılabilir.
  • post :: Arama için get tercih edilir.
  • reset :: reset bir yöntem değil, düğme türüdür.
İlk formunuz

Hedefteki formu yazın. Yalnızca body içine yazılacak kodu yazın. Etiket yazısı Adın ne?, düğme yazısı Gönder olsun. Alanın id ve name değerleri ad olsun.

<form method="get">
  <label for="ad">Adın ne?</label>
  <input type="text" id="ad" name="ad">
  <button type="submit">Gönder</button>
</form>

Bu derste öğrendikleriniz

  • label etiketinin for değeri, input etiketinin id değeriyle eşleşir.
  • name yazılmayan alanların verisi gönderilmez.
  • get veriyi adreste gösterir, post göstermez.

Dersi bitirdin mi?Bu dersi tamamladın.

İlerlemen bu tarayıcıda saklanır.