0 gün Seviye 1 Avar Teknolojileri

Seçim Kutuları ve Metin Alanları

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

Bu dersin sonunda açılır listeler ve çok satırlı metin alanları yazabileceksiniz.

Açılır liste: select

select açılır bir liste oluşturur. Her seçenek bir option etiketidir. value gönderilecek değeri, etiketin içindeki metin ise görünen yazıyı belirler.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Select</title>
</head>
<body>
  <label for="sinif">Sınıfınız:</label>
  <select id="sinif" name="sinif">
    <option value="9">9. sınıf</option>
    <option value="10" selected>10. sınıf</option>
    <option value="11">11. sınıf</option>
  </select>
</body>
</html>

selected niteliği, seçeneği başlangıçta seçili yapar.

Seçenekleri gruplamak

optgroup uzun listeleri gruplara ayırır. multiple niteliği birden fazla seçime izin verir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Optgroup</title>
</head>
<body>
  <label for="yemek">Yemek seçin:</label>
  <select id="yemek" name="yemek">
    <optgroup label="Çorbalar">
      <option value="mercimek">Mercimek</option>
      <option value="domates">Domates</option>
    </optgroup>
    <optgroup label="Tatlılar">
      <option value="baklava">Baklava</option>
    </optgroup>
  </select>
</body>
</html>

Çok satırlı metin: textarea

textarea uzun yazılar içindir. rows görünen satır sayısını, cols genişliği belirler. Boş bir eleman değildir, kapanış etiketi gerekir.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Textarea</title>
</head>
<body>
  <label for="mesaj">Mesajınız:</label><br>
  <textarea id="mesaj" name="mesaj" rows="4" cols="30">Buraya yazılan metin başlangıç değeri olur.</textarea>
</body>
</html>

Öneri listesi: datalist

datalist kullanıcı yazarken öneriler sunar ama kullanıcı listede olmayan bir değer de yazabilir. input etiketinin list değeri, datalist etiketinin id değeriyle aynı olmalıdır.

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Datalist</title>
</head>
<body>
  <label for="dil">Favori dil:</label>
  <input type="text" id="dil" name="dil" list="diller">
  <datalist id="diller">
    <option value="Python"></option>
    <option value="JavaScript"></option>
    <option value="C#"></option>
  </datalist>
</body>
</html>
Hangisini seçmeli?

Yaklaşık beş seçenek veya daha azı varsa bütün seçenekler görünsün diye radio düğmeleri kullanın. Türkiye’nin 81 ili gibi uzun listelerde select daha kullanışlıdır.

Sık yapılan hatalar

<textarea> etiketini kapatmamak. Kapanış etiketi olmazsa sayfanın devamı kutunun içinde yazı olarak görünür.

textarea içine gereksiz boşluk bırakmak. Açılış ve kapanış etiketleri arasındaki her boşluk, başlangıç değerine dahil olur.

option etiketlerine value yazmamak. value yoksa görünen metin gönderilir. Metin değişirse gönderilen değer de değişir.

Soru 1

Kullanıcının uzun bir mesaj yazacağı alan için hangisi uygundur?

  • <input type="text"> :: input tek satırlıktır.
  • textarea :: Doğru.
  • select :: select hazır seçenekler içindir.
Soru 2

datalist ile select arasındaki fark nedir?

  • datalist listede olmayan değerlerin yazılmasına da izin verir :: Doğru.
  • select birden fazla seçeneğe sahip olamaz :: select birçok seçenek içerebilir.
  • datalist yalnızca sayılarla çalışır :: Metinle de çalışır.
Şehir seçimi

Hedefteki alanı yazın. Yalnızca body içine yazılacak kodu yazın. İstanbul ve Bursa, Marmara grubunda; İzmir, Ege grubunda olsun.

<label for="sehir">Şehir:</label>
<select id="sehir" name="sehir">
  <optgroup label="Marmara">
    <option value="istanbul">İstanbul</option>
    <option value="bursa">Bursa</option>
  </optgroup>
  <optgroup label="Ege">
    <option value="izmir">İzmir</option>
  </optgroup>
</select>

Bu derste öğrendikleriniz

  • select ve option açılır liste oluşturur, optgroup seçenekleri gruplar.
  • textarea çok satırlı metin içindir ve kapanış etiketi gerekir.
  • datalist yazarken öneriler sunar.

Dersi bitirdin mi?Bu dersi tamamladın.

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