HTML Textarea
Önceki ders form="id" ve form* ile sahiplik ve gönderim yönlendirmesini ele aldı. Textarea başka iş: yorum ve notlar için çok satırlı kontrol. Tek satırlık input paragraflar için zayıf kalır. Kullanıcı birden fazla satır yazacaksa textarea kullanın.
Neden textarea var
İletişim, destek, biyografi ve inceleme kutuları kaydırılabilir yükseklik ister. Textarea o metni tek adlı alan olarak gönderir. Label, name ve boyut ipuçları hâlâ gerekir — ama içerik etiketler arasındadır, input'taki gibi value'da değil.
Doğrudan yanıt
1) id, name, rows ile textarea yazın. 2) for ile label bağlayın. 3) Varsayılan metni etiketler arasına koyun — value değil. 4) İsteğe bağlı: placeholder, maxlength, readonly, disabled, required, wrap. 5) Çok satırlı giriş — önceki form= ilişkisi değil.
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
Geri bildirim formu: etiketli mesaj kutusu
Kısa geri bildirim e-postayı tek satır input, mesajı textarea tutar. Başlangıç metni etiketler arasındadır.
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
Geri bildirim demosunu okuyun
- Çok satırlı kontrol textarea, input değil
- id label for ile eşleşir
- name gönderilen paragrafı anahtarlar
- rows/cols boyut ipucu verir
- Varsayılan metin etiketler arasında
- Label'ları net tutun
- Burada form= gerekmez — alanlar form içinde
Boyut, sınırlar ve wrap
İkinci demo: maxlength ve wrap=soft'lu biyografi; cols yerine CSS. Salt okunur özette readonly.
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
Boyut demosunu okuyun
- maxlength uzunluğu sınırlar
- wrap=soft görsel kırılımlar için (hard değil)
- CSS width ve resize inceltir
- readonly görünür, düzenlenmez
- Gönderim için name hâlâ gerekir
- Sonraki: listeden seçmek için select
Textarea mı input mu
- Kısa tek satır: input
- Paragraf/mesaj: textarea
- Boyut rows ve CSS ile; cols eski ipucu
- Varsayılan içerik etiketler arasında — value değil
- Her zaman label ve name
- Mümkünse form içinde
- formaction/sahiplik ile karıştırmayın
Alıştırma — kurun ve boyutlandırın
- Geri bildirimi kopyalayın; etiketler arası metni değiştirin
- rows'u küçültün
- maxlength ekleyin
- cols'u CSS width ile değiştirin
- Kısa value deneyip kaldırın
- Cümle: textarea etiketler arasında; input value ile
- Listeler sonraki select'te
Kolay hatalar
- Varsayılan metni value'da tutmak
- name unutmak
- Label yok
- Birkaç satır gerekirken tek satır input
- form=/formaction karışıklığı
- Duyarlı genişlik için yalnızca cols
- readonly yerine disabled
Özet
- textarea = çok satırlı metin
- label ve genellikle name
- Varsayılan metin etiketler arasında
- rows/CSS; isteğe bağlı maxlength, placeholder, readonly
- Önceki form ilişkilendirme öznitelikleri değil
- Sonraki: select
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek