بخش های اصلی

آموزش HTML 5

آموزش HTML 5 - انواع ورودی‌ های جدید

HTML5 چندین نوع ورودی جدید برای فرم ها معرفی می کنه.

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

HTML5 چندین نوع جدید مثل email،  date، range و ... برای بهبود تجربه ی کاربر و تعاملی تر کردن فرم ها، معرفی کرده. با این وجود، اگه مرورگر نتواند این انواع ورودی جدید را تشخیص بده، با اون ها مثل جعبه متنِ معمولی برخورد می کنه.

در این بخش نگاهی کوتاه به هر یک از انواع ورودی جدید زیر میندازیم:

نوع ورودی Color

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

مثال

<form>
    <label>
        Select Color: <input type="color" name="mycolor">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Apple Safari از نوع ورودی “color” پشتیبانی نمی کنن.

نوع ورودی Date

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

مثال

<form>
    <label>
        Select Date: <input type="date" name="mydate">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Firefox از نوع ورودی “date” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

نوع ورودی Datetime

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

مثال

<form>
    <label>
        Date & Time: <input type="datetime" name="mydatetime">
    </label>
</form>

اخطار: مرورگر های Internet Explorer، Firefox، Chrome و Opera از نوع ورودی “datetime” پشتیبانی نمی کنن. درحال حاضر فقط مرورگر Apple Safari از این نوع داده ی ورودی پشتیبانی می کنه.

نوع ورودی Datetime-local

نوع ورودی datetime-local به کاربر امکان انخاب تاریخ و زمان محلی (local) را میده. تاریخ و زمان محلی، اطلاعات منطقه ی زمانی را فرآهم نمی کنن.

مثال

<form>
    <label>
        Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Firefox از نوع ورودی “datetime-local” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

نوع ورودی Email

نوع ورودی Email به کاربر امکان وارد کردن آدرس ایمیل را میده. این نوع ورودی بسیار شبیه به نوع ورودی متنیِ استاندارده، ولی اگه در ترکیب با خصیصه های مورد نیازش استفاده بشه، مرورگر برای اطمینان از معتبر بودنِ آدرس ایمیل و وارد شدنِ آن ممکنه آن را با الگوهایی مقایسه کنه.

مثال

<form>
    <label>
        Email Address: <input type="email" name="myemail" required>
    </label>
</form>

همه ی مرورگرهای مطرح مثل Mozilla Firefox، Google Chrome، Apple Safari، Internet Explorer 10+ و Opera از اعتبار سنج نوع ورودیِ email پشتیبانی می کنن.

نکته: می توانید زمانی که در فیلد ایمیل، مقداری با استفاده از پیش کلاس های (pseudo class) :valid، :invalid  یا :required وارد شده باشه، به این فیلد برای وضعیت های مختلف اعتبارسنجی اش، استایل بدین.

نوع ورودی Month

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

مثال

<form>
    <label>
        Select Month: <input type="month" name="mymonth">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Firefox از نوع ورودی “month” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

نوع ورودی number

نوع ورودی number می تواند برای وارد کردن مقادیر عددی استفاده بشه. همچنین می توانید با استفاده از خصیه های اضافی min، maxو step، کاربر را محدود به وارد کردن مقادیر قابل قبول کنین.

مثال

<form>
    <label>
        Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
    </label>
</form>

تمام مرورگرهای مطرح مثل Mozilla Firefox، Google Chrome، Apple Safari، Internet Explorer 10+ و Opera از نوع ورودی “number” پشتیبانی می کنن. با اینکه مرورگر Internet Explorer اعداد را تشخیص میده ولی دکمه های افزایش (increment) و کاهش  (decrement) را ارائه نمیده.

نوع ورودی Range

این نوع ورودی برای وارد کردن مقادیر عددی از محدوده ی خاصی استفاده میشه. این نوع ورودی بسیار شبیه به نوع ورودی number است ولی برای ورود اعداد، کنترلِ ساده تری را ارائه میده.

مثال

<form>
    <label>
        Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
    </label>
</form>

تمام مرورگرهای مطرح مثل Mozilla Firefox، Google Chrome، Apple Safari، Internet Explorer 10+ و Opera از نوع ورودی “range” پشتیبانی می کنن.

نوع ورودی Search

نوع ورودی search برای ایجاد فیلد جستجو استفاده میشه.

معمولاً فیلد جستجو مثل فیلد متن معمولیه، ولی در بعضی مرورگرها مثل Google Chrome و Apple Safari هنگامی که که شروع به تایپ در جعبه ی جستجو می کنین، یک علامت بعلاوه ی کوچک در سمت راست آن ظاهر میشه که به شما امکان پاک کردن سریعِ فیلد جستجو را میده.

مثال

<form>
    <label>
        Search Website: <input type="search" name="mysearch">
    </label>
</form>

اخطار: مرورگر های Firefox، IE 9 و ورژن های قدیمی تر آن، از نوع ورودی “search” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari، IE 10+ و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

نوع ورودی Tel

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

مثال

<form>
    <label>
        Telephone Number: <input type="tel" name="mytelephone" required>
    </label>
</form>

اخطار: در حال حاضر هیچ مرورگری از اعتبارسنجِ نوع ورودی “tel” پشتیبانی نمیکنه، ولی این نوع ورودی هنوز هم کاربرد داره. IPhone و برخی دستگاه های Android برای تغییر صفحه کلید مجازی به صفحه کلید عددی، از نوع ورودی tel استفاده می کنن.

نوع ورودی Time

نوع ورودی time برای ورود زمان استفاده میشه.

مثال

<form>
    <label>
        Select Time: <input type="time" name="mytime">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Firefox از نوع ورودی “time” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

نوع ورودی URL

نوع ورودی url برای وارد کردن آدرس های وب سایت ها مثل URLها استفاده میشه. می توانید برای وارد کردن بیش از یک URL، از خصیصه ی multiple استفاده کنین. مثل نوع ورودی “email”، ممکنه مرورگر برای فیلد های URL، از یک اعتبارسنج ساده استفاده کنه و مثلاً در فرم ثبت نام ، پیام خطایی را نمایش بده.

مثال

<form>
    <label>
        Website URL: <input type="url" name="mywebsite" required>
    </label>
</form>

نکته: تمام مرورگرهای مطرح مثل Firefox، Chrome، Safari، Internet Explorer 10+ و Opera از اعتبارسنج نوع ورودی “url” پشتیبانی می کنن.

نوع وردی Week

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

مثال

<form>
    <label>
        Select Week: <input type="week" name="myweek">
    </label>
</form>

اخطار: مرورگر های Internet Explorer و Firefox از نوع ورودی “week” پشتیبانی نمی کنن. درحال حاضر مرورگرهای Chrome، Safari و Opera از این نوع داده ی ورودی پشتیبانی می کنن.

مبحث آموزشی

آموزش HTML 5

Learn HTML 5

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

تبلیغات

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

آخرین مقالات

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد