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

فیلدهای بزرگ متنی (<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> یکی از ابزارهای ضروری برای جمع‌آوری اطلاعات متنی طولانی در فرم‌های شماست. با استفاده درست از اون، تجربه کاربری بهتری رو برای مخاطبان فراهم می‌کنید. موفق باشید! 🌟