العنصر <textarea>

يُمثِّل العنصر <textarea> عنصرًا من عناصر النماذج يوفِّر مربعًا نصيًا متعدد الأسطر قابلًا للتعديل.

مثال عن العنصر <textarea> بسيط:

<textarea name="textarea">اكتب نصًا هنا</textarea>

بطاقة العنصر

تصنيفات المحتوى	عنصر تنظيمي، وعنصر عادي، وعنصر تفاعلي، وعنصر مرتبط بالنماذج.
المحتوى المسموح	النص.
الوسم المختصر	لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
العناصر الأب	أي عنصر يقبل المحتوى العادي.
واجهة DOM	HTMLTextAreaElement

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

Chrome	Firefox	Edge	Safari	Opera
مدعوم	مدعوم	مدعوم	مدعوم	مدعوم

خاصية autocomplete ما تزال غير مدعومة في أغلبية المتصفحات.

الخاصيات

يمكن استخدام الخاصيات العامة في هذا العنصر.

autocomplete

تُشير هذه الخاصية إن كانت قيمة هذا العنصر يمكن إكمالها تلقائيًا عبر المتصفح. القيم الممكنة لهذه الخاصية هي:

• off: يجب أن يُدخِل المستخدم القيم يدويًا في هذا الحقل في كل مرة، أو كانت الصفحة تُوفِّر طريقة للإكمال التلقائي للمدخلات بمعزل عن المتصفح، أي أنَّ المتصفح لا يتدخل بموضوع الإكمال التلقائي.
• on: يمكن للمتصفح إكمال القيم المُدخَلة من المستخدم تلقائيًا اعتمادًا على القيم التي أدخلها المستخدم في المرات السابقة.

إذا لم تُحدَّد قيمة للخاصية autocomplete على عنصر <textarea> فسيستخدم المتصفح الخاصية autocomplete للنموذج الذي ينتمي إليه هذا العنصر، وهو إما أن يكون العنصر <form> الأب لهذا العنصر أو العنصر <form> الذي استخدمنا قيمة الخاصية id التابعة لها في خاصية form في هذا العنصر.

لمزيدٍ من المعلومات، راجع فقرة الخاصية autocomplete في صفحة العنصر <form>.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

autofocus

تسمح لنا هذه الخاصية المنطقية (Boolean) بتحدد أنَّنا نريد أن ينتقل التركيز (focus) إلى هذا العنصر عند تحميل الصفحة ما لم يغيّره المستخدم (مثل الكتابة في عنصر إدخال مختلف).

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

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن استخدام الخاصية autofocus:

<textarea name="textarea" autofocus>اكتب نصًا هنا</textarea>

cols

تحديد العرض الظاهر لهذا العنصر مقدرًا بعرض المحارف، وإذا حُدِّدتَ هذه الخاصية فيجب أن تكون عددًا صحيحًا موجبًا، وإن لم تُحدَّد فقيمتها الافتراضية هي 20 (في HTML5).

مثال عن استخدام الخاصيتين cols و rows لتحديد أبعاد مربع النص:

<textarea name="textarea" rows="10" cols="50">اكتب نصًا هنا</textarea>

disabled

تُشير هذه الخاصية المنطقية (Boolean) إلى أنَّ المستخدم لا يستطيع التفاعل مع هذا العنصر، وإذا لم تُحدَّد قيمة لهذه الخاصية فسترث قيمتها من العنصر الحاوي لها مثل العنصر <fieldset>، وإذا لم يكن هنالك عنصرٌ حاوٍ لهذا العنصر له الخاصية disabled، فسيكون هذا العنصر مفعّلًا.

مثال عن استخدام الخاصية disabled:

<textarea name="textarea" disabled>لا يمكنك الكتابة هنا</textarea>

form

تُحدِّد هذه الخاصية ما هو النموذج الذي ينتمي العنصر <textarea> إليه، ويجب أن تكون قيمة هذه الخاصية هي مُعرِّف id لعنصر <form> في المستند نفسه.

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

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن استخدام الخاصية form لربط مربع النص مع نموذج ليس أبًا له:

<form action="action_page.php" id="from1">
  الاسم: <input type="text" name="username">
  <input type="submit">
</form>
<textarea name="textarea" form="from1">اكتب نصًا هنا</textarea>

maxlength

العدد الأقصى للمحارف التي يستطيع المستخدم إدخالها، وإن لم تُحدَّد قيمة لهذه الخاصية فسيتمكن المستخدم من إدخال عدد غير محدود من المحارف.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن استخدام الخاصية maxlength لتحديد عدد المحارف الأقصى الذي يستطيع المستخدم إدخاله:

<textarea name="textarea" maxlength="50">اكتب نصًا هنا</textarea>

minlength

