تگ textarea در html

تگ textarea در HTML برای ایجاد فیلدهای متنی چندخطی استفاده می‌شود. برخلاف تگ <input> که فقط یک خط متن را دریافت می‌کند، این تگ برای ورود پیام، توضیحات، نظرات و محتوای طولانی کاربرد دارد.

نحوه استفاده از تگ <textarea>

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

<label for="message">پیام شما:</label>
<textarea id="message" name="message" rows="5" cols="30">
متن پیش‌فرض کاربر
</textarea>

attribute یا ویژگی‌های قابل استفاده در تگ <textarea>

تگ textarea از ویژگی‌های زیر پشتیبانی می‌کند:

name

ویژگی name برای مشخص کردن نام فیلد است. این مقدار در زمان ارسال فرم به عنوان کلید (key) در داده‌های ارسالی به سرور استفاده می‌شود.

<textarea name="message"></textarea>

id

ویژگی id برای اتصال فیلد به تگ <label> و دسترسی با JavaScript استفاده می‌شود.

<label for="comment">نظر شما:</label>
<textarea id="comment"></textarea>

rows

تعداد سطرهای نمایشی در textarea را تعیین می‌کند. این ویژگی فقط ظاهر را کنترل می‌کند، نه محدودیت داده.

<textarea rows="4"></textarea>

cols

تعداد ستون‌های نمایشی (عرض کاراکتری) را مشخص می‌کند. این مقدار تعداد تقریبی کاراکترها در هر خط را تعیین می‌کند.

<textarea cols="40"></textarea>

placeholder

متن راهنما را به صورت خاکستری درون فیلد نمایش می‌دهد تا کاربر متوجه نوع داده مورد انتظار شود. با وارد کردن متن، placeholder ناپدید می‌شود.

<textarea placeholder="پیام خود را بنویسید..."></textarea>

maxlength

حداکثر تعداد کاراکترهایی که کاربر مجاز به وارد کردن در textarea است را مشخص می‌کند.

<textarea maxlength="200"></textarea>

required

اگر این ویژگی تنظیم شود، کاربر باید حتماً مقداری وارد کند تا فرم ارسال شود؛ در غیر این صورت مرورگر پیغام خطا نمایش می‌دهد.

<textarea required></textarea>

readonly

فیلد را فقط خواندنی می‌کند. کاربر نمی‌تواند محتوا را تغییر دهد، اما مقدار داخل آن همراه با فرم ارسال می‌شود.

<textarea readonly>این متن فقط قابل خواندن است</textarea>

disabled

با این ویژگی، فیلد غیرفعال می‌شود؛ کاربر نمی‌تواند چیزی تایپ کند و مقدار آن نیز هنگام ارسال فرم نادیده گرفته می‌شود.

<textarea disabled>غیرفعال</textarea>
<textarea name="comment" placeholder="نظر خود را وارد کنید" maxlength="500" required></textarea>

Global Attributes

تگ <textarea> از Global Attributes مانند class، style، title و غیره پشتیبانی می‌کند.

Event Attributes

تگ <textarea> از رویدادهایی مانند oninput، onfocus، onblur و onchange پشتیبانی می‌کند.

ویژگی‌های ظاهری پیشفرض در تگ <textarea>

به صورت پیش‌فرض تگ <textarea> به صورت جعبه مستطیلی چندخطی با قابلیت اسکرول عمودی نمایش داده می‌شود.

textarea {
  display: inline-block;
  resize: both;
  overflow: auto;
}

آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین

پروژه محور - ارتباط مستقیم با مدرس