در این جلسه در طراحی سایت با ادامه کار با فرم ها در HTML پیش می رویم:

email :

از این مقدار برای آن دسته از فیلدھایی که می بایست حاوی یک آدرس ایمیل معتبر باشند
استفاده می شود. مقدار این فیلد قبل از ارسال فرم خطایابی خواھد شد و چنانچه آدرس ایمیل معتبر واردنشده باشد یک پیغام خطا نمایش داده می شوذ:

 <form>
 E-mail: <input type="email" name="user_email" />
 <input type="submit" name="send" />
 </form>

url : از ایمن مقدار برای آن دسته از فیلدھایی که می بایست حاوی یک آدرس اینترنتی معتبر باشنداستفاده می شود. مقدار این فیلد قبل از ارسال فرم خطایابی خواھد شد و چنانچه آدرس معتبر وارد نشده باشد یک پیغام خطا نمایش داده می شود :

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

تصویر زیر نحوه نمایش پیغام خطا در مرورگر کروم را نشان می دھد:
number : از این مقدار برای آن دسته از فیلدھایی که می بایست حاوی یک مقدار عددی باشند استفاده می شود. ما ھمچنین می توانیم محدودیت ھایی روی اعداد قابل قبول نیز اعمال کنیم :

 Points: <input type="number" name="points min="1" max="10" step="3" value="4" />
 <input type="submit" />

نتیجه کد فوق در مرورگر کروم به صورت زیر خواھد بود:
range :از این مقدار برای آن دسته از فیلدھایی که می توانند حاوی مقدار مشخصی از بازه خاصی از اعداد باشند استفاده می شود. ما ھمچنین می توانیم محدودیت ھایی روی اعداد قابل قبول نیز اعمال کنیم.

 <form>
 Points: <input type="range" name="points" min="1" max="10" />
 <input type="submit" name="send" />
 </form>

 

حاصل اجرای کد فوق در مرورگر کروم به صورت زیر است:

ھمانطور که اشاره شد می توان محدودیت ھایی بر روی اعداد قابل قبول اعمال کرد.

ھنگامی که از مقدار number یا range برای صفت type استفاده می شود.

می توان از صفت ھای زیر برای اعمال محدودیت ھا بھره برد:

  • max: حداکثر مقدار قابل قبول را مشخص می کند.
  • min: حداقل مقدار قابل قبول را مشخص می کند.
  • step: فواصل بین مقادیر عددی قابل قبول را مشخص می کند. به عنوان مثال اگر این صفت را برابر ۳ قرار دھیم، مقادیر قابل قبول اعدادی ھمچون ۰،۳،۶،-۳ و …خواھند بود.
  • value: مقدار پیشفرض را مشخص می کند.
  • color :از این مقدار برای ایجاد فیلدھایی که امکان انتخاب رنگ را به کاربر می دھند استفاده می شود.

مرورگر opera از یک جعبه رنگ برای اینکار استفاده می کند. در حالی که کروم فقط امکان وارد کردن مقادیر hexadecimal را می دھد و در غیر اینصورت پیغام خطا را نمایش می دھد.

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

date :در HTML5 چندین مقدار جدید به منظور امکان انتخاب تاریخ و زمان فراھم آورده شده است،

یکی از این مقادیر date می باشد که امکان انتخاب تاریخ خاصی را برای یک فیلد می دھد.

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

سایر مقادیری که می توان برای انتخاب زمان و تاریخ استفاده کرد شامل مقادیری ھمچون , time , week , month ،datetime و local-datetime می باشد.
search : از این مقادیر ھمانطور که از نام آن نیز مشخص است برای ایجاد فیلدھای جستجو، ھمانند جستجو در سایت و جستجوی گوگل استفاده می شود.

این نوع فیلدھا ھمانند کادرھای متنی یک خطی نمایش داده می شوند:

 Search in Site: <input type="shearch" name="search_box" />

بسیار خب دوستان تا اینجا طراحی سایت با ھمه مقادیر صفت type در تگ input آشنا شدیم، در جلسه بعد با بقیه صفات تگ input شما را آشنا خواھیم کرد

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Html در طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پنج × دو =

بررسی کنید

آموزش HTML5 (جلسه دوم) – تگ های ساختار صفحه

در دومین جلسه از طراحی سایت با HTML5 به تگ ھای ساختار صفحه خواھیم پرداخت. این تگ ھا ھمانطو…