شرح العنصر (textarea) في HTML

الشرح الشامل لعنصر <textarea> في HTML

HTML

مقدمة عن عنصر <textarea>

عنصر <textarea> هو عنصر HTML يُستخدم لإنشاء حقل نصي متعدد الأسطر في نماذج الويب، يسمح للمستخدمين بإدخال نصوص طويلة أو متعددة الأسطر مثل التعليقات أو الوصف أو المحتوى النصي المطول.

البنية الأساسية

<textarea rows="4" cols="50">
النص الافتراضي هنا...
</textarea>

السمات (Attributes) الرئيسية

السمات الأساسية:

• name: اسم الحقل لإرسال البيانات
• rows: عدد الأسطر المرئية (الارتفاع)
• cols: عدد الأحرف في السطر الواحد (العرض)
• placeholder: نص تلميح يظهر عند الفراغ
• disabled: يعطل الحقل عن الإدخال
• readonly: يمنع التعديل مع بقاء الحقل نشطًا
• required: يجعل الحقل إلزاميًا
• maxlength: الحد الأقصى لعدد الأحرف
• minlength: الحد الأدنى لعدد الأحرف المطلوبة
• wrap : كيفية التعامل مع فواصل الأسطر
• autocomplete : تمكين أو تعطيل الإكمال التلقائي

السمات العامة:

• id: معرف فريد للحقل
• class: فئة للتصميم
• style: أنماط CSS مدمجة
• autofocus: التركيز التلقائي عند تحميل الصفحة

أمثلة عملية

حقل تعليق أساسي

<label for="comment">أضف تعليقك:</label>
<textarea id="comment" name="comment" rows="5" cols="40"></textarea>

حقل مع نصائح وسمة required

<textarea name="bio" placeholder="أدخل سيرتك الذاتية هنا..." required></textarea>

حقل مع تحديد حجم وحدود

<textarea name="message" rows="8" cols="60" maxlength="500" 
          minlength="10" placeholder="اكتب رسالتك (10-500 حرف)"></textarea>

الاستخدام مع CSS

يمكن تنسيق <textarea> باستخدام CSS:

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  resize: vertical; /* التحكم في إعادة الحجم */
  font-family: Arial, sans-serif;
}

textarea:focus {
  border-color: #4CAF50;
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}

أفضل الممارسات

• استخدم <label>: ربط تسمية واضحة مع الحقل
• حدد حجمًا مناسبًا: استخدم rows و cols أو CSS
• وفر إرشادات واضحة: استخدام placeholder أو نص مساعد
• تحكم في إعادة الحجم: باستخدام خاصية CSS resize
• تحقق من الصحة: استخدم required و minlength/maxlength

التوافق مع المتصفحات

عنصر <textarea> مدعوم في جميع المتصفحات الحديثة والقديمة، بما في ذلك:

Chrome

مدعوم بالكامل

Firefox

مدعوم بالكامل

Safari

مدعوم بالكامل

Edge

مدعوم بالكامل

Internet Explorer

منذ الإصدارات القديمة

Opera

مدعوم بالكامل

الاستخدام المتقدم

مع JavaScript:

// الحصول على قيمة textarea
const message = document.querySelector('textarea').value;

// تعيين قيمة
document.querySelector('textarea').value = 'نص جديد';

// تعطيل/تمكين
document.querySelector('textarea').disabled = true;

// مراقبة التغييرات
document.querySelector('textarea').addEventListener('input', function() {
  console.log('تم تغيير النص: ', this.value);
});

مع مكتبات JavaScript:

// jQuery مثال مع
$('textarea').on('change', function() {
  alert('تم تغيير المحتوى!');
});

الفروق بين <textarea> و <input type="text">

الميزة	<textarea>	<input type="text">
عدد الأسطر	متعدد الأسطر	سطر واحد فقط
عنصر الإغلاق	يحتاج إلى وسم إغلاق	عنصر ذاتي الإغلاق
القيمة الافتراضية	بين وسمي الفتح والإغلاق	باستخدام سمة value
التنسيق	يحافظ على تنسيق النص	لا يحافظ على تنسيق الأسطر
التحكم في الحجم	باستخدام rows و cols	باستخدام size أو CSS

إمكانية الوصول (Accessibility)

لتحسين إمكانية الوصول:

• استخدم <label> مع for و id متطابقين
• أضف وصفًا باستخدام aria-describedby إذا لزم الأمر
• تأكد من أن التباين اللوني كافٍ

<label for="feedback">ملاحظاتك:</label>
<textarea id="feedback" name="feedback" 
          aria-describedby="feedback-help"></textarea>
<span id="feedback-help">الرجاء إدخال ملاحظاتك المفصلة</span>

حالات الاستخدام الشائعة

• نماذج الاتصال: لحقل الرسالة
• أنظمة التعليقات: لإدخال التعليقات
• منتديات النقاش: لكتابة المشاركات
• التقييمات والمراجعات: لوصف التجربة
• لوحات التحكم: لإدخال المحتوى المطول

الخلاصة

عنصر <textarea> هو أداة أساسية في HTML لإنشاء حقول إدخال نصوص متعددة الأسطر. عند استخدامه بشكل صحيح مع:

• تسميات واضحة
• إرشادات مناسبة
• تحكم في الحجم
• تحقق من الصحة

يمكنك توفير تجربة مستخدم ممتازة لإدخال النصوص الطويلة. تذكر أن <textarea> يحافظ على تنسيق النص (مثل الأسطر الجديدة والمسافات) مما يجعله مثاليًا للمحتوى المنسق.

كيف كان المقال؟