عنصر input فرم html
در نوشته ی ساختار فرم html در مورد عناصر و خواص فرم html نوشتم و لیست کاملی از آن ها قرار دادم. حال نوبت این رسیده که در مورد مهم ترین عنصر فرم html یعنی عنصر input بنویسم. در این نوشته قصد دارم به type (گونه) های مختلف عنصر input و خواص (attribute) منحصر این عنصر بپردازم.
همانطور که گفتم عنصر input برای ایجاد فیلد استفاده می شود. از type برای تعیین نوع فیلد استفاده می شود.
انواع اینپوت input types
تایپ یا نوع یک خاصیت از عنصر اینپوت است که صرفا برای همین عنصر کاربرد دارد و نوع فیلد را مشخص می کند. چنانچه مقدار =type خالی بماند پیشفرض برابر با text به حساب می آید.
از بین type های مختلف عنصر input موارد زیر مختص html5 هستند :
color, date, datetime-local, month, week, time, email, number, range, search, tel, url
| type | کاربرد | نسخه html |
| button | ایجاد دکمه کلیک شدنی (بیشتر همراه با جاوااسکریپت) | |
| checkbox | لیست چند انتخابی (چک باکس) | |
| color | ایجاد یک انتخابگر رنگ | 5 |
| date | ایجاد انتخابگر تاریخ(سال،ماه،روز) | 5 |
| datetime-local | ایجاد انتخابگر تاریخ و زمان(سال،ماه،روز،ساعت،دقیقه،ثانیه،میلی ثانیه) | 5 |
| ایجاد فیلد برای آدرس ایمیل | 5 | |
| file | ایجاد یک فیلد با کلید browse برای انتخاب فایل(آپلود فایل) | |
| hidden | ایجاد یک فیلد مخفی | |
| image | نشاندن یک تصویر به عنوان دکمه ی ثبت | |
| month | ایجاد یک فیلد برای ثبت ماه از سال | 5 |
| number | ایجاد یک فیلد برای ثبت عدد با قابلیت محدود کردن رنج و ضریب و مقدار پیشفرض | 5 |
| password | ایجاد فیلد ورود پسوورد (ماسک روی کاراکترها) | |
| radio | ایجاد دکمه های رادیویی برای انتخاب یک مورد از چند انتخاب | |
| range | ایجاد یک اسلایدر رنجی برای انتخاب عدد. رنج پیشفرض 1 تا 100 با قابلیت محدود کردن رنج و ضریب و نشاندن مقدار پیشفرض | 5 |
| reset | ایجاد دکمه ی ریست فرم | |
| search | ایجاد یک فیلد جستجو | 5 |
| submit | دکمه ی ثبت | |
| tel | ایجاد یک فیلد برای ورود شماره تلفن | 5 |
| text | ایجاد یک ناحیه متنی تک خطی | |
| time | ایجاد فیلد انتخاب ساعت و دقیقه و am/pm | 5 |
| url | فیلد ورود آدرس url | 5 |
| week | ایجاد فیلد انتخاب هفته از سال | 5 |
خواص عنصر input
type یکی از خواص input بود. عنصر Input خواص دیگری نیز دارد که در زیر آن ها را معرفی می کنم ( با خواص فرم html که در ساختار فرم html گفته بودم اشتباه نگیرید )
| خاصیت | کاربرد | نسخه Html |
| value | نشاندن مقدار پیشفرض | |
| readonly | قفل کردن Input (غیر قابل تغییر کردن) | |
| disabled | غیر فعال کردن فیلد ( غیر قابل کلیک و استفاده) | |
| size | تنظیم سایز ( تعداد کاراکتر ) | |
| maxlength | محدود کردن تعداد کاراکتر ورودی | |
| autocomplete | پر شدن خودکار مقادیر سابق ( دارای دو مقدار off و on ) | 5 |
| autofocus | فوکوس شدن فیلد به صورت خودکار بلافاصله پس از لود صفحه | 5 |
| form | تعلق دادن input به بیشتر از یک فرم ( مقادیر با فاصله از یکدیگر جدا می شوند ) | 5 |
| formaction | تعیین آدرس پردازش اینپوت ( مقدار action فرم را آوررایت می کند ) و با دو type سابمیت (submit) و ایمیج (image) به کار می رود | 5 |
| formenctype | تعیین چگونه انکریپت شدن دیتای اینپوت وقتی فرم ارسال شد ( فقط برای متد post ) و با دو type سابمیت (submit) و ایمیج (image) به کار می رود. ضمنا مقدار پیشفرض enctype فرم را خنثی می کند. | 5 |
| formmethod | تعیین متد ارسال دیتای فرم. مقدار پیشفرض method در عنصر form را خنثی می کند و با دو type سابمیت (submit) و ایمیج (image) به کار می رود. | 5 |
| formnovalidate | باید/نباید صحت ورودی بررسی شود. خاصیت novalidate عنصر form را خنثی می کند. با type از نوع submit به کار می رود. | 5 |
| formtarget | تعیین کننده ی این که نتیجه پس از ارسال کجا نمایش داده شود. خاصیت target عنصر form را خنثی می کند و با دو type سابمیت (submit) و ایمیج (image) به کار می رود. | 5 |
| height | ارتفاع خاصیت image در عنصر Input را تعیین می کند | 5 |
| width | پهنای خاصیت image در عنصر Input را تعیین می کند | 5 |
| list | نام لیست را تعیین می کند | 5 |
| min | حداقل مقدار قابل قبول که با مقادیر number, range, date, datetime-local, month, time and week به کار می رود | 5 |
| max | حداکثر مقادیر قابل قبول. به همراه مقادیر number, range, date, datetime-local, month, time and week به کار می رود | 5 |
| multiple | اجازه ی ورود بیشتر یک مقدار. با دو خاصیت email و file به کار می رود. | 5 |
| pattern | تعیین الگوی قابل قبول با عبارات منظم که با text, search, url, tel, email, and password به کار می رود | 5 |
| placeholder | ایجاد یادآور یا توضیح درباره ی فیلد که با text, search, url, tel, email, and password به کار می رود. | 5 |
| required | اجباری کردن فیلد. با type های text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file به کار می رود. | 5 |
| step | ضریب قابل قبول. با مقادیر number, range, date, datetime-local, month, time and week به کار می رود. | 5 |