Textarea في HTML
الدرس السابق غطى form="id" وform* للملكية ومسار الإرسال. textarea مهمة أخرى: حقل نص متعدد الأسطر للرسائل والملاحظات. input أحادي السطر لا يناسب الفقرات. استخدم textarea عندما يحتاج المستخدم أكثر من سطر.
لماذا يوجد textarea
نماذج الاتصال والتذاكر والسيرة والمراجعات تحتاج ارتفاعاً قابلاً للتمرير. textarea يرسل ذلك النص كحقل مسمّى واحد. ما زلت تحتاج label وname وإشارات حجم — لكن المحتوى يختلف عن input: النص بين الوسوم.
إجابة مباشرة
1) اكتب textarea مع id وname وrows. 2) اربط label بـ for. 3) ضع النص الافتراضي بين الوسوم — لا value. 4) اختياري: placeholder وmaxlength وreadonly وdisabled وrequired وwrap. 5) إدخال متعدد الأسطر — وليس ارتباط form= السابق.
📊 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) |
نموذج ملاحظات: صندوق رسالة
نموذج قصير يبقي البريد input أحادي السطر والرسالة textarea. نص البداية بين الوسوم ليعدّله المستخدم.
<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>
قراءة مثال الملاحظات
- التحكم متعدد الأسطر هو textarea
- id يطابق label for
- name مفتاح الفقرة المرسلة
- rows وcols يقترحان الحجم
- النص الافتراضي بين الوسوم
- أبقِ التسمية واضحة
- لا حاجة لـ form= هنا — الحقول داخل النموذج
الحجم والحدود وwrap
مثال ثانٍ لسيرة مع maxlength وwrap=soft وملاحظة CSS بدل cols. 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>
قراءة مثال الحجم
- maxlength يحد الطول
- wrap=soft للفواصل المرئية دون hard
- CSS width وresize ينعمان الحجم
- readonly يُرى دون تعديل
- name ما زال مطلوباً للإرسال
- التالي: select للاختيار من قائمة
اختيار textarea مقابل input
- سطر قصير: input
- فقرات ورسائل: textarea
- الحجم بـ rows وCSS؛ cols قديم نسبياً
- المحتوى الافتراضي بين الوسوم — لا value
- label وname دائماً
- داخل form عند الإمكان
- لا تخلط مع formaction/الملكية
تمرين — البناء والحجم
- انسخ الملاحظات وغيّر النص بين الوسوم
- قلّل rows ولاحظ الارتفاع
- أضف maxlength
- استبدل cols بعرض CSS
- جرّب value مؤقتاً ثم احذفه
- جملة: textarea بين الوسوم؛ input بـ value
- القوائم لـ select التالي
أخطاء شائعة
- نص افتراضي في value بدل بين الوسوم
- نسيان name
- بلا label
- input أحادي عندما تحتاج عدة أسطر
- الخلط مع form=/formaction
- الاعتماد على cols فقط
- disabled بدل readonly
ملخص
- textarea = نص متعدد الأسطر
- label وغالباً name
- النص الافتراضي بين الوسوم
- rows/CSS؛ اختياري maxlength وplaceholder وreadonly
- ليست سمات ارتباط النموذج السابقة
- التالي: select
🧠 اختبر معرفتك
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى