وثائق HTML قابلة للتشغيل: وسم textarea

Q: كيف أنشئ textarea في HTML؟

اكتب داخل نموذج مع . على عكس له وسم إغلاق، وأي شيء بين الوسمين هو النص الابتدائي.

Q: كيف أضبط القيمة الافتراضية لـ textarea؟

ضع النص بين الوسمين: Hello . ليس لـ textarea سمة value في HTML. وفي JavaScript اقرأ textarea.value واضبطها.

Q: كيف أمنع تغيير حجم textarea؟

اضبط resize: none في CSS. وresize: vertical ألطف عادةً: يستطيع القارئ تطويل الحقل للنصوص الطويلة، لكنه لا يستطيع إفساد تخطيطك بسحبه عرضيًا.

Q: كيف أحدد عدد المحارف في textarea؟

أضف maxlength="280". يتوقف المتصفح عن قبول الإدخال عند ذلك الطول. اعرض بجانبه عدادًا يتحدّث مع حدث input كي يعرف القارئ كم بقي له، وتحقق من الطول على الخادم أيضًا.

كيف تنشئ textarea

<textarea> حقل نص لأكثر من سطر: الرسائل والتعليقات والأوصاف. rows تحدد ارتفاعه الظاهر بالأسطر. اكتب بضعة أسطر واضغط Send:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Textarea</title>
</head>
<body>
  <form>
    <label for="msg">Message</label><br>
    <textarea id="msg" name="message" rows="4" cols="40" placeholder="What would you like to ask?"></textarea>
    <br>
    <button type="submit">Send</button>
  </form>
</body>
</html>

أمران يختلفان عن <input>: عنصر textarea يحتاج إلى وسم إغلاق، ونصه الابتدائي يوضع بين الوسمين لا في سمة value. ويُرسل name الخاص به مع النص كقيمة، بما في ذلك كسور الأسطر.

سمات textarea

السمة	وظيفتها
`name`	المفتاح الذي يُرسل النص تحته
`rows`	الارتفاع الظاهر بالأسطر (الافتراضي 2)
`cols`	العرض الظاهر بالمحارف (الافتراضي 20)، و`width` في CSS أفضل عادةً
`placeholder`	تلميح يظهر ما دام فارغًا
`maxlength`, `minlength`	حدود الطول بالمحارف
`required`	يجب ألا يكون فارغًا
`readonly`	يمكن تحديده ونسخه لا تحريره، ويُرسل مع ذلك
`disabled`	لا يمكن استخدامه، ولا يُرسل
`wrap`	`soft` (الافتراضي) أو `hard`، انظر أدناه
`spellcheck`	`true` أو `false`

النص الافتراضي يوضع بين الوسمين

كل ما بين <textarea> و</textarea> هو النص الابتدائي، تمامًا كما كُتب: بما في ذلك المسافات ومسافات الجدولة وكسور الأسطر. يُتجاهل فقط كسر سطر واحد مباشرة بعد وسم الفتح. وهذا يجعل الإزاحة فخًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Default text</title>
  <style>
    textarea { display: block; margin-bottom: 12px; font: inherit; }
  </style>
</head>
<body>
  <textarea rows="2">Hello, this is the default text.</textarea>

  <textarea rows="3">
    Indented to match the HTML
  </textarea>

  <p id="out"></p>
  <script>
    const [a, b] = document.querySelectorAll('textarea');
    document.querySelector('#out').textContent =
      'Lengths: ' + a.value.length + ' and ' + b.value.length +
      ' (the second adds 4 leading spaces, a line break and 2 more spaces)';
  </script>
</body>
</html>

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

HTML داخل textarea لا يُعرض كتنسيق، فـ <b>hi</b> بين الوسمين يظهر كنص حرفي.

العرض وتغيير الحجم والتمدد التلقائي

تتيح المتصفحات للقارئ سحب الزاوية لتغيير حجم textarea. خاصية CSS resize تحد من ذلك، وwidth: 100% مع box-sizing: border-box تجعله يملأ حاويته بالضبط:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Resize</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea {
      display: block;
      width: 100%;
      box-sizing: border-box;
      margin: 4px 0 14px;
      padding: 8px;
      font: inherit;
      border: 2px solid #9ca3af;
      border-radius: 8px;
    }
    .vertical { resize: vertical; min-height: 60px; }
    .none { resize: none; }
    .grow { resize: none; overflow: hidden; }
  </style>
</head>
<body>
  <label>resize: vertical <textarea class="vertical" rows="2"></textarea></label>
  <label>resize: none <textarea class="none" rows="2"></textarea></label>
  <label>grows as you type <textarea class="grow" rows="2" id="grow"></textarea></label>

  <script>
    const grow = document.querySelector('#grow');
    grow.addEventListener('input', () => {
      grow.style.height = 'auto';
      const border = grow.offsetHeight - grow.clientHeight;
      grow.style.height = grow.scrollHeight + border + 'px';
    });
  </script>
</body>
</html>

الأخير يعيد ضبط ارتفاعه ثم يضبطه على scrollHeight (ارتفاع محتواه وحشوه) مضافًا إليه حدوده، مع كل ضغطة مفتاح. اكتب فيه عدة أسطر: لن يُظهر شريط تمرير أبدًا. وresize: vertical هي القيمة الافتراضية الألطف: تحصل الإجابات الطويلة على مساحة، ولا يستطيع أحد سحب الحقل ليصبح أعرض من التخطيط.

متصفحات Chromium تستطيع التمدد التلقائي بـ CSS وحدها عبر field-sizing: content. المتصفحات التي لا تدعمها تتجاهل السطر وتحتفظ بالحجم العادي، فإضافتها آمنة، لكن أبقِ السكربت إن كان يجب أن يحصل كل القراء على الحقل المتمدد.

