23 – مربعات النصوص < textarea > – النماذج (Forms) – المستوى الثاني متوسط
📌 مربعات النصوص <textarea>
🔹 ما هو <textarea>؟
-
عنصر يُستخدم لإدخال نصوص طويلة أو متعددة الأسطر من المستخدم.
-
مختلف عن <input type=”text”> لأنه:
-
يقبل أكتر من سطر.
-
الحجم بتاعه ممكن يتغير (Resizable).
-
مناسب للتعليقات، الرسائل، العناوين الطويلة… إلخ.
-
✅ التركيب الأساسي:
🔹 الخصائص (Attributes) المهمة
1. name
-
اسم الحقل اللي هيتبعت للسيرفر.
✅ مثال:
2. rows و cols
-
بتحدد عدد الأسطر (rows) وعدد الأعمدة (cols) الافتراضية.
✅ مثال:
🔎 النتيجة: مربع 5 أسطر × 40 عمود.
3. placeholder
-
نص إرشادي يظهر داخل المربع قبل الكتابة.
✅ مثال:
4. required
-
يجعل المربع إجباري (لا يمكن إرسال النموذج بدونه).
✅ مثال:
5. readonly
-
يخلي المربع للعرض فقط (المستخدم يقدر ينسخ النص لكن مش يعدله).
✅ مثال:
6. disabled
-
يعطل المربع نهائيًا (لا يمكن الكتابة أو الإرسال).
✅ مثال:
7. القيمة الافتراضية (Default Value)
-
أي نص تكتبه بين وسم البداية <textarea> ووسم النهاية </textarea> يظهر كنص افتراضي.
✅ مثال:
🔹 الفرق بين <textarea> و <input type=”text”>
| الخاصية | <input type=”text”> | <textarea> |
|---|---|---|
| الأسطر | سطر واحد فقط | متعدد الأسطر |
| التحكم بالحجم | ثابت (عرض × ارتفاع) | المستخدم يقدر يغير الحجم بالسحب |
| الاستخدام | الاسم، الإيميل، البيانات القصيرة | التعليقات، الرسائل، النصوص الطويلة |
🔹 مثال عملي كامل
🔎 النتيجة: مربع نص كبير يكتب فيه المستخدم تعليقات متعددة الأسطر.
🔹 ملخص
-
<textarea> = لإدخال نصوص متعددة الأسطر.
-
خصائصه:
-
rows + cols → حجم مبدئي.
-
placeholder → نص إرشادي.
-
required → إجباري.
-
readonly → للعرض فقط.
-
disabled → معطل.
-
القيمة بين الوسمين = نص افتراضي.
-
-
مناسب للتعليقات، الملاحظات، السير الذاتية، الرسائل…
Call now
Contact WhatsApp
