HTMLالوسم <textarea>

تعريفه

نستخدم الوسم <textarea> على النحو التالي لإضافة مربع نص متعدد الأسطر في الصفحة.

<label id="textarea-id">text<label>
<textarea id="textarea-id">

• مكان الكلمة textarea-id نضع id الوسم <textarea>.
• مكان الكلمة text نضع عنوان للوسم <textarea> للإشارة إلى ما هو الهدف منه.

دعم المتصفحات

الجدول التالي يظهر المتصفحات التي تدعم الوسم <textarea>.

خصائصه

الخاصية autofocus

يمكن إضافتها للوسم لإعلام المتصفح أنه عند فتح الصفحة سيتم إعتبار أن المستخدم يقف عنده.
ملاحظة: لا يجب وضع هذه الخاصية لأكثر من وسم في نفس الصفحة لأنه لا يمكن الوقوف عند أكثر من وسم في وقت واحد.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية cols

يمكن إضافتها للوسم لتحديد عدد الأحرف القصوى التي يمكن أن تظهر في كل سطر.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف القصوى التي نريدها أن تظهر في كل سطر مع الإشارة إلى أنه إفتراضياً عدد الأحرف القصوى في كل سطر هو 20.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية disabled

يمكن إضافتها للوسم لجعله غير مفعل مما يعني أنه سيظهر في الصفحة و لكن لن يكون بإمكان المستخدم النقر عليه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية form

يمكن إضافتها للوسم لتحديد إلى أي نموذج هو تابع و هذا الأمر يمكنك فعله في حال كان الوسم موضوع خارج النموذج و تريد ربطه به.
يجب وضع id النموذج الذي يتبع له كقيمة للخاصية.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية maxlength

يمكن إضافتها للوسم لتحديد أكبر عدد أحرف يمكن إدخالها فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف القصوى التي نريد جعل المستخدم قادر على إدخالها مع الإشارة إلى أنه إفتراضياً يمكنه إدخال ما شاء فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية minlength

يمكن إضافتها للوسم لتحديد أدنى عدد أحرف يجب إدخالها فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأحرف الأدنى التي نريد جعل المستخدم مجبر على أن لا يدخل أقل منها مع الإشارة إلى أنه إفتراضياً يمكنه عدم إدخال أي حرف إن شاء ذلك.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية name

يجب إضافتها للوسم بهدف إعطاءه إسم حتى يتم إرسال الإسم و القيمة المختارة فيه مع البيانات التي يتم إرسالها في النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية placeholder

يمكن إضافتها للوسم لإظهار نص مساعد بداخل الوسم حين يكون فارغاً.
يجب تمرير النص الذي سيظهر في حال كان فارغاً كقيمة لها.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية readonly

يمكن إضافتها للوسم لجعل قيمته غير قابلة للتغيير.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية required

يمكن إضافتها له لإجبار المستخدم على اختيار قيمة عنصر غير فارغ (أي يظهر عليه نص) حتى يتمكن من النقر على زر الإرسال الموضوع في النموذج.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية rows

يمكن إضافتها للوسم لتحديد عدد الأسطر التي يمكن يسعها, أي كأننا نحدد طوله في الصفحة نسبةً لعدد الأسطر التي يمكن أن تظهر فيه.
يجب إعطاءها عدد أكبر من 0 يمثل عدد الأسطر القصوى التي نريدها أن تظهر فيه.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

الخاصية spellcheck

يمكن إضافتها للوسم لتحديد ما إن كان يجب التأكد من عدم وجود أخطاء إملائية في النص الذي يتم إدخاله أم لا.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية spellcheck لتحديد كيف سيتم التعامل مع النص الذي يتم إدخاله في الوسم.

الخاصية wrap

يمكن إضافتها للوسم لتحديد ما إن كان سيتم إرسال النص الذي يتم إدخاله فيه كما يظهر بالضبط فيه أم أنه سيتم إرساله و كأنه مكتوب على سطر واحد.

الجدول التالي يظهر المتصفحات التي تدعم هذه الخاصية.

يجب تمرير إحدى القيم التالية المهيئة مسبقاً كقيمة للخاصية wrap لتحديد كيف سيتم إرسال النص الذي يتم إدخاله في الوسم.

إستخدامه

في المثال التالي قمنا بإضافة مربع نص متعدد الأسطر بواسطة الوسم <textarea> مع وضع قيمة أولية فيه.

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography">Harmash.com is published in 2014.</textarea>

في المثال التالي قمنا بإضافة مربع نص متعدد الأسطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر بواسطة الخاصية cols و عدد الأسطر الإفتراضية التي ستظهر فيه بواسطة الخاصية rows.

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4">Harmash.com is published in 2014.</textarea>

في المثال التالي قمنا بإضافة الخاصية readonly لمربع النص متعدد الأسطر لجعل قيمته قابلة للقراءة فقط.

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4" readonly>Harmash.com is published in 2014.</textarea>

في المثال التالي قمنا بإضافة الخاصية readonly لمربع نص المتعدد الأسطر لجعله غير مفعّل، أي لا يمكن تغيير قيمته أو نسخها.

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4" disabled>Harmash.com is published in 2014.</textarea>

في المثال التالي قمنا بإضافة الخاصية wrap="hard" لمربع نص متعدد الأسطر لجعل النص المدخل فيه يتم إرساله كما هو للموقع.
ملاحظة: الموقع الذي يعرض ما يتم إرساله يجب أن يعرضه بداخل <pre> حتى يظهر كما هو.

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography" cols="40" rows="4" wrap="hard">Harmash.com is
published in
2014.</textarea>

تصميمه الإفتراضي

لا يوجد تصميم إفتراضي له.

نصائح و ملاحظات

إفتراضياً، يستطيع المستخدم النقر على زاوية الوسم <textarea> السفلية و سحبها لتكبيره أو تصغيره.
الآن يمكنك منع المستخدم من إمكانية تكبير و تصغير حجمه بواسطة CSS كالتالي.

textarea {
    resize: none;
}