کار با Textboxها

کار با Textbox ها

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

اولین ورودی جعبه متن یا همان TextBox میباشد.این نوع ورودی یک کادر یک سطری برای ورود متن ایجاد میکند.برای ساختن این کادر باید به شناسه type تگ <input> مقدار text را بدهیم.در صورت تعریف نشدن شناسه type این شناسه در مرورگر های پیشرفته به صورت پیشفرض به کار میرود و یک textbox را نمایش میدهد.اما در مرورگرهای قدیمی اگر از این شناسه استفاده نشود آنرا نمایش نمیدهند.

به عنوان مثال یک سند HTML ایجاد میکنیم.سپس در قسمت در قسمت <body> آن ابتدا یک تگ <form> باز میکنیم و در داخل آن input را قرار داده و نوع آنرا text در نظر میگیریم.

<html>

<head>

<title>Learning html </title>

</head>

<body>

<form>

<input  type="text">

</body>

</html>

حال سند را ذخیره کرده وتغییرات را مشاهده مینماییم.

میبینید که در صفحه یکTextbox ایجاد شده است.و در آن میتوان اطلاعات ورودی را نوشت.

در ادامه میخواهیم با attribute های تگ input آشنا شویم.اولین شناسه شناسه type میباشد.همانطور که دیدید برای این که یک کادر متنی ایجاد کنیم باید مقدار آنرا برابر text در نظر بگیریم.

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

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

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

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

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

شناسه بعدی disabledمیباشد.این شناسه نیز به عنوان مقدار عبارتdisabled را میذیرد.از این شناسه برای غیر فعال کردن کادر متنی استفاده میگردد.به طوری کاربر نه میتواند متنی داخل آن بنویسد یا متن داخل آنرا انتخاب نماید.البته این رفتار ممکن است در مرورگرهای مختلف تفاوت داشته باشد.دقت کنید که مقادیر مربوط به فیلد های disabled هنگام ارسال اطلاعات به سرور ، ارسال نمیشوند.

برای مثال میخواهیم با استفاده از دو textbox نام و نام خانوادگی کاربر را به عنوان ورودی دریافت کنیم:

<html>

<head>

<title>Learning HTML</title>

</head>

<body>

<form>

First name:

<input type="text" name="firstname" value="First name"><br>

Last name:

<input type="text" name="lastname" value="Last name">

</form>

</body>

</html>

حال سند را ذخیره کرده و تغییرات را مشاهده نمایید.