در این جلسه در طراحی سایت با ادامه کار با فرم ها در 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 شما را آشنا خواھیم کرد

  • بهینه سازی موتور جستجو(SEO)

    بهینه سازی موتور جستجو(SEO) چیست؟ سئو یک رشته بازاریابی است که در آن تمرکز بر روی قابلیت د…
  • طراحی سایت شخصی جناب آقای دکتر خرسندی

    طراحی سایت شخصی جناب  آقای دکتر خرسندی نام وب سایت : خرسندی تاریخ تحویل :تیر ۹۶ آدرس وب سا…
  • تاثیر سئو وبلاگ در طراحی سایت

    امروز می خواهیم در مورد موضوع تاثیر وبلاگ در طراحی سایت باهم صحبت کنیم. در طراحی سایت که ا…
  • الگوریتم Rank Brain گوگل

      مقاله ای که در طراحی سایت اسپیناس می خواهیم در مورد آن صحبت کنیم در مورد الگوریتم R…
  • CRM چیست ؟

    Crm چیست ؟ امروز در طراحی وب سایت اسپیناس به این موضوع میپردازیم یک شرکت برای بیزنس خود عل…
  • کمپین تبلیغاتی Advertising Campaign در طراحی وب سایت

      امروز در طراحی سایت اسپیناس می خواهیم در مورد یک موضوع داغ امروز صحبت کنیم. بیشتر م…
بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Html در طراحی سایت

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

بررسی کنید

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

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