این آموزش در تاریخ ۱۳۹۹/۰۳/۰۱ آپدیت شده است.
آموزش تگ textarea در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ textarea در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Textarea در HTML
تگ textarea یا به فارسی ( تِکست اِریا ) یا به انگلیسی ( Textarea ) تگی است که با استفاده از آن میتوان یک ناحیه متن یا یک باکس متن را در یک صفحه وب ایجاد کرد.
بطور کلی میتونیم بگیم این تگ یک ورودی متنی با قابلیت دریافت چندین خط می باشد، که میتوانیم از این تگ درون فرم های تماس برای دریافت مثلا متن پیغام استفاده نماییم.
Free-Learn
مثال از تگ textarea در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
|
1 2 3 4 5 6 7 8 |
<body> <textarea> Salam Khobi? Man Sadegh Hastam. Modir Site Free-Learn </textarea> </body> |
مثال شماره ۲ : مشخص کردن اندازه عرض و ارتفاع با استفاده از صفات Rows و Cols
|
1 2 3 4 5 6 7 8 |
<body> <textarea rows="5" cols="30"> Salam Khobi? Man Sadegh Hastam. Modir Site Free-Learn </textarea> </body> |
مثال شماره ۳ : فقط خواندنی کردن تگ Textarea (یعنی محتواش رو نمیشه تغییر داد)
|
1 2 3 4 5 6 7 8 |
<body> <textarea readonly> Salam Khobi? Man Sadegh Hastam. Modir Site Free-Learn </textarea> </body> |
مثال شماره ۴ : کاربر نتواند تگ Textarea را تغییر اندازه دهد.
|
1 2 3 4 5 |
<style> textarea{ resize:none; } </style> |
مثال شماره ۵ : محتوای تگ Textarea غیرفعال باشد (رنگش معمولا خاکستری می شود)
|
1 2 3 4 5 6 7 |
<body> <textarea disabled> Hi,My Name Is Sadegh Asadi. How Are You? </textarea> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ textarea در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | IE |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ textarea در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
(علامت 
یعنی در HTML5 اضافه شده است)
| نام صفت | مقدار | توضیح |
|---|---|---|
| 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 از نظر املایی چک شود یا خیر. () |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ textarea از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
تگ textarea بصورت پیش فرض با یکسری ویژگی های CSS در مرورگرها نمایش داده می شود، ولی خب ما با استفاده از CSS دوباره میتونیم به دلخواه این ویژگی ها را تغییر دهیم.
