آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

عناصر جدید فرم در HTML5

عناصر جدید فرم در HTML5

فصل چهارم ( معرفی HTML5 )

جلسه  سوم  ( عناصر جدید فرم در HTML5 )

سلام خدمت همراهان عزیز مدرسه مجازی ایرانیان

دیگه وارد دنیای HTML5 شدیم و لازمه که عناصر جدیدی که در این نسخه به دنیای HTML اضافه شدند رو بهتون معرفی کنم . در این جلسه عناصر جدیدی که به فرم اضافه شده رو توضیح میدم .

 

عناصر جدید در فرم :

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

– یک فیلد متنی برای جستجو ، که شامل خاصیت list میشه و مقدار id عنصر datalist رو درون خودش جای میده .

– یک datalist که کلمات پیشنهادیتون رو در option های اون لحاظ می کنید .

 نتیجه ی کد بالا :

2

مرورگرهای پشتیبان : FireFox , Internet Explorer 10+ , Chrome , Opera

 

عنصر <keygen> : اگر شما بخواین یک امنیت قوی برای وبتون ایجاد کنید ، استفاده از SSL میتونه بهترین ایده برای شما باشه . SSL یک پورت و یک محیط امنی رو برای تبادل اطلاعات شما در وب سرور ایجاد میکنه ، به این صورت که اطلاعات و داده هارو رمزگزاری و به کد تبدیل می کنه . اما شما به یک مجوز سمت client (گیرنده) هم احتیاج دارید . عنصر keygen یک جفت کلید عمومی و خصوصی تعیین میکنه که درخواست برای مجوز رو بوجود میاره ، این درخواست به Certificate Authority یا بنیاد گواهی مجاز (CA) ارسال میشه ، سپس CA یه سند رسمی ایجاد میکنه و اون و به مرورگر برمیگردونه . حالا شما میتونید از این مجوز برای تصدیق کاربرتون استفاده کنید . زمانی که یک فرم ارسال میشه ، کلید خصوصی بصورت محلی سمت client ذخیره میشه و کلید عمومی به سمت سرور ارسال میشه .  در کل عنصر keygen کاری شبیه به SSL  انجام میده که هم سمت سرور و هم سمت client هست .

مثال :

 نتیجه ی کد بالا :

3

مرورگرهای پشتیبان : FireFox , Chrome , Opera , Safari6

 

عنصر <output> : از این عنصر جهت مشاهده نتیجه ی یک محاسبه استفاده میشه به کد زیر دقت کنید ، در این کد شما با انتخاب عدد تصادفی و جمع با عدد ۵۰ نتیجه رو میتونید همون لحظه مشاهده کنید :

 نتیجه ی کد بالا :

1مرورگرهای پشتیبان : FireFox , Chrome , Opera , Safari

عنصر datalist و  output برای کدنویسان و عنصر keygen هم برای برنامه نویسان میتونه مفید باشه . اما مشکل اینجاست که Internet Explorer عنصر keygen و output  رو پشتیبانی نمیکنه ؛ امیدواریم در آینده این دو عنصر کاربردی رو این مرورگر ناسازگار پشتیبانی کنه .

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

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • علی

    سلام، خسته نباشید.
    کد زیر رو وارد کردم .لی خروجی بهم بیشتر از ۶۰۰ نمیده، میشه بپرسم دلیل خطاش چیه؟؟؟ ممنون
    ۰
    ۲۰۰ +
    =

    • میترا رحیمی

      سلام دوست عزیز
      رنج اول و ۰ تا ۱۰۰ قرار بدید ، مقدار دوم رو هرچقدر اضافه کنید مشکلی نداره و درست نمایش میده .
      موفق و پاینده باشید .

  • علیرضا کریمی نژاد

    جالب بودن واقعا

  • hossein hassani

    سلام
    سال نو رو به همه اعضای مدرسه مجازی ایرانیان تبریک میگم.
    این تکه کد جاوااسکریپته مگه نه؟
    oninput=”x.value=parseInt(a.value)+parseInt(b.value)”

    • میترا رحیمی

      سلام
      خیلی ممنون
      سال نو شماهم مبارک
      بله جاوااسکریپته

  • hossein hassani

    عنصر kegen برای من یه کم مبهمه.

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