این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ textarea در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ textarea در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ Textarea در HTML
تگ textarea یا به فارسی ( تِکست اِریا ) یا به انگلیسی ( TextArea ) تگی است که با استفاده از آن میتوان یک باکس متن را در یک صفحه وب ایجاد کرد.
که این باکس متن یکمی اندازش بزرگه و برای دریافت متن پیغام فرم تماس یا حالا هرچیزی که قرار باشه کاربر بخواد متن طولانی وارد کنه ازش استفاده میشه.
Free-Learn
مثال از تگ textarea در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : استفاده عادی از تگ textarea
|
1 2 3 4 5 6 7 |
<body> <textarea> Salam Khobi? Man Sadegh Hastam </textarea> </body> |
مثال شماره ۲ : مشخص کردن اندازه عرض و ارتفاع با استفاده از صفات Rows و Cols
|
1 2 3 4 5 6 7 |
<body> <textarea rows="5" cols="30"> Salam Khobi? Man Sadegh Hastam </textarea> </body> |
مثال شماره ۳ : فقط خواندنی کردن تگ Textarea ( یعنی محتواش رو نمیشه تغییر داد )
|
1 2 3 4 5 6 7 |
<body> <textarea readonly> Salam Khobi? Man Sadegh Hastam </textarea> </body> |
مثال شماره ۴ : با استفاده از CSS کاری کردیم که کاربر نتونه باکس رو تغییر اندازه بده ( در حالت عادی گوشه پایین سمت راست رو میشه با ماوس گرفت و باکس محتوارو کوچک و بزرگ کرد )
|
1 2 3 4 5 6 7 |
<style> textarea{ resize:none; } </style> |
مثال شماره ۵ : استفاده از تگ textarea درون تگ Form ( برای گرفتن یک متن از کاربر )
|
1 2 3 4 5 |
<form action="files/get_data3.php" method="POST"> <textarea name="message" placeholder="نظرت در مورد فری لرن"></textarea> <br> <input type="submit" value="ارسال"> </form> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ textarea در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
جدول صفات تگ textarea در HTML
در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.
| نام صفت | مقدار | توضیح |
|---|---|---|
| autofocus | autofocus | مشخص میکنه که بلافاصله با بالا اومدن صفحه اشاره گر ماوس درون تگ textarea قرار بگیرد |
| cols | number | میتواند اندازه عرض این تگ رو به نسبت ( تعداد ستون ) مشخص نماید |
| 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 | میتواند اندازه ارتفاع این تگ رو به نسبت ( تعداد سطر ) مشخص نماید |
| wrap | hard soft |
میتوان نحوه نمایش محتوای درون تگ Textarea رو مشخص کرد |
| spellcheck | true default false |
مشخص میکند که آیا محتوای یک عنصر از نظر املایی و گرامر چک شود یا خیر؟ |
Free-Learn
پشتیبانی از صفات و رویدادهای عمومی
تگ textarea از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.
Free-Learn
نکات و توضیحات
- نکته یا توضیح خاصی وجود ندارد.
