عرض مصدر HTML/textarea

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

مثال عن العنصر <code><textarea></code> بسيط:<syntaxhighlight lang="html">
<textarea name="textarea">اكتب نصًا هنا</textarea>
</syntaxhighlight>

== بطاقة العنصر ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" | تصنيفات المحتوى
| عنصر تنظيمي، وعنصر عادي، وعنصر تفاعلي، وعنصر مرتبط بالنماذج.
|-
! scope="row" | المحتوى المسموح
| النص. 
|-
! scope="row" | الوسم المختصر
| لا يمكن حذف أيّ من وسمَي البداية أو النهاية.
|-
! scope="row" | العناصر الأب
| أي عنصر يقبل المحتوى العادي.
|-
! scope="row" | واجهة DOM
| <code>HTMLTextAreaElement</code>
|}
== دعم المتصفحات ==
{| class="wikitable" style="width: 50%;"
 !| Chrome
 ! Firefox
 ! Edge
 ! Safari
 ! Opera
|-
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|مدعوم
|}
خاصية <code>autocomplete</code> ما تزال غير مدعومة في أغلبية المتصفحات.
== الخاصيات ==
يمكن استخدام [[HTML/Global Attributes|الخاصيات العامة]] في هذا العنصر.

=== <code>autocomplete</code> ===
تُشير هذه الخاصية إن كانت قيمة هذا العنصر يمكن إكمالها تلقائيًا عبر المتصفح. القيم الممكنة لهذه الخاصية هي:
* <code>off</code>: يجب أن يُدخِل المستخدم القيم يدويًا في هذا الحقل في كل مرة، أو كانت الصفحة تُوفِّر طريقة للإكمال التلقائي للمدخلات بمعزل عن المتصفح، أي أنَّ المتصفح لا يتدخل بموضوع الإكمال التلقائي.
* <code>on</code>: يمكن للمتصفح إكمال القيم المُدخَلة من المستخدم تلقائيًا اعتمادًا على القيم التي أدخلها المستخدم في المرات السابقة.
إذا لم تُحدَّد قيمة للخاصية <code>autocomplete</code> على عنصر <code><textarea></code> فسيستخدم المتصفح الخاصية <code>autocomplete</code> للنموذج الذي ينتمي إليه هذا العنصر، وهو إما أن يكون العنصر <code>[[HTML/form|<form>]]</code> الأب لهذا العنصر أو العنصر <code>[[HTML/form|<form>]]</code> الذي استخدمنا قيمة الخاصية <code>id</code> التابعة لها في خاصية <code>[[#form|form]]</code> في هذا العنصر.

لمزيدٍ من المعلومات، راجع فقرة الخاصية <code>[[HTML/form#autocomplete|autocomplete]]</code> في صفحة العنصر <code>[[HTML/form|<form>]]</code>.

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

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

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

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

مثال عن استخدام الخاصية <code>autofocus</code>:<syntaxhighlight lang="html">
<textarea name="textarea" autofocus>اكتب نصًا هنا</textarea>
</syntaxhighlight>

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

مثال عن استخدام الخاصيتين <code>cols</code> و <code>[[#rows|rows]]</code> لتحديد أبعاد مربع النص:<syntaxhighlight lang="html">
<textarea name="textarea" rows="10" cols="50">اكتب نصًا هنا</textarea>
</syntaxhighlight>

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

مثال عن استخدام الخاصية <code>disabled</code>:<syntaxhighlight lang="html">
<textarea name="textarea" disabled>لا يمكنك الكتابة هنا</textarea>
</syntaxhighlight>

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

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

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

مثال عن استخدام الخاصية <code>form</code> لربط مربع النص مع نموذج ليس أبًا له:<syntaxhighlight lang="html">
<form action="action_page.php" id="from1">
  الاسم: <input type="text" name="username">
  <input type="submit">
</form>
<textarea name="textarea" form="from1">اكتب نصًا هنا</textarea>
</syntaxhighlight>

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

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

مثال عن استخدام الخاصية <code>maxlength</code> لتحديد عدد المحارف الأقصى الذي يستطيع المستخدم إدخاله:<syntaxhighlight lang="html">
<textarea name="textarea" maxlength="50">اكتب نصًا هنا</textarea>
</syntaxhighlight>

=== <code>minlength</code> ===
العدد الأدنى للمحارف التي يجب على المستخدم إدخالها.

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

مثال عن استخدام الخاصية <code>minlength</code> لتحديد أقل عدد محارف يجب أن يدخلها المستخدم، ولن يقبل المتصفح إرسال النموذج إذا كان عدد المحارف أقل من هذه القيمة؛ لاحظ كيف استعملنا الخاصية <code>[[#form|form]]</code> للإشارة إلى نموذج ليس أبًا للعنصر <code><textarea></code>:<syntaxhighlight lang="html">
<form action="action_page.php" id="from1">
  الاسم: <input type="text" name="username">
  <input type="submit">
</form>
<textarea name="textarea" form="from1" minlength="10">اكتب نصًا هنا</textarea>
</syntaxhighlight>

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

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

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

مثال عن العنصر <code><textarea></code> مع الخاصية <code>placeholder</code>:<syntaxhighlight lang="html">
<textarea name="textarea" placeholder="تلميحة عن المحتوى"
  rows="10" cols="50"></textarea>
</syntaxhighlight>

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

مثال عن استخدام الخاصية <code>readonly</code>:<syntaxhighlight lang="html">
<textarea name="textarea" readonly>يمكن تحديد النص فقط</textarea>
</syntaxhighlight>

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

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

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

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

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

=== <code>wrap</code> ===
تُشير هذه الخاصية إلى كيفية التفاف النص في هذا العنصر، والقيم المسموحة هي:
* <code>hard</code>: سيضع المتصفح أسطرًا جديدةً (CR+LF) لكل سطر أطول من عرض هذا العنصر، ويجب حينئذٍ استخدام الخاصية <code>cols</code>.
* <code>soft</code>: سيحرص المتصفح على أن تكون جميع الأسطر الجديدة تتضمن المحرفين الخاصين CR+LF، لكن المتصفح لن يضيف أيّة أسطر جديدة من عنده.
إذا لم تُحدَّد قيمة لهذه الخاصية فستكون قيمتها الافتراضية هي <code>soft</code>.

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

مثال عن إسناد القيمة <code>hard</code> إلى الخاصية <code>wrap</code>:<syntaxhighlight lang="html">
<textarea name="textarea" cols="10" wrap="hard">اكتب نصًا هنا</textarea>
</syntaxhighlight>
== ملاحظات ==

=== إعادة تحجيم العنصر <code><textarea></code> ===
يمكن التحكم بتحجيم العنصر <code><textarea></code> باستخدام الخاصية <code>[[CSS/resize|resize]]</code>، إذا إنَّ إعادة التحجيم مفعلة افتراضيًا، ويمكنك تعطيلها باستخدام قاعدة [[CSS]] الآتية:<syntaxhighlight lang="css">
textarea {
  resize: none;
}
</syntaxhighlight>

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

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

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

==مصادر ومواصفات==
*معيار [https://html.spec.whatwg.org/multipage/forms.html#the-textarea-element HTML Living Standard].
*مواصفة [http://www.w3.org/TR/html5/forms.html#the-textarea-element HTML5].
*مواصفة [http://www.w3.org/TR/html401/interact/forms.html#h-17.7 HTML 4.01].
[[تصنيف:HTML|{{SUBPAGENAME}}]]
[[تصنيف:HTML Elements|{{SUBPAGENAME}}]]
[[تصنيف:HTML Forms|{{SUBPAGENAME}}]]