شرح مفصل لـ textarea و select و option في HTML

ما هو textarea وكيفية استخدامه

تمثل العنصر textarea في HTML حقل إدخال نصي متعدد الأسطر. يتم استخدامه عندما يحتاج المستخدم إلى إدخال كمية كبيرة من النصوص، مثل التعليقات أو الأوصاف. يتميز textarea بقدرته على ضبط عدد الأسطر والأعمدة، مما يوفر مرونة في التصميم.

<textarea rows=\"4\" cols=\"50\">
        اكتب نصك هنا...
    </textarea>

في المثال أعلاه، قمنا بإنشاء عنصر textarea مع تحديد 4 أسطر و50 عمودًا كحجم افتراضي للحقل. يمكنك تخصيص هذه القيم بحسب احتياجاتك.

فهم عنصر select واستخداماته

يمثل العنصر select قائمة منسدلة تتيح للمستخدم اختيار خيار واحد أو أكثر من بين مجموعة من الخيارات المحددة. يتم استخدامه عادة عندما تكون هناك حاجة لتقديم مجموعة محدودة من الخيارات للمستخدم.

Volvo
        Saab
        Mercedes
        Audi

في المثال أعلاه، قمنا بإنشاء عنصر select يحتوي على أربع خيارات مختلفة للسيارات. يمكن للمستخدم اختيار واحدة منها.

استخدام عنصر option ضمن select

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

تفاح
        موز
        كرز

في هذا المثال، لدينا قائمة منسدلة تحتوي على ثلاثة خيارات للفواكه. تم تعيين الخيار “موز” كخيار افتراضي باستخدام الخاصية selected.

التفاعلية بين textarea و select

يمكن دمج عناصر النموذج مثل textarea وselect لتحقيق تفاعلية أكبر في صفحات الويب. على سبيل المثال، يمكن استخدام JavaScript لتحديث محتوى textarea بناءً على اختيار المستخدم من select.

تفاح
        موز
        كرز
    

    <textarea id=\"fruitInfo\" rows=\"4\" cols=\"50\">
        اختر فاكهة لمعرفة المزيد عنها.
    </textarea>

    
        function updateTextarea() {
            var select = document.getElementById(\"fruitSelect\");
            var textarea = document.getElementById(\"fruitInfo\");
            textarea.value = select.options[select.selectedIndex].value;
        }

في هذا المثال، يتم تحديث محتوى textarea تلقائيًا لعرض معلومات حول الفاكهة المختارة من القائمة المنسدلة، مما يعزز من تجربة المستخدم.