دریافت ورودی از کاربر در فرم های وب – المان <input>
در HTML از المان <input> برای ایجاد کنترل های مختلف به منظور دریافت ورودی از کاربر در فرم های وب استفاده می‌شود. این المان یکی از پرکاربردترین المان ها در فرم های HTML محسوب می‌شود و برای ایجاد ویجت های گرافیکی مختلف نظیر تکست باکس، دکمه، چک باکس، رادیو باتن و … به کار می‌رود.
المان <input> با پشتیبانی از انواع متنوع کنترل‌ها و خصوصیت‌های مختلف یکی از پیچیده‌ترین المان های HTML به شمار می‌رود.
نحوه استفاده از المان <input> برای دریافت ورودی از کاربر در فرم های وب
در کد HTML زیر نمونه‌هایی از المان <input> برای ایجاد سه کنترل در یک فرم وب را مشاهده می‌کنید:
<form action="/action.php" method="post">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br>
<input type="submit" value="Submit">
</form>المان <input> اول یک تکست باکس برای دریافت نام و المان <input> دوم تکست باکس دیگری برای دریافت نام خانوادگی در فرم ایجاد می‌کند. سومین المان <input> هم باعث ایجاد یک دکمه ارسال برای ارسال داده های فرم می‌شود.
در مثال فوق، مقدار text برای خصوصیت type در المان <input> اول و دوم به منظور ایجاد تکست باکس و مقدار submit در المان <input> سوم برای ایجاد دکمه ارسال فرم به کار رفته است. همانطور که مشاهده می‌کنید این المان ها داخل یک فرم (المان <form>) قرار می‌گیرند. معمولا این کد مشابه با تصویر زیر توسط مرورگر وب رندر می‌شود:
انواع فیلدها و کنترل های ورودی در المان <input>
خصوصیت type در المان <input> نوع کنترل یا فیلد ورودی را مشخص می‌کند. شما می‌توانید از مقادیر موجود در جدول زیر برای این خصوصیت استفاده کنید:
| مقدار | توضیح و نوع المان |
|---|---|
| button | دکمه |
| checkbox | چک باکس (یا جعبه بررسی) |
| color | جعبه انتخاب رنگ |
| date | انتخاب کننده تاریخ |
| datetime-local | انتخاب کننده زمان و تاریخ |
| جعبه نشانی ایمیل | |
| file | انتخاب کننده فایل |
| hidden | کنترل پنهان (با وجود عدم نمایش، مقدار آن برای سرور ارسال می‌شود) |
| image | دکمه ارسال گرافیکی (که یک تصویر را نمایش می‌دهد) |
| month | انتخاب کننده ماه و سال |
| number | جعبه ورود عدد |
| password | جعبه ورود کلمه عبور (مشابه با یک تکست باکس تک خطی که مقدار آن معمولا با ستاره یا دایره های توپر و … به شکل نامشخص درمی‌آید) |
| radio | رادیو باتن (یا دکمه رادیویی) |
| range | کنترلی برای انتخاب عددی در یک بازه مشخص (که مقدار آن با کمک یک گیره روی نواری باریک مشخص می‌شود) |
| reset | دکمه بازگردانی محتویات فرم به مقادیر پیشفرض |
| search | جعبه متن تک خطی برای ورود عبارت جستجو |
| submit | دکمه ارسال فرم |
| tel | جعبه ورود شماره تلفن |
| text | تکست باکس (یا جعبه متن) تک خطی. مقدار text، مقدار پیشفرض برای خصوصیت type است. |
| time | انتخاب کننده زمان |
| url | جعبه ورود نشانی وب (یا URL) |
| week | جعبه انتخاب شماره هفته و سال |
با جزئیات این مقادیر و انواع کنترل‌های قابل ایجاد با کمک المان <input> در بخش‌های آتی این مجموعه آموزشی به صورت مجزا آشنا می‌شوید.
خصوصیت های المان <input>
| خصوصیت | توضیح |
|---|---|
| accept | نوع فایل های مورد انتظار برای آپلود فایل (فقط برای type=”file”) |
| alt | متن جایگزین برای تصویر (فقط برای type=”image”) |
| autocomplete | با مقدار on یا off مشخص می‌کند آیا تکمیل خودکار باید برای المان فعال باشد یا خیر. |
| autofocus | درج این خصوصیت بولی باعث می‌شود المان پس از لود صفحه به صورت خودکار فوکس را در اختیار داشته باشد. |
| capture | روش ورودی ضبط رسانه برای آپلود فایل (مانند میکروفن، دوربین یا ویدئو) را مشخص می‌کند. (فقط برای type=”file”) |
| checked | درج این خصوصیت بولی باعث می‌شود چک باکس یا رادیو باتن (دکمه رادیویی) از ابتدا تیک خورده باشد. (فقط برای type=”checkbox” و type=”radio”) |
| dirname | درج این خصوصیت با یک نام به عنوان مقدار آن باعث می‌شود جهت المان (چپ به راست یا راست به چپ بودن المان) برای سرور ارسال شود. مقدار این خصوصیت همراه با مقدار ltr یا rtl به صورت جفت dirname/(ltr|rtl) ارسال می‌شود. |
| disabled | درج این خصوصیت بولی باعث می‌شود المان غیرفعال باشد. |
| form | فرم (المان <form>) که المان <input> جاری به آن تعلق دارد را مشخص می‌کند. |
| formaction | نشانی (یا URL) ای را مشخص می‌کند که داده های فرم برای آن ارسال می‌شود. این خصوصیت نسبت به خصوصیت action المان <form> ای که دربرگیرنده المان <input> فعلی است اولویت بالاتری دارد. (فقط برای type=”image” و type=”submit”) |
| formenctype | نحوه یا نوع کدگذاری داده های فرم برای ارسال را مشخص می‌کند. (فقط برای type=”image” و type=”submit”) |
| formmethod | متد HTTP برای ارسال داده های فرم را مشخص می‌کند. (فقط برای type=”image” و type=”submit”) |
| formnovalidate | درج این خصوصیت بولی مشخص می‌کند نباید فرم هنگام ارسال، اعتبارسنجی شود. |
| formtarget | این خصوصیت مشخص می‌کند پس از ارسال فرم، پاسخ دریافتی کجا نمایش داده شود. |
| height | ارتفاع المان را برحسب پیکسل مشخص می‌کند. (فقط برای type=”image”) |
| list | مقدار آی‌دی یک المان <datalist> را مشخص می‌کند که شامل گزینه های از پیش تعیین شده برای المان <input> است. |
| max | مقدار حداکثر (ماکسیمم یا بیشینه) برای عدد، تاریخ و … |
| maxlength | حداکثر طول یا حداکثر تعداد کاراکترهای مجاز برای مقدار المان (مقدار خصوصیت value) |
| min | مقدار حداقل (مینیمم یا کمینه) برای عدد، تاریخ و … |
| minlength | حداقل طول یا حداقل تعداد کاراکترهای مجاز برای مقدار المان (مقدار خصوصیت value) |
| multiple | درج این خصوصیت بولی باعث می‌شود کاربر مجاز باشد چند مقدار را برای المان وارد کند. (فقط برای type=”file” و type=”email”) |
| name | نام کنترل در فرم را مشخص می‌کند. مقدار این خصوصیت همراه با مقدار خصوصیت value به صورت جفت name/value برای سرور ارسال می‌شود. |
| pattern | الگویی که مقدار خصوصیت value باید داشته باشد. از این الگو برای اعتبارسنجی مقدار وارد شده در المان استفاده می‌شود. |
| placeholder | متنی که وقتی هنوز مقداری برای المان وارد نشده است (معمولا به عنوان راهنما برای کاربر) روی کنترل نمایش داده می‌شود. |
| readonly | درج این خصوصیت بولی باعث می‌شود مقدار المان قابل ویرایش یا تغییر نباشد (فقط خواندنی باشد). |
| required | درج این خصوصیت بولی باعث می‌شود تکمیل فیلد پیش از ارسال فرم ضروری باشد. در این حالت وارد کردن مقدار (در مورد چک باکس، تیک زدن) برای ارسال فرم لازم خواهد بود. |
| size | اندازه المان را (برحسب تعداد کاراکتر قابل نمایش) مشخص می‌کند. (فقط در صورت استفاده از مقادیر text, search, tel, url, email و password برای خصوصیت type) |
| src | نشانی (یا URL) تصویر برای دکمه ارسال (فقط برای type=”image”) |
| step | فاصله یا تعداد گام افزایش اعداد در المان را مشخص می‌کند. |
| type | نوع کنترل فرم را مشخص می‌کند. با مقادیر مختلف این خصوصیت در بخش قبلی آشنا شدید. |
| value | مقدار المان را مشخص می‌کند. مقدار این خصوصیت همراه با مقدار خصوصیت name به صورت جفت name/value برای سرور ارسال می‌شود. |
| width | پهنای المان را برحسب پیکسل مشخص می‌کند. (فقط برای type=”image”) |
با جزئیات این خصوصیت ها و مقادیر آن‌ها در بخش‌های آتی این مجموعه آموزشی به صورت مجزا آشنا می‌شوید.
بازگشت به فهرست مجموعه آموزشی HTML
بسیار مفید بود