%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (0)

تبلیغات

انواع ورودی جدید در HTML5

انواع ورودی جدید در HTML5

HTML5 چند نوع input جدید برای فرم ها دارد. این امکانات اجازه کنترل بهتر و بررسی اعتبار یک ورودی را فراهم می کند.

در این مطلب به بررسی انواع جدید input می پردازیم:

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

توجه: درست است که بعضی از مرورگرها از این انواع ورودی جدید پشتیبانی نمی کنند ولی در صورت عدم پشتیبانی هم با آن ها مثل ورودی های متنی ساده برخورد می کنند و مشکلی پیش نمی آید.


نوع ورودی color

یک فیلد ورودی که باید حتماً شامل یک رنگ باشد. این نوع ورودی به شما اجازه می دهد یک رنگ را از جعبه رنگ انتخاب نمایید.

Opera Safari Chrome Firefox Internet Explorer

مثال (انواع ورودی جدید در HTML5)

Select your favorite color: <input type="color" name="favcolor">
خودتان امتحان کنید »

نوع ورودی Date

به کاربر اجازه می دهد، یک تاریخ شامل روز، ماه و سال را انتخاب کند.

Opera Safari Chrome Firefox Internet Explorer

مثال (انواع ورودی جدید در HTML5)

Birthday: <input type="date" name="bday">
خودتان امتحان کنید »

نوع ورودی datetime 

به کاربر اجازه می دهد، زمان و تاریخ را بر حسب ساعت جهانی (UTC) انتخاب کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Birthday (date and time): <input type="datetime" name="bdaytime">
خودتان امتحان کنید »

نوع ورودی datetime-local

به کاربر اجازه می دهد، زمان و تاریخ را بر حسب زمان محلی انتخاب کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Define a date and time control (no time zone):

Birthday (date and time): <input type="datetime-local" name="bdaytime">
خودتان امتحان کنید »

نوع ورودی email

یک فیلد ورودی برای آدرس ایمیل تعریف می کند. زمانی که Submit اتفاق می افتد، بصورت اتوماتیک معتبر می شود (validated).

فقط ایمیل بصورت این آدرس ایمیل توسط spambots حفاظت می شود. برای دیدن شما نیاز به جاوا اسکریپت دارید را دریافت می کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

E-mail: <input type="email" name="email">
خودتان امتحان کنید »

نوع ورودی month

به کاربر اجازه می دهد، ماه و سال را برحسب زمان محلی انتخاب کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Birthday (month and year): <input type="month" name="bdaymonth">
خودتان امتحان کنید »

نوع ورودی number

نوع ورودی number، فیلدی است که باید شامل یک مقدار عددی باشد.

همچنین می توانید آنرا بصورتی تنظیم کنید که یک محدوده ای از اعداد را بپذیرد.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">
خودتان امتحان کنید »

خصوصیات زیر محدودیت هایی است که می توانید روی عدد اعمال کنید:

  • max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
  • min مقدار کمترین عددی که کاربر می تواند وارد نماید.
  • step فاصله بین اعدای که کاربر مجاز به استفاده است.
  • value مقدار پیشفرض فیلد را مشخص می کند.

 مثال: در این مثال تمام خصوصیات بالا استفاده شده است: خودتان امتحان کنید


نوع ورودی range

این نوع ورودی تقریبا مثل همان نوع ورودی number است. فقط نوع range به صورت یک اسلاید بار نمایش داده می شود.

همچنین می توانید آنرا بصورتی تنظیم کنید که یک محدوده ای از اعداد را بپذیرد.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Define a control for entering a number whose exact value is not important (like a slider control):

<input type="range" name="points" min="1" max="10">
خودتان امتحان کنید »

خصوصیات زیر محدودیت هایی است که می توانید روی عدد ورودی اعمال کنید:

  • max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
  • min مقدار کمترین عددی که کاربر می تواند وارد نماید.
  • step فاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد.
  • value مقدار پیشفرض فیلد را مشخص می کند. 

نوع ورودی search

برای فیلدهای جستجو از این فیلد استفاده می شود، مثل جستجوی سایت و جستجوی گوگل.

فیلد جستجو مثل یک فیلد متن معمولی است.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Search Google: <input type="search" name="googlesearch">
خودتان امتحان کنید »

نوع ورودی tel

یک فیلد برای ورود شماره تلفن، تعریف می کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Telephone: <input type="tel" name="usrtel">
خودتان امتحان کنید »

نوع ورودی time

به کاربر اجازه می دهد، زمان را برحسب زمان محلی انتخاب کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Select a time: <input type="time" name="usr_time">
خودتان امتحان کنید »

نوع ورودی url

نوع وردی url، فیلدی است که باید شامل یک آدرس URL باشد.

زمانی که فرم submit می شود، بصورت اتوماتیک این فیلد معتبر می شود (validated).

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Add your homepage: <input type="url" name="homepage">
خودتان امتحان کنید »

نوع ورودی week

به کاربر اجازه می دهد، هفته و سال را برحسب زمان محلی انتخاب کند.

OperaSafariChromeFirefoxInternet Explorer

مثال (انواع ورودی جدید در HTML5)

Select a week: <input type="week" name="week_year">
خودتان امتحان کنید »

دیدگاه‌ها  

0 # امیر457 1396-10-04 15:24
چرا در مثال مربوط به Date جای ماه و روز عوض شده ? آیا در HTML5 راه حلی برای تنظیم format فیلد Date وجود دارد؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # امیر پهلوان صادق 1396-10-05 08:31
متأسفانه با استفاده تنها از HTML5 امکان تنظیم Format وجود ندراد و برای این منظور باید از jQuery استفاده شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # amin 1394-08-07 12:33
سلام
ایا می شود ورودی نوع tel برای مرورگر ها تنظیم کرد یا راهی ندارد؟
ورودی نوع ایمیل را چگونه برای مرورگر سفری تنظیم کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+7 # مهرداد صلاحی 1394-08-07 19:24
سلام.
ورودی‌های بالا در همه‌ی مرورگرهایی که HTML5 رو پشتیبانی می‌کنند، قابل دستیابی هستن.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # mehdi2237 1396-02-25 17:46
ساپورت نمیکنه دیگه
اگه ساپورت میکنه پس این ینی چی؟؟؟؟؟؟؟؟؟؟؟؟؟ ؟؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی