فیلدهای بزرگ متنی

فیلدهای بزرگ متنی (<textarea>): برای حرف‌های طولانی! 📝

سلام به همه! وقتی کاربر نیاز داره که متن طولانی‌تری وارد کنه، مثلاً در بخش نظرات، پیام‌ها، توضیحات یا حتی نوشتن یه مقاله کوتاه، کادرهای متن معمولی <input type=”text”> جوابگو نیستن. اینجاست که تگ <textarea> وارد صحنه می‌شه!

تگ <textarea> به شما این امکان رو می‌ده که یه بلوک چندخطی از متن رو در فرم خودتون داشته باشید.

ساختار تگ <textarea>:

تگ <textarea> برخلاف تگ <input>، یه تگ دوتایی هست (یعنی تگ پایانی داره) و متنی که کاربر وارد می‌کنه، بین تگ باز و بسته قرار می‌گیره.

<textarea name="نام_فیلد" id="شناسه_فیلد" rows="تعداد_سطرها" cols="تعداد_ستون‌ها">
متن پیش‌فرض (اختیاری)
</textarea>

خصوصیت‌های مهم <textarea>:

• name: نامی که این فیلد در اطلاعات ارسالی فرم خواهد داشت.
• id: شناسه منحصر به فرد برای اتصال به تگ <label>.
• rows: تعداد خطوطی که از ابتدا در جعبه متن نمایش داده می‌شه. این خصوصیت ارتفاع جعبه متن رو تعیین می‌کنه.
• cols: تعداد ستون‌ها یا کاراکترهایی که در هر خط نمایش داده می‌شه. این خصوصیت عرض جعبه متن رو تعیین می‌کنه.
• placeholder: متنی راهنما که داخل کادر نمایش داده می‌شه و با شروع تایپ کاربر ناپدید می‌شه.
• required: اجباری کردن این فیلد برای ارسال فرم.
• readonly: متن داخل فیلد قابل خواندن هست اما کاربر نمی‌تونه اون رو تغییر بده.
• disabled: فیلد کاملاً غیرفعال می‌شه و در اطلاعات فرم ارسال نمی‌شه.

مثال کاربردی:

بیایید یه فرم برای ثبت نظر بسازیم:

<div style="margin-bottom: 15px;">
  <label for="user-comment" style="display: block; margin-bottom: 5px; color: #d2691e;">نظر شما:</label>
  <textarea id="user-comment" name="user_comment" rows="6" cols="50" placeholder="نظرتون رو اینجا بنویسید..." required style="width: 95%; padding: 10px; border: 1px solid #daa520; border-radius: 5px; resize: vertical;"></textarea>
  <!--
    - rows="6": جعبه متن با ارتفاع ۶ خط نمایش داده می‌شه.
    - cols="50": عرض تقریبی ۵۰ کاراکتر (البته با CSS عرض معمولاً بهتر کنترل می‌شه).
    - resize: vertical: به کاربر اجازه می‌ده ارتفاع جعبه متن رو تغییر بده.
  -->
</div>

در این مثال:

• از rows=”6″ برای تعیین ارتفاع اولیه استفاده کردیم.
• خصوصیت resize: vertical; رو در CSS اضافه کردیم تا کاربر بتونه ارتفاع کادر پیام رو به صورت عمودی تنظیم کنه. این کار خیلی کاربردیه چون کاربر می‌تونه فضای بیشتری برای نوشتن داشته باشه.
• فیلد رو required کردیم تا اجباری باشه.

نکته مهم: استفاده از خصوصیت‌های rows و cols برای تعیین ابعاد <textarea> به صورت سنتی انجام می‌شده، اما امروزه معمولاً با استفاده از CSS (مانند width, height و resize) ابعاد و نحوه تغییر اندازه رو بهتر کنترل می‌کنیم.

تگ <textarea> یکی از ابزارهای ضروری برای جمع‌آوری اطلاعات متنی طولانی در فرم‌های شماست. با استفاده درست از اون، تجربه کاربری بهتری رو برای مخاطبان فراهم می‌کنید. موفق باشید! 🌟