%45 تخفیف، با کد daneshjoo روی تمام آموزش ها، بمناسبت روز دانشجو
زمان باقی مانده
سبد (0)

تبلیغات

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

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

HTML5 چندین تگ و خصوصیت جدید برای فرم ها در نظر گرفته است.

  • datalist
  • keygen
  • output

توجه: درست است که بعضی از مرورگرها از این انواع ورودی جدید پشتیبانی نمی کنند، ولی در صورت عدم پشتیبانی، با آن ها مثل ورودی های متنی ساده برخورد می کنند و مشکلی پیش نمی آید.


عنصر <datalist>

این عنصر لیستی از گزینه های از پیش تعریف شده را برای یک فیلد ورودی مهیا می کند.

زمانی که کاربر داده وارد می کند، یک لیست کشویی ظاهر می شود و می تواند از گزینه های پیشنهاد داده شده یکی را انتخاب نماید.

برای اتصال یک <datalist> به یک فیلد ورودی متنی، باید خاصیت list فیلد متنی را با id عنصر <datalist> تنظیم نمایید.

OperaSafariChromeFirefoxInternet Explorer

مثال (عناصر جدید برای فرم ها در HTML5)

<input list="browsers">

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>
خودتان امتحان کنید »

عنصر <keygen>

هدف این عنصر مهیا کردن راهی مطمئن برای شناسایی کاربران است.

این عنصر یک تولید کننده جفت کلید است (key-pair generator).

وقتی یک فرم ارسال می شود، 2 کلید تولید می شود، یک کلید عمومی (public) و یک کلید خصوصی (private).

کلید خصوصی در کلاینت ذخیره می شود و کلید عمومی به سرور ارسال می شود. کلید عمومی می تواند برای ایجاد یک گواهی کلاینت برای شناسایی کاربر در آینده به کار رود.

OperaSafariChromeFirefoxInternet Explorer

مثال (عناصر جدید برای فرم ها در HTML5)

<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
خودتان امتحان کنید »

عنصر <output>

این عنصر برای انواع مختلف خروجی مثل نتیجه یک محاسبه ریاضی کاربرد دارد (شبیه زمانی که محاسبه بوسیله یک اسکریبت اجرا می شود عمل می کند).

OperaSafariChromeFirefoxInternet Explorer

مثال (عناصر جدید برای فرم ها در HTML5)

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
خودتان امتحان کنید »

دیدگاه‌ها  

+4 # مهدی دلاور 1395-07-26 01:03
سلام و خسته نباشید و باز هم سوال
من ذرمورد نحوه عمل این دو عنصر آخری keygen و output تقریبا هیچی نفهمیدم. آیا به خاطر ارتباط اونها با جاواسکریپت و php و اینهاست که من هنوز چیزی ازشون بلد نیستم یا من خوب مطالعه نکردم؟ آخه توی مرجع تگ ها هر تو این سایت و هم ساید انگلیسیش هم اطلاعات زیادی نداده بود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1395-07-26 13:39
با سلام و خسته نباشید.
دوست عزیز در دنیای کدنویسی به صورت واقعی، یه سری مباحث عملا استفاده نمیشه یا کاربردشون خیلی کمه. من چند سال کدنویسی می‌کنم، ولی واقعا حتی یک کد ندیدم که از این دو تگ استفاده کرده باشه.
برای احراز هویت معمولا از زبان‌های سمت سرور استفاده می‌کنن که خودش یه داستان جداست.
همینطور برای محاسبات و مواردی اینچنینی، از زبان برنامه‌نویسی استفاده میشه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # sina 1394-09-08 02:15
سلام خسته نباشید
در مثال عنصر دیتالیست در آدرس www.beyamooz.com/try_it_yourself/tryit.php?filename=tryhtml5_datalist گویا صفحه demo_form.asp قابل دستیابی نیست و با پیغام خطای 404 مواجه میشیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-09-08 07:08
با سلام و تشکر.
فایل مذکور با پسوند php. هست. یعنی demo_form.php!

از این بابت عذرخواهی می‌کنیم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Ken Kaniki 1394-03-22 15:22
با عرض سلام و خسته نباشید
در مثال output عنصر oninput جیه یکم لطفا در موردش توضیح بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+5 # احسان عباسی 1394-03-22 17:41
سلام
برای یادگیری رویداد oninput به آموزش زیر مراجعه نمایید:
www.beyamooz.com/jsref/3169-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF-oninput
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی