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

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

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

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

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

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

نوع ورودی color

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

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

Select your favorite color: <input type="color" name="favcolor">

خودتان امتحان کنید »

نوع ورودی Date

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

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

Birthday: <input type="date" name="bday">

خودتان امتحان کنید »

نوع ورودی datetime 

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

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

Birthday (date and time): <input type="datetime" name="bdaytime">

خودتان امتحان کنید »

نوع ورودی datetime-local

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

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

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

Birthday (date and time): <input type="datetime-local" name="bdaytime">

خودتان امتحان کنید »

نوع ورودی email

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

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

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

E-mail: <input type="email" name="email">

خودتان امتحان کنید »

نوع ورودی month

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

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

Birthday (month and year): <input type="month" name="bdaymonth">

خودتان امتحان کنید »

نوع ورودی number

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

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

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

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

خودتان امتحان کنید »

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

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

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

نوع ورودی range

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

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

مثال (انواع ورودی جدید در 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

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

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

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

Search Google: <input type="search" name="googlesearch">

خودتان امتحان کنید »

نوع ورودی tel

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

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

Telephone: <input type="tel" name="usrtel">

خودتان امتحان کنید »

نوع ورودی time

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

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

Select a time: <input type="time" name="usr_time">

خودتان امتحان کنید »

نوع ورودی url

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

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

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

Add your homepage: <input type="url" name="homepage">

خودتان امتحان کنید »

نوع ورودی week

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

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

Select a week: <input type="week" name="week_year">

خودتان امتحان کنید »

• قبلی
• بعدی