تگ textarea در html
تگ textarea
در HTML برای ایجاد فیلدهای متنی چندخطی استفاده میشود. برخلاف تگ <input>
که فقط یک خط متن را دریافت میکند، این تگ برای ورود پیام، توضیحات، نظرات و محتوای طولانی کاربرد دارد.
- نحوه استفاده از تگ <textarea>
- attribute یا ویژگیهای قابل استفاده در تگ <textarea>
- name
- id
- rows
- cols
- placeholder
- maxlength
- required
- readonly
- disabled
- Global Attributes
- Event Attributes
نحوه استفاده از تگ <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;
}
آموزش خصوصی طراحی سایت و وردپرس به صورت آنلاین
پروژه محور - ارتباط مستقیم با مدرس