العدد الأدنى للمحارف التي يجب على المستخدم إدخالها.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن استخدام الخاصية minlength لتحديد أقل عدد محارف يجب أن يدخلها المستخدم، ولن يقبل المتصفح إرسال النموذج إذا كان عدد المحارف أقل من هذه القيمة؛ لاحظ كيف استعملنا الخاصية form للإشارة إلى نموذج ليس أبًا للعنصر <textarea>:

<form action="action_page.php" id="from1">
  الاسم: <input type="text" name="username">
  <input type="submit">
</form>
<textarea name="textarea" form="from1" minlength="10">اكتب نصًا هنا</textarea>

name

تُستخدَم هذه الخاصية لتحديد اسم هذا العنصر (الذي سيرتبط معه عند إرسال النموذج).

placeholder

تلميحة للمستخدم لكي يعرف ما الذي عليه أن يكتبه ضمن هذا العنصر، لاحظ أنَّ الأسطر الجديدة في نص التلميحة ستُعرَض في العنصر كما هي.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن العنصر <textarea> مع الخاصية placeholder:

<textarea name="textarea" placeholder="تلميحة عن المحتوى"
  rows="10" cols="50"></textarea>

readonly

هذه الخاصية المنطقية تُشير أنَّ المستخدم لا يستطيع تعديل قيمة هذا العنصر، لكن على النقيض من الخاصية disabled فلن تمنع الخاصية readonly المستخدم من تحديد النص أو النقر على العنصر، وستُرسَل قيمة العنصر مع بيانات النموذج إلى الخادوم.

مثال عن استخدام الخاصية readonly:

<textarea name="textarea" readonly>يمكن تحديد النص فقط</textarea>

required

خاصية منطقية (Boolean) تُشير إلى أنَّ هذه العنصر إجباري ويجب تحديد خيار من خياراته على الأقل.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

rows

تُمثِّل هذه الخاصية عدد الأسطر الظاهرة في العنصر.

spellcheck

ضبط هذه القيمة إلى true يشير إلى أنَّ المتصفح يجب أن يتحقق من الأخطاء الإملائية والقاعدية. القيمة default تُشير إلى أنَّ العنصر سيرث قيمة الخاصية spellcheck للعنصر الأب أو يأخذها من المتصفح. أما القيمة false فتعني أنَّه لا يجب التحقق من الأخطاء الإملائية والقاعدية في هذا العنصر.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

wrap

تُشير هذه الخاصية إلى كيفية التفاف النص في هذا العنصر، والقيم المسموحة هي:

• hard: سيضع المتصفح أسطرًا جديدةً (CR+LF) لكل سطر أطول من عرض هذا العنصر، ويجب حينئذٍ استخدام الخاصية cols.
• soft: سيحرص المتصفح على أن تكون جميع الأسطر الجديدة تتضمن المحرفين الخاصين CR+LF، لكن المتصفح لن يضيف أيّة أسطر جديدة من عنده.

إذا لم تُحدَّد قيمة لهذه الخاصية فستكون قيمتها الافتراضية هي soft.

يجدر بالذكر أنَّ هذه الخاصية أضيفت إلى HTML5، ولم تكن موجودةً فيما سبق.

مثال عن إسناد القيمة hard إلى الخاصية wrap:

<textarea name="textarea" cols="10" wrap="hard">اكتب نصًا هنا</textarea>

ملاحظات

إعادة تحجيم العنصر <textarea>

يمكن التحكم بتحجيم العنصر <textarea> باستخدام الخاصية resize، إذا إنَّ إعادة التحجيم مفعلة افتراضيًا، ويمكنك تعطيلها باستخدام قاعدة CSS الآتية:

textarea {
  resize: none;
}

التفاعل مع CSS

أما بالنسبة إلى CSS، فالعنصر <textarea> هو عنصر مُستبدَل (replaced element)، ولا تُعرِّف مواصفة HTML أين يكون خط الأساس (baseline) للعنصر <textarea>، لذا سيستعمل كل متصفح مكانًا مختلفًا؛ وبالتالي لا يُنصَح باستخدام القيمة baseline للخاصية vertical-align في CSS، لأن سلوكها غير متوقع.

يجدر بالذكر أنَّ العنصر <textarea> له أبعاد صافية، مثل الصور النقطية (<img>).

التنسيق الافتراضي

تختلف المتصفحات في طريقة عرضها للعنصر <textarea>، لكنها تشترك بضبط الخاصية display إلى inline-block، وتغيير المؤشر cursor إلى text، وتغيير عائلة النص font-family إلى monospace. أما بقية الخاصيات (مثل الإطار border، والخلفية background، والحواشي padding، وغيرها...) فهي تختلف بين المتصفحات.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مواصفة HTML 4.01.