textarea HTML Tag

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

الكود الافتراضي


<textarea>أكتب المحتوى هنا</textarea>


الكود الافتراضي


<textarea>أكتب المحتوى هنا</textarea>


cols

تستخدم السمة cols لتحديد عرض النموذج النصي ، هذه السمة اختيارية


<textarea cols="25">أكتب المحتوى هنا</textarea>


rows

تستخدم السمة rows لتحديد ارتفاع النموذج النصي ، هذه السمة اختيارية


<textarea rows="10">أكتب المحتوى هنا</textarea>


maxlength

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


<textarea maxlength="10">أكتب المحتوى هنا</textarea>


minlength

لتحديد الحد الأدنى لعدد الحروف المراد كتابتها دخل النموذج النصي , المسافات الفارغة يتم احتسابها أيضا , هذه السمة اختيارية


<textarea minlength="3">أكتب المحتوى هنا</textarea>


placeholder

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


<textarea placeholder="هل لديك اقتراح من فضلك أكتبه هنا"></textarea>


autofocus

اجعل النموذج في وضع الاستعداد للكتابة مثلا عند تحميل الصفحة يمكنك الكتابة مباشرة داخل النموذج بدون أن تضغط على النموذج ، هذه الميزة اختيارية وعادة ما تستخدمها محركات البحث مثل جوجل قم بزيارة موقع جوجل ومجرد تحميل الصفحة ستجد أن مؤشر الكتابة موجود مباشرة داخل صندوق البحث فيمكنك الكتابة مباشرة بدون الضغط على صندوق البحث


<textarea autofocus></textarea>


disabled

تستخددم السمة disabled لتعطيل النموذج النصي بحيث لا يمكن للمستخدم الكتابة بداخله


<textarea disabled></textarea>


name

تستخددم name لتحديد اسم النموذج لربطه عند عملية إرسال البيانات


<textarea name="text1"></textarea>


name

تستخددم name لتحديد اسم النموذج لربطه عند عملية إرسال البيانات


<textarea name="text1"></textarea>


readonly

تستخددم readonly لمنع المستخدم من التعديل على النصوص الموجودة بداخل النموذج وسوف يظهر النموذج كأنه يمكن التعديل عليه وهذا لا يمنع من التحديد النص


<textarea readonly>عفوا لا يمكنك التعديل على هذا النص</textarea>


required

تستخددم required لإجبار المستخدم بملء هذا النموذج ولا يمكنه تركه فارغ حتى يتم ارسال البيانات ، هذه السمة اختيارية وتم إضافتها في HTML5


<textarea required></textarea>


resize - css

يمكن إضافة شفرات CSS لمنع المستخدم من تحجيم النموذج


<textarea style="resize: none;"></textarea>