کادر متنی با بیش از یک سطر (Text Area)

کادر های متنی با بیش از یک سطر (Text Area)

از یک Text Area کاربران می توانند برای وارد کردن تعداد نامحدودی کاراکتر در بیش از یک سطر وارد کنند. بهتر است تا برای متنهای طولانی به جای Text Box از Text Area استفاده کنید تا کاربران راحتتر بتوانند متن خود را مشاهده کنند و یا آنرا ویرایش کنند.

برای ایجاد Text Area باید از تگ <textarea> استفاده کنید. این تگ بر خلاف تگ <input> یک تگ پایانی دارد و باید به وسیله تگ<textarea/> بسته شود. در مثال زیر می توانید کد مربوط به یک Text Area را مشاهده کنید:

<textarea name="someName" cols="40" rows="3">
این متن به صورت متن داخلی کادر نمایش داده می شود 
</textarea>

می توانید نتیجه کد بالا را در اینجا مشاهده کنید:

همانطور که مشاهده می کنید متنی که بین تگ ابتدایی و تگ پایانی یک Text Area نوشته شود به صورت پیش فرض در کادر Text Area نمایش داده می شود.

در اینجا می توانید برخی از شناسه های قابل استفاده در تگ <textarea> را مشاهده کنید:

• cols :
  این شناسه عرض کادر را بر حسب تعداد کاراکتر تعیین می کند. مقدار این شناسه باید عددی مثبت باشد. البته این عرض بستگی به اندازه فونت تعریف شده برای صفحه و مرورگر دارد. استفاده از این شناسه برای تگ <textarea> الزامی است.

  ---

• rows :
  این شناسه مشخص کننده تعداد سطرهای قابل مشاهده در کادر است. این مقدار هم باید عددی مثبت باشد. استفاده از شناسه rows برای تگ <textarea> الزامی است.

  ---

• name :
  از این شناسه می توان برای اختصاص دادن یک نام مشخص به textarea استفاده کرد.

  ---

• "readonly="readonly :
  این شناسه کادر را به صورت فقط خواندنی در می آورد و کاربر نمی تواند متن موجود در کادر را تغییر دهد.

  ---

• "disabled="disabled :
  این شناسه کادر را به صورت غیر فعال در می آورد و بازدید کننده نمی تواند متن موجود در آن را تغییر دهد یا آنرا انتخاب کند. (این رفتار بسته به مرورگر متفاوت است)

برای مشاهده کادر در حالات فقط خواندنی (readonly) و غیر فعال (disabled) حالت مورد نظر خود را در مثال زیر انتخاب کنید و نتیجه را در Text Area زیر مشاهده کنید:

حالت مورد نظر شما :  فقط خواندنی    غیر فعال

کادر متنی نمونه :
    

در تگ <textarea> علاوه بر شناسه های بالا که مربوط به همین تگ هستند می توان از شناسه های استاندارد زیر هم استفاده کرد:
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey

همچنین از رویدادهای زیر هم می توان در تگ <textarea> استفاده کرد :
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

برای آشنایی بیشتر با رویدادهای بالا صفحه رویدادهای مربوط به فرم را مشاهده کنید. (لینک در پنجره جدید باز می شود)