Textarea در HTML
درس قبل با form="id" و form* مالکیت و مسیریابی ارسال را پوشش داد. textarea کار دیگری است: کنترل متن چندخطی برای پیام و یادداشت. input تک‌خطی برای پاراگراف مناسب نیست. وقتی کاربر بیش از یک خط می‌نویسد از textarea استفاده کنید.
چرا textarea هست
فرم تماس، تیکت پشتیبانی، بیو و نظر به ارتفاع اسکرول و شکست خط نرم نیاز دارند. textarea همان متن را به‌صورت یک فیلد نام‌دار ارسال می‌کند. همچنان label، name و اشارهٔ اندازه لازم است — اما مدل محتوا با input فرق دارد: متن بین تگ‌هاست.
پاسخ مستقیم
۱) بنویسید. ۲) label با for وصل کنید. ۳) متن پیش‌فرض را بین تگ‌ها بگذارید — نه value. ۴) اختیاری: placeholder، maxlength، readonly، disabled، required، wrap. ۵) ورود چندخطی است — نه ارتباط form= درس قبل.
📊 Textarea attributes beginners use
| Attribute | Role | Beginner tip |
|---|---|---|
| name | Submit key | Required if the text should post with the form |
| id | Label hook | Match label for= for accessible naming |
| rows | Visible height hint | Lines of height before scrolling |
| cols | Visible width hint | Prefer CSS width for responsive layouts |
| placeholder | Soft hint | Disappears when the user types |
| maxlength | Character cap | Browser-enforced upper bound |
| readonly / disabled | Lock vs mute | readonly still submits; disabled usually does not |
| wrap | Soft/hard wrap | Affects how line breaks are submitted (soft vs hard) |
فرم بازخورد: جعبهٔ پیام با label
فرم کوتاه ایمیل را input تک‌خطی و پیام را textarea نگه می‌دارد. متن شروع بین تگ‌هاست تا کاربر ویرایش کند.
<form action="/feedback" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="6" cols="40"
placeholder="What went well? What can improve?">Thanks for reading —</textarea>
<button type="submit">Send feedback</button>
</form>
خواندن دموی بازخورد
- کنترل چندخطی textarea است نه input
- id=msg با label for جفت می‌شود
- name=msg کلید پاراگراف ارسالی است
- rows ارتفاع و cols عرض را پیشنهاد می‌دهند
- متن پیش‌فرض بین تگ‌هاست
- label واضح بمانید
- form= درس قبل اینجا لازم نیست — فیلدها داخل formاند
اندازه، سقف و wrap
دموی دوم بیو با maxlength و wrap=soft و نکتهٔ CSS به‌جای cols. readonly روی خلاصهٔ فقط‌خواندنی.
<label for="bio">Short bio</label>
<textarea id="bio" name="bio" rows="4" maxlength="280"
wrap="soft"
style="width:100%; max-width:28rem; resize:vertical;"
placeholder="Up to 280 characters"></textarea>
<label for="summary">Auto summary (read-only)</label>
<textarea id="summary" name="summary" rows="3" readonly>Generated preview — edit the bio above.</textarea>
خواندن دموی اندازه
- maxlength سقف طول را می‌گذارد
- wrap=soft شکست دیداری را بدون hard CR/LF نگه می‌دارد
- CSS width و resize ظاهر را نرم می‌کند
- readonly دیده می‌شود ولی ویرایش نمی‌شود
- برای ارسال همچنان name لازم است
- بعدی: select برای انتخاب از فهرست
انتخاب textarea در برابر input
- یک خط کوتاه: input
- پاراگراف و پیام: textarea
- اندازه با rows و CSS؛ cols میراثی است
- محتوای پیش‌فرض بین تگ‌ها — نه value
- همچنان label و name
- داخل form وقتی ممکن است؛ form= اگر جدا لازم شد
- با formaction/مالکیت قاطی نکنید
تمرین — ساخت و تغییر اندازه
- دموی بازخورد؛ متن بین تگ را عوض کنید
- rows را کم کنید و ارتفاع را ببینید
- maxlength اضافه کنید
- cols را با CSS width عوض کنید
- موقتاً value بگذارید و ببینید عادت input نیست — سپس حذف کنید
- جمله: textarea متن چندخطی بین تگ‌ها؛ input با value
- انتخاب از فهرست مال select بعدی است
اشتباهات آسان
- متن پیش‌فرض در value به‌جای بین تگ‌ها
- فراموش name
- بدون label
- input تک‌خطی وقتی چند خط لازم است
- قاطی با form=/formaction درس قبل
- فقط cols برای عرض واکنش‌گرا
- disabled به‌جای readonly
خلاصه
- textarea = متن چندخطی
- label و معمولاً name
- متن پیش‌فرض بین تگ‌ها
- rows/CSS؛ اختیاری maxlength و placeholder و readonly
- نه ویژگی‌های ارتباط فرم درس قبل
- بعدی: select
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود