تبلیغات
یادداشت های من - آموزش HTML5 – جلسه هشتم : عناصر فرم

یادداشت های روزانه من درباره اینترنت، سیاست، آبکنار، رایانه، شعر، فناوری اطلاعات و ...
هر چیزی که بهش علاقه دارم

حسین (کیوان) جهانبخش آبکنار

جستجو

 

آموزش HTML5 – جلسه هشتم : عناصر فرم

پنجشنبه 30 تیر 1390   06:12 ب.ظ

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

در این جلسه ما به این 3 عنصر جدید در فرم می پردازیم:
datalist
keygen
output

پشتیبانی مرورگرها
در حال حاضر IE و Safari از هیچ کدام از این سه تگ پشتیبانی نمی کند.
Firefox از دوتای اول پشتیبانی می کند.
Opera از تمام آن ها پشتیبانی می کند.
Chrome از دوتای آخر پشتیبانی می کند.

عنصر datalist
این عنصر لیستی از عناصر را برای یک فیلد ورودی مهیا می کند. این لیست با عناصر قابل انتخاب در داخل datalist ایجاد می شود.
برای اتصال یک datalist به یک فیاد ورودی، خاصیت list برای آن فیلد را به id یک datalist تعریف می کنیم.
مثال:
Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
<option label="Hussein Jahanbakhsh" value="http://www.husseinjahan.mihanblog.com" />
<option label="Google" value="http://www.google.com" />
<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>


نکته: عناصر انتخابی حتماً باید یک value داشته باشند.

عنصر keygen
هدف این عنصر مهیا کردن راهی مطمئن برای شناسایی کاربران مهیا می کند. این عنصر یک تولید کننده جفت کلید است (key-pair generator). وقتی یک فرم ارسال می شود، 2 کلید تولید می شود، یک کلید عمومی (public) و یک کلید خصوصی (private).
کلید خصوصی در کلاینت ذخیره می شود و کلید عمومی به سرور می رود. کلید عمومی می تواند برای ایجاد یک گواهی کلاینت برای شناسایی کاربر در آینده به کار رود.
در حال حاضر پشتیبانی مرورگرها برای یک استاندارد امنیتی مناسب به اندازه کافی مناسب نیست.
مثال: (این مثال به دلیل اینکه شما از سروری غیر از W3C قصد اتصال به آن را دارید کار نمی کند. می توانید برای مشاهده نحوه کارکرد این مثال از لینک http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_form_keygen استفاده کنید.)


<form action=" http://www.w3schools.com/HTML5/demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>

عنصر output
این عنصر برای انواع مختلف خروجی مثل خروجی محاسبات یا اسکریپت کاربرد دارد:

<output id="result" onforminput="resCalc()"></output>

مثال کامل:

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
function resCalc()
{
numA=document.getElementById("num_a").value;
numB=document.getElementById("num_b").value;
document.getElementById("result").value=Number(numA)+Number(numB);
}
</script>
</head>
<body>
<p>Simple calculator using the output element:</p>
<form onsubmit="return false">
 <input id="num_a" /> +
 <input id="num_b" /> =
 <output id="result" onforminput="resCalc()"></output>
</form>
</body>
</html>


نوشته شده توسط : حسین (کیوان) جهانبخش آبکنار

نوع مطلب : HTML 5 ،طراحی وب ،