ساختن کادرهای ورودی متن برای استفاده در فرمهای 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
برای یادگیری نحوه استفاده از این رویداد ها اینجا را کلیک کنید. (لینک در یک پنجره جدید باز خواهد شد)


نظرات بازدید کنندگان
نویسنده : یاسر زینلی
@mojtaba
شناسه های disabled و readonly هم مثل بقیه شناسه ها به کار برده میشه. البته میشه فقط اسم شناسه رو نوشت ولی روش استانداردترش اینه که اسم و مقدار شناسه نوشته بهش و در این دو مورد مقدار شناسه هم معادل اسمش هست. به این صورت (شناسه های اضافی رو ننوشتم که احتمالاً برای ی فرم واقعی باید اضافه کنید):

<"input type="text" disabled="disabled" readonly="readonly>
 
نویسنده : mojtaba
من یک سوال داشتم اونم این بود که کد readonly و disabled کجای کد
  <input type="text" name="testField" maxlength="50" size="30" value="کادر ورود متن">

قرار میدهیم
 
نویسنده : Bandras
آقا دمت گرم سایت خوبی دارید
 
نویسنده : Kurd Ware
سلام دوست عزیز از آموزشهاتون خیلی ممنونم برام خیلی مفید بوده. چند تا سوال ازتون دارم که جوابش برام خیلی مهمه.
1- آیا می توان در HTML از بانک اطلاعاتی استفاده کرد؟
2- من وقتی به پسوند صفحه هاتون نگاه کردم دیدم که XHTML هست من آشنایی خیلی کمی باهاش دارم و میخوام تفاوتش رو با HTML بدونم؟
3- قسمت نظرات سایتتون طبیعتا با استفاده از بانک اطلاعاتی ساخته، شده یعنی ما میتونیم در XHTML از بانک اطلاعاتی استفاده کنیم؟
ازتون ممنونم منتظر جوابتون هستم.
خدانگهدار.
 
نویسنده : Mohammad
با عرض سلام و تشکر خدمت شما استاد گرامی:
چطور می توان تعداد کاراکتر ها را محدود کرد؟
 
نویسنده : mousa
na dare khosham miad, az hameye sita bishtar tozih midid age mishe zabane c++ ham bezarid merC