آموزش HTML – فرم ها در HTML بخش دوم

  • آپدیت شده در تاریخ

آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با اعتبارسنجی HTML آشنا شدیم. در این بخش به input های جدید فرم ها در HTML خواهیم پرداخت.

در بخش دوم آموزش فرم ها قصد داریم input های جدید HTML5 را معرفی کنیم.

Input های جدید HTML5

HTML5 چندین <input> جدید مثل email, date, time, color, range و غیره را معرفی کرده است.

برای افزایش تجربه کاربری (UX) و ساختن فرم های تعاملی بیشتر می توانید از این نوع های جدید استفاده کنید.

به هر حال, اگر مرورگر شما در تشخیص این input های جدید به مشکل بربخورد, آنها را مانند یک باکس متن ساده نمایش می دهد.

در این بخش از آموزش HTML قصد داریم نگاه کوتاهی به این input های جدید بیاندازیم:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

input رنگ

Input نوع color به کاربر اجازه انتخاب یک رنگ از لیست آبشاری انتخابگر رنگ را می دهد که خروجی آن یک مقدار hex برای رنگ است.

توجه: این فیلد type=”color” توسط اینترنت اکسپلورر و سافاری اپل پشتیبانی نمی شود. در حال حاضر توسط فایرفاکس, کروم و اپرا پشتیبانی می شود.

Input تاریخ

Input نوع date به کاربر اجازه انتخاب تاریخ از تقویم آبشاری را می دهد.

توجه: این فیلد type=”date” توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر توسط سافاری, کروم و اپرا پشتیبانی می شود.

Input تاریخ و زمان

Input نوع datetime به کاربر اجازه انتخاب تاریخ و زمان را می دهد.

توجه: این فیلد type=”datetime” توسط اینترنت اکسپلورر و فایرفاکس, کروم و اپرا پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری پشتیبانی می شود.

Input تاریخ و زمان محلی

Input نوع datetime-local به کاربر اجازه انتخاب تاریخ و زمان محلی را می دهد. تاریخ و زمان محلی اطلاعات مربوط به منطقه زمانی را ارایه نمی دهد.

توجه: این فیلد type=”datetime” توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.

Input ایمیل

Input نوع email به کاربر اجازه وارد کردن آدرس ایمیل را می دهد. این فیلد بسیار شبیه فیلد با نوع text است اما اگر با ویژگی های مورد نیاز ترکیب کنید می توانید یک ترکیب برای اعتبارسنجی صحیح آدرس ایمیلی که باید وارد شود ایجاد کنید.

این اعتبارسنجی برای فیلد type=”email” توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود

نکته: شما می توانید فیلد ایمیل را بر اساس وضعیت اعتبارسنجی استایل دهی کنید, زمانی که یک مقدار وارد شد با استفاده از از سودو کلاس های :valid , :invalid یا :required در CSS می توانید این کار را انجام بدید.

Input ماه

Input نوع month به کاربر اجازه انتخاب ماه و سال از تقویم آبشاری را می دهد.

توجه: این فیلد type=”month” توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.

Input عدد

Input نوع number به کاربر اجازه وارد کردن مقدار عددی را می دهد. شما با خصوصیت min, max, step می توانید فقط یک سری مقداری خاص را دریافت کنید.

این اعتبارسنجی برای فیلد type=”number” توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود. البته اینترنت اکسپلورر ممکن است دکمه افزایش کاهش عدد را نمایش ندهد.

Input محدوده

Input نوع range به کاربر اجازه وارد کردن مقدار عددی بین یک محدوده را می دهد. این نوع بسیار شبیه number است اما یک کنترل ساده تر روی متن را می دهد.

این اعتبارسنجی برای فیلد type=”range” توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود.

Input جستجو

Input نوع search برای ساخت فیلد جستجو کاربرد دارد.

یک فیلد جستجو مانند فیلد متن است اما در بعضی از مرورگرها مثل گوگل کروم و سافاری, همین که شروع با تایپ در باکس جستجو می کنید, یک آیکون ضربدر کوچک در سمت راست فیلد برای حذف کردن مقدار داخل فیلد نمایان می شود

توجه: این فیلد type=”search” توسط اینترنت اکسپلورر۹ و فایرفاکس و ورژن های قبلی پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا و اینترنت اکسپلورر۱۰+ پشتیبانی می شود.

Input شماره تماس

Input نوع tel برای ساخت یک فیلد برای وارد کردن شماره تلفن کاربرد دارد.

توجه: این فیلد type=”tel” توسط هیچ مرورگری پشتیبانی نمی شود. اما باز هم کاربردی است. در گوشی های آیفون و بعضی از دیوایس های اندروید با این فیلد کیبورد مجازی کاربر بصورت عددی نمایش داده می شود مثل وارد کردن شماره کارت در درگاه پرداخت بعضی از بانک ها.

Input شماره تماس

Input نوع tel برای ساخت یک فیلد برای وارد کردن زمان با فرمت خاص کاربرد دارد.

توجه: این فیلد type=”time” توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.

Input آدرس URL

Input نوع url برای وارد کردن آدرس وب کاربرد دارد. شما می توانید از خصوصیات مختلفی استفاده کنید

توجه: این اعتبارسنجی برای فیلد type=”url” توسط همه مرورگرهای معروف اینترنت اکسپلورر +۱۰ و فایرفاکس, کروم و اپرا و سافاری پشتیبانی می شود.

Input آدرس week

Input نوع week برای انتخاب یک هفته و سال توسط لیست آبشاری تقویم کاربرد دارد.

توجه: این فیلد type=”week” توسط اینترنت اکسپلورر و فایرفاکس پشتیبانی نمی شود. در حال حاضر فقط توسط سافاری, کروم و اپرا پشتیبانی می شود.

 

امیدوارم در این بخش آموزش HTML , از انواع input های جدید HTML5 نهایت استفاده را برده باشید.

در بخش بعدی با تگ Canvas آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی توسعه دهنده وب و موبایل مدیر سایت علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. اگر نیاز به برنامه نویس برای انجام پروژه و نوشتن اسکریپت های سمت وب, اپلیکیشن های اندروید و ios, پیدا کردن راه حل توسعه و غیره داشتید حتما از طریق تماس با ما/ واتساپ/ تلگرام بهم پیام بدید. برایتهیه هاست مطمین و پرسرعت کلیک کنید
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

دوره های آموزشی