آموزش تگ textarea در HTML

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ textarea در HTML با من همراه باشید.

آموزش تگ textarea در HTML

Free-Learn

تگ Textarea در HTML

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

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

Free-Learn

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

در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

امتحان کنید

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

امتحان کنید

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

امتحان کنید

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

امتحان کنید

مثال شماره ۵ : محتوای تگ Textarea غیرفعال باشد (رنگش معمولا خاکستری می شود)

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ textarea در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari IE
پشتیبانی بله بله بله بله بله

Free-Learn

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

در جدول زیر میتوانید صفات بهمراه مقادیری را که میتوان در این تگ استفاده کرد را مشاهده نمایید.

(علامت یعنی در HTML5 اضافه شده است)

نام صفت مقدار توضیح
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 اندازه ارتفاع تگ textarea را مشخص میکند.
wrap hard
soft
نحوه ارسال محتوای تگ textarea را در هنگام ارسال به سرور، مشخص میکند. ()
spellcheck true
default
false
مشخص میکند که محتوای تگ textarea از نظر املایی چک شود یا خیر. ()

Free-Learn

پشتیبانی از صفات و رویدادهای عمومی

تگ textarea از صفات عمومی و رویدادهای عمومی در HTML پشتیبانی می کند.

Free-Learn

نکات و توضیحات

تگ textarea بصورت پیش فرض با یکسری ویژگی های CSS در مرورگرها نمایش داده می شود، ولی خب ما با استفاده از CSS دوباره میتونیم به دلخواه این ویژگی ها را تغییر دهیم.

Free-Learn