ساختن کادرهای ورودی متن برای استفاده در فرمهای HTML

ما با استفاده از تگ <input> می توانیم بسیاری از اطلاعاتی را که در فرمها نیاز داریم از طریق کاربران به دست آوریم. در حقیقت این تگ برای وارد کردن اطلاعات توسط کاربر استفاده می شود. این تگ در HTML4.01 نیازی به تگ پایانی ندارد.

از تگ <input> می توانیم برای ساختن کادرهای مربوط به وارد کردن متن، کادر کلمه عبور، فیلدهای مخفی، دکمه های رادیو، چک باکس، دکمه ارسال فرم، دکمه پاک کردن فرم و انواع دیگر دکمه ها و چند نوع ورودی دیگر استفاده کنیم. در اینجا هر کدام از این ورودی ها را به صورت جداگانه مورد بررسی قرار می دهیم.

جعبه ورودی متن (Text Box)

از این نوع ورودی برای ایجاد یک کادر یک سطری برای ورود متن استفاده می شود. برای ساختن این کادر باید از شناسه "type="text در تگ <input> استفاده کنیم. در صورت تعریف نشدن شناسه type در مرورگرهای جدید این شناسه به صورت پیش فرض به کار می رود و یک Text Box را نمایش می دهد اما برخی از مرورگرهای قدیمی در صورتی که از ایسن شناسه استفاده نشود این کادر را نمایش نمی دهند.

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

<input type="text" name="testField" maxlength="50" size="30" value="کادر ورود متن">

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

در اینجا به توضیح برخی از شناسه هایی که با این نوع ورودی به کار می روند می پردازیم. به خاطر داشته باشید که همه این شناسه ها باید در تگ <input> به کار روند.

• type :
  برای اینکه یک کادر متنی ایجاد کنیم باید مقدار این شناسه را text قرار دهیم.

  ---

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

  ---

• maxlength :
  این شناسه برای مشخص کردن حداکثر تعداد کاراکترهای ورودی استفاده می شود. این شناسه در مورد ورودی متنی یک سطری استفاده می شود و مقدار آن باید عددی مثبت باشد.

  ---

• size :
  این شناسه در مورد این نوع ورودی طول کادر را بر حسب تعداد کاراکتر مشخص می کند. البته مرورگرهای مختلف ممکن است بر حسب نوع فونت مورد استفاده اندازه این کادر را مانند هم نشان ندهند. مقدار این شناسه باید عددی مثبت باشد. مقدار پیش فرض این شناسه 20 است.

  ---

• value :
  این شناسه در مورد کادرهای متنی، متنی را که به صورت پیش فرض در کادر متنی نمایش داده می شود معین می کند.

  ---

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

  ---

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

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

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

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

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

رویدادهای زیر هم در تگ فرم قابل استفاده هستند.
onfocus, onblur, onselect, onchange, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup