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

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

در این جلسه عناصر جدیدی که به فرم 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  رو پشتیبانی نمیکنه ؛ امیدواریم در آینده این دو عنصر کاربردی رو این مرورگر ناسازگار پشتیبانی کنه .

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

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

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۶

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

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

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

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

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

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

ما هم مثل شما از دریافت ایمیل های مزاحم خوشمون نمیاد. فقط مطالب جدید و خبرهای ویژه رو به اطلاع شما میرسونیم. قول میدیم اسپم نکنیم :)

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین