Girdi Türleri

Ders 26/45 · 5 dakika · 2 soru · 1 egzersiz

Bu dersin sonunda alınacak bilgiye uygun input türünü seçebileceksiniz.

Metin benzeri alanlar

type niteliği alanın türünü belirler. Yazılmazsa text kabul edilir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Metin alanları</title>
</head>
<body>
  <p><label for="ad">Ad:</label> <input type="text" id="ad" name="ad"></p>
  <p><label for="eposta">E-posta:</label> <input type="email" id="eposta" name="eposta"></p>
  <p><label for="sifre">Şifre:</label> <input type="password" id="sifre" name="sifre"></p>
  <p><label for="tel">Telefon:</label> <input type="tel" id="tel" name="tel"></p>
  <p><label for="site">Web sitesi:</label> <input type="url" id="site" name="site"></p>
  <p><label for="ara">Ara:</label> <input type="search" id="ara" name="ara"></p>
</body>
</html>

Telefonlarda email ve tel türleri ekrandaki klavyeyi de değiştirir. Örneğin tel seçildiğinde rakam klavyesi açılır.

Sayı, tarih ve diğerleri

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Özel alanlar</title>
</head>
<body>
  <p><label for="yas">Yaş:</label> <input type="number" id="yas" name="yas"></p>
  <p><label for="tarih">Doğum tarihi:</label> <input type="date" id="tarih" name="tarih"></p>
  <p><label for="saat">Saat:</label> <input type="time" id="saat" name="saat"></p>
  <p><label for="renk">Renk:</label> <input type="color" id="renk" name="renk"></p>
  <p><label for="ses">Ses düzeyi:</label> <input type="range" id="ses" name="ses"></p>
  <p><label for="dosya">Dosya:</label> <input type="file" id="dosya" name="dosya"></p>
</body>
</html>

type="hidden" ekranda görünmeyen bir alan oluşturur. Kullanıcının görmesi gerekmeyen bir değeri formla birlikte göndermek için kullanılır.

hidden gizli değildir

type="hidden" alanının değeri sayfanın kaynak kodunda görünür. Gizli bilgileri bu şekilde saklamayın.

Onay kutuları ve seçenek düğmeleri

checkbox Kullanıcı birden fazla seçenek işaretleyebilir.
radio Kullanıcı gruptan yalnızca birini seçebilir. Aynı gruptaki bütün düğmelerin name değeri aynı olmalıdır.
value Seçildiğinde gönderilecek değerdir.
checked Seçeneği başlangıçta işaretli yapar.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Seçimler</title>
</head>
<body>
  <form>
    <p>Hobileriniz:</p>
    <input type="checkbox" id="kitap" name="hobi" value="kitap" checked>
    <label for="kitap">Kitap</label>
    <input type="checkbox" id="spor" name="hobi" value="spor">
    <label for="spor">Spor</label>

    <p>Sınıfınız:</p>
    <input type="radio" id="dokuz" name="sinif" value="9">
    <label for="dokuz">9</label>
    <input type="radio" id="on" name="sinif" value="10">
    <label for="on">10</label>
  </form>
</body>
</html>

İşaretlenmemiş onay kutuları hiç gönderilmez.

Sık yapılan hatalar

radio düğmelerine farklı name vermek. Bu durumda kullanıcı hepsini aynı anda seçebilir.

value yazmamak. İşaretli bir onay kutusu value olmadan on olarak gönderilir ve hangi seçenek olduğu anlaşılmaz.

Telefon numarası için number kullanmak. Telefon numarası bir sayı değildir, başındaki sıfır kaybolabilir. tel kullanın.

Soru 1

Doğum günü almak için hangi tür en uygundur?

text :: Çalışır ama kullanıcıya tarih seçici sunmaz.
date :: Doğru.
number :: Tarih bir sayı değildir.

Soru 2

Kullanıcının yalnızca bir seçenek seçmesini istiyorsunuz. Ne kullanırsınız?

Farklı name değerlerine sahip radio düğmeleri :: Grup olmaları için name aynı olmalıdır.
Aynı name değerine sahip radio düğmeleri :: Doğru.
checkbox :: checkbox birden fazla seçime izin verir.

Kısa anket

Hedefteki formu yazın. Yalnızca body içine yazılacak kodu yazın. Niteliklerin sırası hedefle aynı olsun: type, id, name, value.

<form>
  <p>En sevdiğiniz ders:</p>
  <input type="radio" id="mat" name="ders" value="matematik">
  <label for="mat">Matematik</label>
  <input type="radio" id="tur" name="ders" value="turkce">
  <label for="tur">Türkçe</label>
</form>

Bu derste öğrendikleriniz

type niteliği alanın türünü belirler ve telefonda klavyeyi etkileyebilir.
checkbox birden çok seçim, radio tek seçim içindir.
Aynı gruptaki radio düğmeleri aynı name değerini taşır.

Dersi bitirdin mi?Bu dersi tamamladın.

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