آموزش HTML – تگ textarea

نویسنده : مرتضی گنج | تاریخ انتشار : 2020/01/15 | بخش : آموزش HTML

تعریف و کاربرد تگ textarea در HTML

تگ <textarea> یا به فارسی ( تِکست اِریا ) تگی است که با استفاده از آن می توان یک ناحیه متن یا یک باکس متن را در یک صفحه وب ایجاد کرد.

بطور کلی میتونیم بگیم این تگ یک ورودی متنی با قابلیت دریافت چندین خط می باشد، که می توانیم از این تگ درون فرم های تماس برای دریافت مثلا متن پیغام استفاده نماییم.

  • تگ <textarea> کنترل ورودی متن چند خطه تعریف می کند.
  • یک textarea می تواند تعدادی کاراکتر نامحدود را در خود نگه دارد، و متن در یک پهنای فونت ثابت ارائه می شود.
  • اندازه یک متن را می توان با خصوصیت های cols و rows مشخص کرد، و یا حتی بهتر از طریق CSS ارتفاع و عرض را مشخص کرد.
  • چندین ویژگی جدید در HTML5 اضافه شده است.

 

مثال از تگ textarea در HTML

مثال شماره ۱ : مشخص کردن اندازه عرض و ارتفاع با استفاده از صفات Rows و Cols

<textarea rows="5" cols="30">
سایتکده ، آموزش آنلاین برنامه نویسی
</textarea> 

تمرین کنید !

 

مثال شماره ۲ : فقط خواندنی کردن تگ Textarea (یعنی محتواش رو نمیشه تغییر داد)

<textarea readonly>
سایتکده ، آموزش آنلاین برنامه نویسی
</textarea> 

تمرین کنید !

 

مثال شماره ۳ : کاربر نتواند تگ Textarea را تغییر اندازه دهد.

<textarea style="resize:none;">
سایتکده ، آموزش آنلاین برنامه نویسی
</textarea> 

تمرین کنید !

 

پشتیبانی مرورگرها از تگ textarea در HTML

Element
<textarea> بله بله بله بله بله

 

جدول صفات تگ textarea در HTML

نام صفت  مقدار توضیح
autofocus autofocus مشخص می کند که بلافاصله با لود (بالا اومدن) صفحه، مکان نمای ماوس درون تگ textarea قرار بگیرد
cols number اندازه عرض textarea را مشخص می کند.
dirname textareaname.dir جهت محتوای تگ textarea را در هنگام ارسال به سرور مشخص می کند.
disabled disabled باعث می شود تگ textarea غیرفعال شود. ( معمولا رنگش خاکستری می شود )
form form_id مشخص می کند که تگ textarea متعلق به ۱ یا چندین تگ فرم می باشد.
maxlength number تعداد کاراکترهایی که می توان درون تگ textarea وارد کرد را مشخص می کند.
name text یک نام را برای تگ textarea مشخص می کند.
placeholder text یک متن را بصورت کمرنگ (پس زمینه ای) درون تگ textarea قرار می دهد تا توضیح کوتاهی باشه برای اینکه کاربر متوجه شود که چه نوع محتوایی را باید وراد کند.
readonly readonly باعث می شود تگ textarea فقط خواندنی باشد. یعنی دیگه محتویات این تگ قابل تغییر نیست.
required required مشخص می کند که تگ textarea باید (حتما) ضروری است که توسط کاربر تکمیل گردد .
rows number اندازه ارتفاع تگ textarea را مشخص می کند.
wrap hard

soft

نحوه ارسال محتوای تگ textarea را در هنگام ارسال به سرور، مشخص می کند.
spellcheck true

default

false

مشخص می کند که محتوای تگ textarea از نظر املایی چک شود یا خیر.