maxlength وعداد المحارف

maxlength توقف الإدخال عند عدد من المحارف. وحدها لا تعطي أي تنبيه، فلا يلاحظ القارئ إلا حين تتوقف الكتابة عن العمل. العداد يصلح ذلك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Character counter</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    textarea { display: block; width: 100%; box-sizing: border-box; font: inherit; padding: 8px; }
    .count { font-size: 14px; color: #4b5563; }
    .count.near { color: #b45309; font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <label for="bio">Short bio</label>
    <textarea id="bio" name="bio" rows="3" maxlength="100" aria-describedby="bio-count"></textarea>
    <p class="count" id="bio-count" aria-live="polite">100 characters left</p>
    <button type="submit">Save</button>
  </form>

  <script>
    const bio = document.querySelector('#bio');
    const count = document.querySelector('#bio-count');
    bio.addEventListener('input', () => {
      const left = bio.maxLength - bio.value.length;
      count.textContent = left + ' characters left';
      count.classList.toggle('near', left <= 20);
    });
  </script>
</body>
</html>

aria-describedby تجعل قارئات الشاشة تقرأ العداد مع الحقل، وaria-live="polite" تعلن تغييراته بين ضغطات المفاتيح. وmaxlength يفرضها المتصفح فقط، لذلك يجب أن يتحقق الخادم من الطول أيضًا.

كسور الأسطر في النص المرسل

كسور الأسطر التي يكتبها القارئ تُرسل مع النص. في البيانات المرسلة يصبح كل منها زوجًا من محرفي العودة وتغذية السطر (%0D%0A في النموذج المرمَّز بترميز URL)، وهذا ما تتوقعه معظم الخوادم. ولعرض النص لاحقًا في صفحة مع كسور أسطره، إما أن تحوّلها إلى <br> عند الإخراج أو تنسّق العنصر بـ white-space: pre-line.

wrap="hard" (التي تحتاج إلى cols) تذهب أبعد: تُدرج أيضًا كسور أسطر حيث التف النص بصريًا، فيستقبل الخادم أسطرًا لا تتجاوز cols محرفًا. أما الافتراضية wrap="soft" فترسل فقط الكسور التي كتبها القارئ.

تنسيق textarea

يعطي Chrome وFirefox عناصر textarea خطًا أحادي المسافة بحجم نحو 13px، ولهذا يبدو textarea غالبًا غريبًا عن الصفحة. font: inherit تصلح ذلك. أبقِ نمط تركيز ظاهرًا إن غيّرت الحد:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled textarea</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 16px; }
    textarea { display: block; margin: 4px 0 12px; }
    .styled {
      font: inherit;
      padding: 10px 12px;
      border: 1px solid #9ca3af;
      border-radius: 8px;
      resize: vertical;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 1px; border-color: #2563eb; }
    .styled::placeholder { color: #6b7280; }
  </style>
</head>
<body>
  <label>Browser default <textarea rows="2">Monospace, small</textarea></label>
  <label>Styled <textarea class="styled" rows="2">Same font as the page</textarea></label>
</body>
</html>

يجب أن يصل نص placeholder إلى تباين مقروء، فالرمادي الفاتح الذي تستخدمه تصاميم كثيرة صعب القراءة. وكما في كل حقل، placeholder ليس تسمية: يختفي بمجرد أن يكتب القارئ. التسميات مشروحة في label في HTML.

أخطاء شائعة

<textarea value="...">. لا توجد سمة value، فضع النص بين الوسمين.
إزاحة النص الافتراضي مع شيفرة HTML. تصبح المسافات جزءًا من القيمة.
<textarea /> ذاتي الإغلاق. ليس عنصرًا فارغًا، ومن دون </textarea> تُبتلع بقية الصفحة داخله كنص.
غياب font: inherit، فيستخدم الحقل خطًا صغيرًا أحادي المسافة.
resize: none مع ارتفاع ثابت صغير. تنتهي الإجابات الطويلة في صندوق تمرير صغير جدًا.
الاعتماد على maxlength وحدها. تحقق من الطول على الخادم أيضًا.

الأسئلة الشائعة

كيف أنشئ textarea في HTML؟

اكتب <textarea name="message" rows="4"></textarea> داخل نموذج مع <label>. على عكس <input> له وسم إغلاق، وأي شيء بين الوسمين هو النص الابتدائي.

كيف أضبط القيمة الافتراضية لـ textarea؟

ضع النص بين الوسمين: <textarea name="bio">Hello</textarea>. ليس لـ textarea سمة value في HTML. وفي JavaScript اقرأ textarea.value واضبطها.

كيف أمنع تغيير حجم textarea؟

اضبط resize: none في CSS. وresize: vertical ألطف عادةً: يستطيع القارئ تطويل الحقل للنصوص الطويلة، لكنه لا يستطيع إفساد تخطيطك بسحبه عرضيًا.

كيف أحدد عدد المحارف في textarea؟

أضف maxlength="280". يتوقف المتصفح عن قبول الإدخال عند ذلك الطول. اعرض بجانبه عدادًا يتحدّث مع حدث input كي يعرف القارئ كم بقي له، وتحقق من الطول على الخادم أيضًا.

لماذا يستخدم textarea خطًا مختلفًا؟

يعطي Chrome وFirefox عناصر textarea خطًا أحادي المسافة بحجم نحو 13px افتراضيًا. أضف font: inherit ليطابق بقية الصفحة.

مفاهيم ذات صلة