0 اسپیناس وب اسپیناس وب

افتخار طراحی سایت بیش از ۱۷۰۰ کسب و کار ایرانی و خارجی

نمونه کارها

آموزش HTML (قسمت سیزدهم)- کار با فرم ها در HTML

نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

در این جلسه در طراحی سایت با ادامه کار با فرم ها در 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: فواصل بین مقادیر عددی قابل قبول را مشخص می کند. به عنوان مثال اگر این صفت را برابر 3 قرار دھیم، مقادیر قابل قبول اعدادی ھمچون 0،3،6،-3 و …خواھند بود.
  • 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 شما را آشنا خواھیم کرد

درگ کنید مشاهده بستن پخش
0%