תיעוד 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 לא מוצג כ-HTML; <b>hi</b> בין התגיות מופיע כטקסט מילולי.

רוחב, שינוי גודל וגדילה אוטומטית

דפדפנים מאפשרים לקורא לגרור את הפינה כדי לשנות גודל של textarea. resize של CSS מגביל את זה, ו-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 (הגובה של התוכן וה-padding שלו) ועוד הגבולות שלו, בכל הקשה. הקלידו בו כמה שורות: הוא אף פעם לא מציג פס גלילה. 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 נאכף רק על ידי הדפדפן, ולכן השרת צריך לבדוק את האורך גם כן.

ירידות שורה בטקסט שנשלח

ירידות השורה של הקורא נשלחות עם הטקסט. בנתונים שנשלחים כל אחת הופכת לזוג של carriage return ו-line feed (%0D%0A בטופס מקודד כ-URL), וזה מה שרוב השרתים מצפים לו. כדי להציג את הטקסט בעמוד מאוחר יותר עם ירידות השורה שלו, המירו אותן ל-<br> בפלט או עצבו את האלמנט עם white-space: pre-line.

wrap="hard" (שדורש cols) הולך רחוק יותר: הוא גם מוסיף ירידות שורה במקומות שבהם הטקסט נשבר חזותית, כך שהשרת מקבל שורות שאינן ארוכות מ-cols תווים. ברירת המחדל, wrap="soft", שולחת רק את ירידות השורה שהקורא הקליד.

עיצוב textarea

Chrome ו-Firefox נותנים ל-textarea גופן monospace בגודל של כ-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 אינו תווית: הוא נעלם ברגע שהקורא מקליד. תוויות מוסברות ב-HTML label.

טעויות נפוצות

<textarea value="...">. אין מאפיין value; שימו את הטקסט בין התגיות.
הזחת טקסט ברירת המחדל יחד עם ה-HTML. הרווחים הופכים לחלק מהערך.
<textarea /> שסוגר את עצמו. זה לא אלמנט ריק; בלי </textarea>, שאר העמוד נבלע לתוכו כטקסט.
אין font: inherit, ולכן השדה משתמש בגופן monospace קטן.
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 גופן monospace בגודל של כ-13px כברירת מחדל. הוסיפו font: inherit כדי שיתאים לשאר העמוד.

מושגים קשורים