انواع فیلد HTML5 در طراحی فرم برای موبایل

انواع فیلد HTML5 در طراحی فرم برای موبایل

با توجه به اهمیت بیش از پیش کاربران موبایلی، علاوه بر اهمیت موبایل فرندلی بودن سایت از نظر طراحی و همچنین سریع بودن سایت برای کاربران موبایلی، نکات دیگری در راستای اصول طراحی وبسایت برای موبایل مانند مشخص نمودن نوع فیلد در کد حائز اهمیت است. با پیشرفت زبان HTML و توسعه سیستم عامل های هوشمند مانند اندروید و iOS و ویندوزفون و غیره و همچنین توسعه مرورگرهای اینترنت، امکان نمایش کیبوردهای مجازی متفاوت با توجه به نوع فیلد در تلفن های همراه وجود دارد.

انواع فیلد ورودی در HTML5

فیلدهای ورودی متفاوتی در زبان HTML5 تعریف شده اند که در صورتی که Type یا نوع هر فیلد به درستی انتخاب شود، به علت باز شدن کیبوردهای مجازی مختلف با توجه به نوع فیلد، کاربران موبایل راحت تر می توانند اقدام به ورود اطلاعات و تکمیل فرم در سایت کنند و با افزایش رضایت مندی کاربران از سایت، میزان ماندگاری آنها در سایت بیشتر می شود و به همین دلیل یکی از اصولی که در سئوی حرفه ای به آن دقت می شود، مشخص کردن نوع هر input است که در ادامه به تفکیک در مورد برخی از انواع پرکاربرد input و کاربرد آنها برای کاربران موبایل توضیح داده شده و برای هر نوع input، تصویری از موبایل با سیستم عامل های Android یا iOS نمایش داده شده است.

فیلد url

در صورتیکه فیلد ورودی از نوع url باشد، با توجه به تصویر زیر، کیبورد مناسب جهت نوشتن آدرس URL برای کاربران موبایل باز خواهد شد. ضمنا کاربران فقط می توانند آدرس را به صورت http:// و https:// و ftp:// و mailto: وارد نمایند.
<input type="url">

آدرس URL را وارد نمایید:

 

URL input ios
کیبورد نوشتن URL در iOS

فیلد tel

در صورتیکه ورودی از نوع tel باشد، کیبورد مجازی مناسب جهت نمایش اعداد برای وارد کردن شماره تلفن بر روی موبایل باز می گردد. دقت داشته باشید که استفاده از نوع ورودی tel به معنای اعتبارسنجی دیتای ورودی و یا اجبار نویسنده برای نوشتن شماره تلفن با فرمت خاصی نیست. جهت اجبار کاربر به ورود اطلاعات با فرمت خاص می توانید از pattern در HTML5 استفاده نمایید.

<input type="tel">

شماره تلفن را وارد نمایید:

 

کیپد ورود شماره تلفن در اندروید
کیپد ورود شماره تلفن در اندروید

فیلد number

در صورتیکه ورودی از نوع number باشد، کیبورد مجازی مناسب جهت وارد کردن عدد بر روی موبایل باز می گردد.

<input type="number">

فیلد وارد کردن اعداد:

 

کیپد ورود اعداد در اندروید
کیپد ورود اعداد در اندروید

فیلد email

اگر برای فیلد ورود آدرس ایمیل، نوع input را به صورت email تعریف کنید، کیبوردی که بر روی موبایل باز می شود دارای دکمه @ در دسترس خواهد بود که کاربر موبایل بتواند به راحتی اقدام به وارد کردن آدرس ایمل نماید.

<input type="email">

آدرس ایمیل را وارد نمایید:

 

کیبورد جهت وارد کردن آدرس ایمیل در اندروید
کیبورد نوشتن آدرس ایمیل در اندروید

فیلد date

در صورت استفاده از input با نوع date، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="date">

تاریخ را انتخاب نمایید:

 

انتخاب تاریخ از تقویم iOS
انتخاب تاریخ از تقویم iOS

فیلد time

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، امکان انتخاب ساعت و دقیقه و AM و PM وجود خواهد داشت.

<input type="time">

زمان را وارد نمایید:

 

انتخاب زمان در iOS
انتخاب زمان در iOS

فیلد datetime-local

اگر از input با نوع datetime-local استفاده کنید، مشابه تصویر زیر، امکان انتخاب زمان و تاریخ با هم وجود دارد.

<input type="datetime-local">

زمان و تاریخ را وارد نمایید:

 

انتخاب زمان و تاریخ در iOS
انتخاب زمان و تاریخ در iOS

فیلد week

اگر از input با نوع week استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="week">

هفته مورد نظرتان را انتخاب نمایید:

 

انتخاب هفته در اندروید
انتخاب هفته در اندروید

فیلد month

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="month">

ماه مورد نظرتان را انتخاب نمایید:

 

انتخاب ماه در iOS
انتخاب ماه در iOS

فیلد range

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="range">

محدوده مورد نظرتان را انتخاب نمایید:

 

انتخاب رنج در iOS
انتخاب رنج در iOS

فیلد color

اگر از input با نوع time استفاده کنید، مشابه تصویر زیر، تقویم با قابلیت انتخاب روز و ماه و سال به کاربر موبایل نمایش داده می شود.

<input type="color">

رنگ مورد نظرتان را انتخاب نمایید:

 

انتخاب رنگ در اندروید
انتخاب رنگ در اندروید
انتخاب رنگ با گوگل کروم در اندروید
انتخاب رنگ با گوگل کروم در اندروید

به این نکته توجه داشته باشید که استفاده از نوع صحیح input الزاما به معنی اعتبارسنجی یا validation دیتای ورودی نیست. جهت اعتبارسنجی از تکنیک های مختلف مانند استفاده از Ajax و یا استفاده از pattern در HTML می توانید استفاده نمایید.

دیدگاه و سوالات خود را با ما در میان بگذارید

Your email address will not be published.