إعلان
دورة تطوير التطبيقات باستخدام لغة JavaScript في هذه الدورة ستتعلم لغة جافا سكريبت, استخدام مكتبة React.js, بناء API الموقع بواسطة Node.js, تطوير تطبيق جوال باستخدام React Native, و في نهاية الدورة ستتعلم تطوير تطبيق محادثة شبيه بتطبيق WhatsApp. تعلم الآن
دورة تطوير واجهات المستخدم في هذه الدورة ستتعلم لغة HTML و لغة CSS و لغة JavaScript. من ناحية التطبيق العملي ستتعلم طريقة بناء واجهة متجر إلكتروني مكون من ست صفحات, تحويل خمسة تصاميم PSD إلى صفحات ويب, بناء واجهة مستخدم تشبه موقع يوتيوب, بناء لوحة تحكم إحترافية. تعلم الآن
تطوير تطبيقات باستخدام لغة بايثون في هذه الدورة ستتعلم أساسيات البرمجة بلغة بايثون وصولاً إلى التعامل مع أشهر أطر العمل (Flask و Django) و ستتعلم كيف تبني متجر إلكتروني يمكن للمستخدمين البيع و الشراء من خلاله. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة PHP في هذه الدورة ستتعلم لغة PHP من الصفر, استخدام إطار العمل Laravel بشرح مفصّل و عملي, كيفية تطوير شبكة اجتماعية تشبه Instagram, بناء API لتطبيق جوال وفق أسلوب RESTful, تطوير موقع إعلانات مبوبة, تطوير نظام إدارة محتوى CMS كامل. تعلم الآن
دورة تطوير تطبيقات الويب باستخدام لغة Ruby في هذه الدورة ستتعلم البرمجة بلغة Ruby إنطلاقاً من أبسط المفاهيم وحتى بناء تطبيق حقيقي, إستخدام إطار العمل Ruby on Rails بشرح مفصّل و عملي, بناء تطبيق حقيقي عبارة عن شبكة اجتماعية تشبه تويتر, تطوير مجتمع الكتروني يشبه حسوب I/O. تعلم الآن
دورة علوم الحاسوب هذه الدورة معدة لتكون مدخل لعلوم الحاسوب و لغات البرمجة حيث ستتعرف فيها على أنظمة التشغيل و ستتعمق في نظام لينكس و في كيفية التعامل معه من خلال موجه الأوامر, بالإضافة إلى قواعد البيانات و أساسيات الشبكات و الخوادم و مبادئ الحماية والأمان في الويب. تعلم الآن

    HTML الوسم <textarea>

    تعريفه

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

    <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>
    		

    جرب الكود



    في المثال التالي قمنا بإضافة مربع نص متعدد الأسطر مع تحديد عدد الأحرف الأقصى التي يمكن أن تظهر في كل سطر بواسطة الخاصية 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;
    }
    		

    جرب الكود

    إعلان

    Eqla3Tech.com

    شروحات مكتوبة حول لغات البرمجة و تقنية المعلومات باللغة العربية مقدمة من إقلاع تك.

    لغة جافا لغة ++C قواعد البيانات نظام ويندوز نظام لينكس الشبكات تقنية المعلومات

    الدورات

    أدوات مساعدة

    الأقسام

    دورات
    مقالات أسئلة مشاريع كتب