❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
عودة للدرس❯ ❮عودة للدرس

HTMLالوسم <textarea>

  • تعريفه
  • دعم المتصفحات
  • خصائصه
  • إستخدامه
  • تصميمه الإفتراضي
  • نصائح و ملاحظات

تعريفه

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

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

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

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

خصائصه


الخاصية autofocus

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 4 10 مدعوم مدعوم مدعوم 4 ؟ ؟ مدعوم


الخاصية cols

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية disabled

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية form

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية maxlength

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
4 12 4 ≤12.1 5 ≤37 18 4 ≤12.1 5 1.0


الخاصية minlength

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
40 17 51 27 10.1 40 40 51 27 10.3 4.0


الخاصية name

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية placeholder

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
4 12 4 ≤12.1 5 ≤37 18 4 ≤12.1 5 1.0


الخاصية readonly

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية required

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
4 12 4 ≤12.1 5 ≤37 18 4 ≤12.1 5 1.0


الخاصية rows

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
1 12 1 ≤12.1 ≤4 1 18 4 ≤12.1 ≤3 1.0


الخاصية spellcheck

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

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

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


الخاصية wrap

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

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

Chrome Edge Firefox Opera Safari Android
Webview		 Chrome
for Android		 Firefox
for Android		 Opera
for Android		 Safari
for IOS		 Samsung
Internet
مدعوم 12 مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم مدعوم

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

القيمة معناها
hard لجعل المتصفح يرسل النص المدخل في الوسم تماماً كما يراه المستخدم.
هذه القيمة تعتمد بشكل أساسي على عدد الأحرف القصوى التي يمكن إدخالها في كل سطر و التي يتم تحديدها بواسطة الخاصية cols.
soft لجعل المتصفح يرسل النس المدخل في الوسم كسطر واحد فقط مع الحفظا على المسافات الفارغة بين الكلمات.

إستخدامه

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

المثال الأول

<label for="biography">Biography</label><br>
<textarea name="biography" id="biography">Harmash.com is published in 2014.</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>
<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>
<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>
<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>
<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;
}
textarea { resize: none; }

جرب الكود

عودة للدرس❯ ❮عودة للدرس