تبلیغات
یادداشت های من - آموزش HTML5 – جلسه هفتم : انواع ورودی ها (Input ها)

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه هفتم : انواع ورودی ها (Input ها)

پنجشنبه 30 تیر 1390   06:09 ب.ظ

انواع ورودی جدید در HTML5
HTML5 چند نوع  input جدید برای فرم ها دارد. این امکانات اجازه کنترل بهتر و بررسی اعتبار یک ورودی را فراهم می کند.
در این جلسه به بررسی انواع جدید ورودی می پردازم:
  • email
  • url
  • number
  • range
  • Date pickers (date، month، week، time، datetime، datetieme-local)
  • search
  • color

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

نوع ورودی email

E-mail: <input type="email" name="user_email" />
فقط ایمیل بصورت adds@site.com را دریافت می کند.

نوع ورودی url

Homepage: <input type="url" name="user_url" />

نوع ورودی number

Points: <input type="number" name="points" min="1" max="10" />
صفات زیر محدودیت هایی که روی عدد ورودی می توانید اعمال کنید نشان می دهد:
max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
min مقدار کمترین عددی که کاربر می تواند وارد نماید.
step فاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد. (مثلا اگر step=3 باشد کاربر فقط می تواند از اعداد -3،0،3،6،9  و ... استفاده کند.)
value مقدار پیشفرض فیلد را مشخص می کند.

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

<input type="range" name="points" min="1" max="10" />
صفات زیر محدودیت هایی که روی عدد ورودی در نوع ورودی range می توانید اعمال کنید نشان می دهد:
max مقدار بیشترین عدد مجازی که کاربر می تواند وارد کند.
min مقدار کمترین عددی که کاربر می تواند وارد نماید.
step فاصله بین اعدای که کاربر مجاز به استفاده است نشان می دهد. (مثلا اگر step=3 باشد کاربر فقط می تواند از اعداد -3،0،3،6،9  و ... استفاده کند.)
value مقدار پیشفرض فیلد را مشخص می کند.

نوع ورودی Date Pickers
HTML5 چندین نوع ورودی جدید برای انتخاب زمان و تاریخ ارائه می دهد:
date: تاریخ روز، ماه و سال را انتخاب می کند.
month: ماه و سال را انتخاب می کند.
week: هفته و سال را انتخاب می کند.
time: زمان را انتخاب می کند (ساعت و دقیقه)
datetime: زمان، روز، ماه و سال را بر حسب ساعت جهانی (UTC) انتخاب می کند.
datetime-local: زمان، روز، ماه و سال را بر حسب زمان محلی انتخاب می کند.

Date: <input type="date" name="user_date" />

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

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

Color: <input type="color" name="user_color" />


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،