Mesaj ve konu
Konu seçimi (select) ve mesaj alanı (textarea) eklersin.
select, option ve optgroup
Bir açılır menü için <select> kullanılır; her seçenek bir <option>'dır. Seçenekleri başlık altında gruplamak için <optgroup> ve label özniteliği kullanılır.
Örneğin Kafe Dem'de konu seçimi 'Sipariş' ve 'Diğer' gruplarına ayrılabilir. optgroup ekran okuyucu için menüyü anlamlı böler ve uzun listeleri göz yormadan taranabilir hale getirir.
textarea ve maxlength
Uzun mesajlar için <textarea> kullanılır. Boyutu satır ve sütunla ayarlanabilir ama asıl önemli olan içeriktir. maxlength özniteliği yazılabilecek en fazla karakter sayısını belirler.
İpucu metnini placeholder ile ver; etiket içine varsayılan metin yazma. Çünkü placeholder silik görünür ve kullanıcı yazınca kaybolur, varsayılan değer ise gönderilir.
Uygulama Konu ve mesaj alanlarını ekle
Formuna ikinci bir <fieldset> ekle, <legend>'ı 'Konu' olsun. İçine label+select çifti ekle: label for='konu' 'Konu', select id='konu' name='konu' ve iki <optgroup> (label='Sipariş' içinde <option value='teslimat'>Teslimat</option>, label='Diğer' içinde <option value='oneri'>Öneri</option>). Sonra label+textarea çifti ekle: label for='mesaj' 'Mesaj', textarea id='mesaj' name='mesaj' maxlength='500' placeholder='Mesajınızı buraya yazın...'. textarea içine varsayılan metin yazma.
Örnek çözümü göster
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafe Dem - İletişim</title>
</head>
<body>
<form action="/bize-yazin" method="post">
<fieldset>
<legend>İletişim bilgileri</legend>
<label for="ad">Adınız</label>
<input type="text" id="ad" name="ad">
<label for="eposta">E-posta</label>
<input type="email" id="eposta" name="eposta" placeholder="ad.soyad@eposta.com" required>
<label for="telefon">Telefon</label>
<input type="tel" id="telefon" name="telefon" placeholder="+90 555 123 45 67">
</fieldset>
<fieldset>
<legend>Konu</legend>
<label for="konu">Konu</label>
<select id="konu" name="konu">
<optgroup label="Sipariş">
<option value="teslimat">Teslimat</option>
</optgroup>
<optgroup label="Diğer">
<option value="oneri">Öneri</option>
</optgroup>
</select>
<label for="mesaj">Mesaj</label>
<textarea id="mesaj" name="mesaj" maxlength="500" placeholder="Mesajınızı buraya yazın..."></textarea>
</fieldset>
</form>
</body>
</html>Kendini test et
-
Hangi etiket option'ları başlık altında gruplar?
<select> ? <option>...</option> </?> </select>- legend
- fieldset
- datalist
- optgroup
Cevabı göster
optgroup — Doğru! optgroup bir select içindeki option'ları gruplar; label başlık verir.
-
Boşluğu doldur: optgroup label'ı
<select id="konu" name="konu"> <optgroup label=____> <option value="teslimat">Teslimat</option> </optgroup> </select>Cevabı göster
<select id="konu" name="konu"> <optgroup label="Sipariş"> <option value="teslimat">Teslimat</option> </optgroup> </select> -
Etiketleri görevleriyle eşleştir
- select
- Açılır menü
- option
- Tek seçenek
- optgroup
- Seçenek grubu
- textarea
- Çok satırlı metin