عنصر 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
email ایجاد فیلد برای آدرس ایمیل 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

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

4 × 2 =