اموزش HTML 5 جلسه پنجم (اخرین جلسه)

با عرض سلام و خسته نباشید با پنجمین و آخرین جلسه آموزش HTML 5 خدمت شما هستم
#html5_session_5

#html5

دز جلسات قبلی با ویژگی های جدید HTML 5 چون WEB STORAGE ، GEO Location ، کار با CANVAS و یک سری دیگر از قابلیت های جدید HTML5 آشنا شدیم امروز هم این مباحث رو به امید خدا تکمیل خواهیم کرد.
امروز ما درباره HTML SSE و Worker ها و ویژگی های جدید فرم ها صحبت خواهیم کرد
در پایان به بررسی AUDIO و VIDEO در HTML 5 خواهیم پرداخت که دوستان متذکر شدن که بررسی بکنیم
اولین مورد بررسی ما (SSE (Server-Sent Events - پیام های یک طرفه
ویژگی SSE قابلیت جدیدی در Html5 است که به مرورگر این امکان را می دهد تا Updateهای ارسالی از طرف سرور را دریافت کند.
این قابلیت در گذشته بصورت دیگری وجود داشته است، هر زمان که Updateی ایجاد می شد صفحه وب برای دریافت Update مجبور بود آنرا درخواست نماید. اما با SSE این کار بصورت اتوماتیک و پشت پرده صورت می گیرد.
رویدادهای ارسال شده توسط سرور HTML5، اجازه می دهد تا یک صفحه وب به روز رسانی ها را از یک سرور دریافت کند.
مثال: به روز رسانی های فیس بوک/توییتر ، به روز رسانی قیمت سهام، اخبار، نتایج ورزشی، تغییر عناوین خبرها، تغییر در شاخص ها و نمودارهای سایت های اقتصادی و ...
برای دریافت اطلاعات ارسالی از سرور شیء EventSource برای دریافت اطلاعات در Updateهای ارسالی از طرف سرور به کار می رود.
بلافاصله بعد از ایجاد شیء EventSource، این شیء تمام رویدادهایی که در URL تنظیم شده اتفاق می افتد را گوش می دهد (Listening).
شکل کلی استفاده از این شیء بصورت زیر است:

var source=new EventSource("karen.php");
source.onmessage=function(event)
  {
  document.getElementById("result").innerHTML+=event.data + "<br>";
  };

فرآیند این کد به شکل زیر است :
ایجاد یک آبجکت جدید EventSource، و مشخص کردن URL صفحه ای که به روز رسانی را ارسال می کند (در این نمونه "karen.php")
هر بار که بروز رسانی دریافت شود ، رویداد onmessage رخ می دهد
وقتی یک رویداد onmessage رخ می دهد، داده های دریافت شده را درون عنصری با id="result" قرار می دهد
ولی خوب همون طور که میدونیم طبق معمول IE مشکل داره با SSE و برای همین قبل از استفاده از همچین قابلیتی بررسی میکنیم ممکن هست این قابلیت یا نه :

if(typeof(EventSource)!=="undefined")
  {
  // Yes! Server-sent events support!
  // Some code.....
  }
else
  {
  // No server-sent events support..
  }

حالا اون فایل karen.php چی قرار است باشد ؟
اولین نکته درباره ی این فایل این است که content type اش باید از نوع text/event-stream باشد و کش کردن را غیر فعال کرده باشد تا دیتای ما کش نشود و همیشه بروز باشد :

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>

برای اطلاعات بیشتر در این زمینه در همین سایت طی روز های اینده قرار خواهد گرفت
توضیح مختصری درباره این کد میدهم :
1تنظیم عنوان " Content-Type" را روی "text/event-stream"
2تعیین اینکه صفحه نباید کش شود
3خروجی داده برای ارسال (همیشه با data: آغاز می شود)
4برگشت سریع داده های خروجی به صفحه وب
[In reply to آموزش برنامه نویسی - از مبتدی تا حرفه ای]
در مثال پیشین ما از رویداد onmessage استفاده کردیم که هنگام دریافت پیام trigger یا تحریک میشود
علاوه بر این رویداد چند رویداد دیگر هم وجود دارند که به شرح زیر است :
onopen  هنگامی که یک اتصال به سرور باز شده است
onmessage  هنگامی که پیام دریافت شده است
onerror  هنگامی که یک خطا رخ می دهد
در هنگام اجرای اسکریپت ها در یک صفحه HTML، صفحه غیر قابل دسترس می شود تا زمانی که اسکریپت به پایان برسد. یک worker وب، جاوا اسکریپتی است که بدون تاثیر بر عملکرد صفحه ، به طور مستقل از اسکریپت های دیگر در پس زمینه اجرا می شود. شما می توانید همچنان به انجام هر کاری که می خواهید با کلیک کردن، انتخاب همه چیز، و ... ادامه دهید، در حالی که پدید آورنده وب در پس زمینه اجرا می شود.worker ها در تمام مرورگرهای بزرگ، به جز مرورگر اینترنت اکسپلورر پشتیبانی می شود.
[In reply to آموزش برنامه نویسی - از مبتدی تا حرفه ای]
این مبحث مبحث کارگرها یا worker ها می باشد
یک worker جاوا اسکریپتی است که بدون تاثیر بر عملکرد صفحه ، در حال اجرا در پس زمینه می باشد.
قبل از اینکه یک worker ایجاد کنید ، مثل همیشه بررسی کنید که آیا مرورگر کاربران از این مورد پشتیبانی می کند یا خیر :

if(typeof(Worker)!=="undefined")
  {
  // Yes! Web worker support!
  // Some code.....
  }
else
  {
  // Sorry! No Web Worker support..
  }

حال بیایید یک شمارشگر بسازیم (شاید الان استفاده از worker یکم عجیب به نظر برسد اما پس از پایان کار علت رو متوجه خواهید شد)

var i=0;
function timedCount()
{
i=i+1;
postMessage(i);
setTimeout("timedCount()",500);
}
timedCount();

بخش مهم کد بالا متد postMessage () است که برای نوشتن یک پیام و بازگشت آن به صفحه HTML استفاده می شود.
توجه: به طور معمول worker ها برای اسکریپتهای خیلی ساده استفاده نمی شود، اما برای وظایف بیشتر متمرکز CPUاستفاده می شود.
[In reply to آموزش برنامه نویسی - از مبتدی تا حرفه ای]
محتوی این کد رو در یک فایل ذخیره کنید
اسمش رو بزارید مثلا script.js
حالا که فایل وب را داریم ، نیاز داریم که آن را از یک صفحه HTML فراخوانی کنیم.
خطوط زیر بررسی می کند که پدید آورنده در حال حاضر وجود دارد یا نه، اگر نه - آن را ایجاد می کند و کد را در "demo_workers.js" اجرا می کند:

if(typeof(w)=="undefined")
  {
  w=new Worker("script.js");
  }

سپس ما می توانیم از وب پیام ها را ارسال و دریافت کنیم.
یک "onmessage" شنونده رویداد ، به پدید آورنده وب اضافه کنید.

w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};

هنگامی که پدید آورنده وب یک پیام ارسال می کند ، کد در داخل شنونده رویداد اجرا می شود. داده ها از پدید آورنده وب در event.data ذخیره می شود.
هنگامی که یک آبجکت پدید آورنده وب ایجاد می شود، به شنیدن پیام ها ادامه خواهد داد (حتی بعد از اسکریپت های خارجی که به پایان رسیده است) تا زمانی که terminate شود. برای terminate کردن یک پدید آورنده وب و منابع رایگان مرورگر/کامپیوتر ، از متد terminate() استفاده کنید:
w.terminate();
از آنجا که  worker ها در فایل های خارجی هستند، به آبجکت های جاوا اسکریپت زیر دسترسی ندارند :
Window object
Document object
Parent object
------------------------------------------------------------------------------------------------------------—
خب این بخش هم به پایان رسید
حالا میرویم سراغ بررسی ویژگی های جدید فرم ها
—------------------------------------------------------------------------------------------------------------
انواع ورودی های جدید HTML5

جدیدا HTML5 دارای انواع مختلف ورودی های جدید برای فرم ها می باشد. این ویژگی های جدید به شما اجازه کنترل بهتر ورودی و اعتبار را می دهد.
این بخش انواع ورودی های جدید را پوشش می دهد:
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
توجه: همه مرورگرهای اصلی از انواع ورودی های جدید پشتیبانی نمی کنند. با این حال، شما در حال حاضر می توانید شروع به استفاده از آنها کنید ، اگر آنها پشتیبانی نشوند، به صورت فیلد متنی منظم درمی آیند.
نوع ورودی: color
نوع color برای فیلدهای ورودی که باید شامل یک رنگ باشد ، مورد استفاده قرار می گیرد. نمونه یک رنگ از یک انتخاب کننده رنگ انتخاب کنید:

Select your favorite color: <input type="color" name="favcolor">

نوع ورودی: date
نوع تاریخ این اجازه را می دهد تا کاربر یک تاریخ را انتخاب کند.

Birthday: <input type="date" name="bday">

نوع ورودی: datetime
نوع datetime اجازه می دهد تا کاربر یک تاریخ و زمان را انتخاب کند. (با منطقه زمانی)

Birthday (date and time): <input type="datetime" name="bdaytime">

نوع ورودی: datetime-local
نوع datetime-local اجازه می دهد تا کاربر تاریخ و زمان منطقه را انتخاب کند. (بدون منطقه زمانی)

Birthday (date and time): <input type="datetime-local" name="bdaytime">

نوع ورودی: email
نوع email در فیلدهای ورودی که باید یک آدرس ایمیل را شامل شود، مورد استفاده قرار می گیرد.

E-mail: <input type="email" name="usremail">

نکته: مرورگر سافاری در آی فون نوع ایمیل را تشخیص می دهد ، و صفحه کلید را روی صفحه نمایش تغییر می دهد تا با آن جور شود(گزینه های @ و com. را اضافه می کند)

نوع ورودی: month
نوع month اجازه می دهد تا کاربر سال و ماه را انتخاب کند.

Birthday (month and year): <input type="month" name="bdaymonth">

نوع ورودی: number
نوع number برای فیلدهای ورودی که باید یک مقدار عددی داشته باشند ، مورد استفاده قرار می گیرد.
شما همچنین می توانید محدودیتی در مورد اعدادی که پذیرفته می شوند تنظیم کنید:

Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5">

با استفاده از ویژگی های زیر برای مشخص کردن محدودیت ها:

max - تعیین حداکثر مقدار مجاز
min - تعیین حداقل مقدار مجاز
step - تعیین فواصل قانونی شماره
value - تعیین مقدار پیش فرض
نمونه ای با استفاده از تمام ویژگی های محدودیت را امتحان کنید:

نوع ورودی: range
نوع range برای فیلدهای ورودی است که باید یک مقدار از محدوده ای از اعداد باشد مورد استفاده قرار می گیرد.
شما همچنین می توانید محدودیتی در مورد اعدادی که قابل قبول است تنظیم کنید.

<input type="range" name="points" min="1" max="10">

نوع ورودی: search
نوع search برای جستجو در فیلدهای جستجو مورد استفاده قرار می گیرد. (یک فیلد جستجو مانند یک فیلد متنی معمولی رفتار می کند)

Search Google: <input type="search" name="googlesearch">

ورودی: tel
برای وارد کردن شماره تلفن

Telephone: <input type="tel" name="usrtel">

نوع ورودی: time
نوع time اجازه می دهد تا کاربر یک زمان را انتخاب کند.

Select a time: <input type="time" name="usr_time">

نوع ورودی: url
نوع url برای فیلدهای ورودی که باید یک آدرس URL را شامل شوند ، مورد استفاده قرار می گیرد.
مقدار فیلد آدرس وقتی که فرم را مشاهده کنید به طور خودکار معتبر می شود.

Add your homepage: <input type="url" name="homepage">

نکته: سافاری در آیفون نوع ورودی URL را تشخیص می دهد ، و صفحه کلید را روی صفحه نمایش تغییر می دهد تا با آن جور شود(گزینه .com را اضافه می کند)

نوع ورودی: week
نوع week اجازه می دهد تا کاربر یک هفته و سال را انتخاب کند. 

 Select a week: <input type="week" name="week_year">

سه مورد دیگه هم هستند که بررسی خواهیم کرد که به شرح زیر هستند:
<datalist>
<keygen>
<output>
البته هنوز یکی دو مورد از مرورگر ها هستن که پشتیبانی نمیکنند ولی خب شما استفاده کنید آن ها هم بعدا خواهند کرد.

عنصر <datalist>
عنصر <datalist> یک لیست از گزینه های از پیش تعریف شده برای عنصر <input>مشخص می کند.
عنصر <datalist>برای ارائه ویژگی " autocomplete" بر روی عناصر< input >مورد استفاده قرار می گیرد. کاربران همزمان با وارد کردن داده ها ، یک لیست کشویی از گزینه های از پیش تعریف شده را خواهند دید.
از ویژگی فهرست عنصر < input >برای اتصال آن بهمراه یک عنصر <datalist>استفاده کنید.
نمونه :

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 

—------------------------------------—
عنصر<keygen>
هدف از عنصر <keygen>، ارائه یک راه امن برای تأیید هویت کاربران است.
برچسب <keygen>یک فیلد برای مولد کلید جفت را در یک فرم مشخص می کند.
وقتی که فرم ارسال می شود، دو کلید، یکی خصوصی و یکی عمومی تولید می شود.
کلید خصوصی به صورت محلی ذخیره می شود ، و کلید عمومی به سرور فرستاده می شود. کلید عمومی می تواند در آینده برای تولید یک گواهی سمت سرویس گیرنده برای تأیید هویت کاربر ، مورد استفاده قرار گیرد.
نمونه :

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

—----------------------------
عنصر<output> HTML5
عنصر <output> نشان دهنده نتیجه محاسبات است. (مانند محاسبه انجام شده توسط یک اسکریپت)
نمونه :

<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>

همچنین HTML5 خواص جدید متعددی برای <form>و <input>دارد.
خواص جدید برای <form>:
autocomplete
novalidate
ویژگی های جدید برای <input>:
autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step
خاصیت<form>/ <input>autocomplete
خاصیت autocomplete مشخص می کند که آیا autocomplete یک فرم یا فیلد ورودی باید روشن باشد یا خاموش.
هنگامی که autocomplete روشن است، مرورگر به صورت خودکار شروع به تکمیل مقادیر مبتنی بر مقادیری که کاربر قبلا وارد کرده است ، می کند.
نکته: امکان این وجود دارد که تکمیل خودکار (autocomplete) برای فرم "روشن" و "خاموش" برای فیلد های ورودی خاص "خاموش" باشد ، و یا بالعکس.
توجه: خاصیت تکمیل خودکار با این با <form>و انواع <input>به شرح زیر کار می کند :
text, search, url, tel, email, password, datepickers, range, and color
یک فرم HTML با تکمیل خودکار روشن (و خاموش برای یک ورودی فیلد) :

<form action="demo_form.aspx" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form> 

نکته: در بعضی از مرورگرها ممکن است شما نیاز به فعال کردن تکمیل خودکار برای این کار داشته باشید.
خاصیت <form>novalidate

خاصیت novalidate یک خاصیت بولین است.
زمانی که ارائه می شود ، مشخص می کند که فرم-داده (ورودی) زمانی که ارسال می شود نباید دارای اعتبار شود.
نشان می دهد که فرم نباید در زمان ارسال ، اعتبار داده شود :

<form action="demo_form.aspx" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form> 

خاصیت <input>autofocus
خاصیت فوکوس خودکار(autofocus) یک ویژگی بولین است.
زمانی که ارائه می شود ، مشخص می کند که یک عنصر <input >هنگامی که صفحه بارگذاری می شود ، باید به طور خودکار متمرکز شود.
اجازه می دهد فیلد ورودی "firstname" هنگامی که صفحه بارگذاری می شود ، به صورت خودکار متمرکز شود:

First name:<input type="text" name="fname" autofocus>

خاصیت <input> form
خاصیت فرم مشخص می کند یک یا چند فرم به یک عنصر <input >تعلق دارد.
نکته: برای اشاره به بیش از یک فرم از یک لیست space-separated از شناسه های فرم استفاده کنید.
یک فیلد ورودی واقع در خارج از HTML (اما هنوز هم بخشی از فرم است)

<form action="demo_form.aspx" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">

<input> formaction خاصیت
خاصیت formaction ، URL فایلی را مشخص می کند که کنترل ورودی را زمانی که فرم ارسال شود ، پردازش خواهد کرد. خاصیت formaction ، خاصیت action عنصر <form>را لغو می کند. توجه: خاصیت formaction با type="submit" و type="image" مورد استفاده قرار می گیرد.
یک فرم HTML با دو دکمه ارسال ، با عملکرد های مختلف :

<form action="demo_form.aspx">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.aspx"
  value="Submit as admin">
</form>

ویژگی ><input> formenctype
ویژگی formenctype مشخص می کند داده ها زمانی که به سرور ارسال می شوند ، چگونه باید کدگذاری شوند (فقط برای فرم های دارای method="post") خاصیت formenctype ویژگی enctype عنصر <form>را لغو می کند. توجه: خاصیت formenctype با type="submit" and type="image" مورد استفاده قرار می گیرد.
فرم-داده هایی را که به طور پیش فرض کد گذاری شده است (دکمه submit اول)، و فرم-داده هایی را که به عنوان "multipart/form-data" کد گذاری شده است (دکمه submit دوم)، ارسال می کند

<form action="demo_post_enctype.aspx" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

خاصیت ><input> formmethod
خاصیت formmethod ، متد HTTP برای ارسال فرم -داده به action URL را تعریف میکند. خاصیت formmethod ، خاصیت method عنصر <form>را لغو می کند. توجه: خاصیت formmethod را می توان بهمراه type="submit" and type="image" استفاده کرد.
دکمه submit دوم متد HTTP فرم را لغو می کند.

<form action="demo_form.aspx" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.aspx"
  value="Submit using POST">
</form>

خاصیت ><input> formnovalidate
خاصیت formnovalidate یک ویژگی بولی است. زمانی که ارائه می شود ، مشخص می کند که عنصر <input>زمانی که ارسال می شود ، نباید دارای اعتبار شود. خاصیت formnovalidate ، خاصیت novalidate عنصر <form>را لغو می کند. توجه: خاصیت formnovalidate را می توان با type="submit" استفاده کرد.
فرم با دو دکمه ارسال (با و بدون اعتبار دهی) :

<form action="demo_form.aspx">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

خاصیت ><input> formtarget
خاصیت formtarget یک نام و یا یک کلمه کلیدی را مشخص می کند که نشان می دهد کجا باید نتیجه دریافت شده را پس از ارسال فرم نشان دهد. formtarget خاصیت target عنصر <form>را لغو می کند. توجه: خاصیت formtarget را می توان با type="submit" and type="image" استفاده کرد.
ارسال یک فرم با دو دکمه، با پنجره های هدف متفاوت:

<form action="demo_form.aspx">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form> 

خواص ><input> width , height
خواص height و width ، ارتفاع و عرض عنصر <input>را مشخص می کند. توجه: ویژگی های height و width تنها با <input type="image>استفاده می شود. نکته: همیشه هر دو خاصیت height و width عکس را مشخص کنید. اگر ارتفاع و عرض تعیین شود ، فضای مورد نیاز برای تصویر زمانی که صفحه لود می شود رزرو خواهد شد. با این حال، بدون این خواص، مرورگر اندازه تصویر را نمی داند، و نمی تواند فضای مناسب آن را ذخیره کند. تاثیر آن تغییر طرح بندی صفحه در طول بارگذاری خواهد بود. (در طول بارگذاری عکس)
یک تصویر به عنوان دکمه submit، با خواص height و width تعریف می کند :

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

خاصیت ><input> list
خاصیت لیست به یک عنصر <datalist>اشاره می کند که شامل گزینه های از پیش تعریف شده برای عنصر <input>می باشد.
عناصر یک عنصر <input>با مقادیر از پیش تعریف شده در یک <datalist>: توجه: خواص حداقل و حداکثر با انواع ورودی های زیر کار می کند: number, range, date, datetime datetime-local, month, time , week
نمونه :

<input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

خواص ><input> min and max
خواص min و max ، مقدار حداقل و حداکثر را برای عنصر <input>تعیین می کند. توجه: خواص حداقل و حداکثر با انواع ورودی های زیر کار می کند: number, range, date, datetime datetime-local, month, time , week
عناصر <input >با مقادیر حداقل و حداکثر:

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

خاصیت><input> multiple
خاصیت multiple یک ویژگی بولین است. زمانی که ارائه می شود ، مشخص می کند که کاربر مجاز به وارد کردن بیش از یک مقدار در عنصر <input >می باشد. توجه: خاصیت multiple با با انواع ورودی زیر کار می کند : email , file
فیلد آپلود فایل که چندین مقدار را می پذیرد :
نمونه :

Select images: <input type="file" name="img" multiple>

خاصیت ><input>pattern
ویژگی pattern (الگو) یک عبارت منظم را مشخص می کند ، که مقدار عنصر <input > در برابر آن بررسی شده است. توجه: خاصیت pattern با انواع ورودی زیر کار می کند: text, search, url, tel, email, password. نکته: از خواص title سراسری برای توصیف الگو جهت کمک به کاربر استفاده کنید.
فیلد ورودی که می تواند فقط سه حرف را شامل شود (بدون اعداد یا کاراکترهای خاص) :

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

خاصیت ><input> placeholder
خاصیت placeholder اشاره (hint) کوتاهی را مشخص می کند که مقدار مورد انتظار از یک فیلد ورودی را توصیف می کند. (به عنوان مثال یک مقدار نمونه و یا یک توضیح کوتاه از فرمت مورد انتظار) hint در فیلد ورودی هنگامی که خالی است نمایش داده می شود ، و زمانی که فیلد متمرکز می شود ، از بین می رود. توجه: خاصیت placeholder با انواع ورودی زیر کار می کند : text, search, url, tel, email, password
فیلد ورودی با متن placeholder :
نمونه :

<input type="text" name="fname" placeholder="First name">

خاصیت ><input> required
خاصیت required یک ویژگی بولین است. زمانی که ارائه می شود ، مشخص می کند که یک فیلد ورودی باید قبل از ارسال فرم پر شده باشد. توجه: خاصیت required با انواع ورودی زیر کار می کند : text, search, url, tel, email, password, date pickers, number, checkbox, radio, file
فیلد ورودی required :
نمونه :

Username: <input type="text" name="usrname" required>

خاصیت ><input> step
خاصیت step ، فواص قانونی اعداد برای عنصر < input > مشخص می کند. به عنوان مثال : اگر step=*3* اعداد قانونی می تواند -3، 0، 3، 6، و ... باشد. نکته: step می تواند همراه با خواص max و min برای ایجاد یک طیف وسیعی از مقادیر مجاز مورد استفاده قرار گیرد. توجه: خاصیت step با انواع ورودی های زیر کار می کند : number, range, date, datetime, datetime-local, month, time ,week
فیلد ورودی با فواصل مشخص قانونی اعداد:
نمونه :

<input type="number" name="points" step="3">

خب حالا میریم برای بخش نهایی که درباره AUDIO و  VIDEO هست که متاسفانه در جلسه قبلی فراموش شد توضیح داده بشود
ویدیو در HTML5 :

تا به حال، استانداردی برای نمایش ویدئو / فیلم در یک صفحه وب وجود نداشته است.
امروزه، اکثر فیلم ها از طریق یک پلاگین (مانند فلش) نشان داده می شود. با این حال، مرورگرهای مختلف ممکن است پلاگین های متفاوت داشته باشند.
HTML5 یک عنصر جدید را تعریف می کند که یک روش استاندارد را برای جاسازی ویدیو / فیلم در یک صفحه وب مشخص می کند. عنصر <video>
اینترنت اکسپلورر 9، فایرفاکس، اپرا، کروم، و سافاری از عنصر <video> پشتیبانی می کنند.
توجه: مرورگر اینترنت اکسپلورر 8 و نسخه های قبلی، عنصر <video> را پشتیبانی نمی کنند.
برای نشان دادن یک ویدئو در HTML5، این همه چیزی است که نیاز دارید :

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 

ویژگی کنترل ، کنترل ویدئویی، مانند پخش، مکث، و حجم صدا را می افزاید.
همچنین این ایده خوبی است که همیشه شامل ویژگی های عرض و ارتفاع باشد. اگر ارتفاع و عرض تعیین شود ، فضای مورد نیاز برای ویدئو زمانی که صفحه بارگذاری می شود محفوظ است.
با این حال ، بدون این ویژگی، مرورگر اندازه ویدئو را نمی داند، و نمی تواند فضای مناسب آن را ذخیره کند.
تاثیر آن تغییر طرح بندی صفحه در طول بارگذاری خواهد بود (در حین بار گذاری ویدئو)
شما همچنین باید محتوای متنی را بین برچسب های <video> و </video> برای مرورگر هایی که عنصر <video> را پشتیبانی نمی کنند درج کنید.
عنصر <video> به عناصر متعدد <source> اجازه می دهد.
عناصر <source> می توانند به فایل های ویدئویی مختلف لینک کنند. مرورگر اولین فرمت تشخیص داده شده را استفاده خواهد کرد.
در حال حاضر، 3 فرمت ویدیویی برای عنصر <video> وجود دارد : MP4 ، WebM و OGG

MP4 = فایل های MPEG 4 با کدک ویدئویی H264 و کدک صوتی AAC
MP4 = فایل های MPEG 4 با کدک ویدئویی H264 و کدک صوتی AAC
Ogg = فایلهای Ogg با کدک ویدئویی Theora و کدک صوتی Vorbis
انواع MIME برای فرمت های ویدیویی
MP4  video/mp4
WebM  video/webm
Ogg  video/ogg

صوت در HTML5:

امروزه، اکثر فایل های صوتی از طریق پلاگین (مانند فلش) اجرا می شود. با این حال، مرورگرهای مختلف ممکن است از پلاگین های متفاوت استفاده کنند. HTML5 یک عنصر جدید تعریف می کند که یک روش استاندارد برای جاسازی یک فایل صوتی را در یک صفحه وب مشخص می کند : عنصر <audio>
اینترنت اکسپلورر 9، فایرفاکس، اپرا، کروم، و سافاری از عنصر <audio> پشتیبانی می کنند.
توجه: مرورگر اینترنت اکسپلورر 8 و نسخه های قبلی، عنصر <audio> را پشتیبانی نمی کنند.
برای پخش فایل های صوتی در HTML5، این همه آنچه که نیاز دارید نمونه زیر است:
نمونه :

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio> 

ویژگی کنترل ، کنترل های صوتی، مانند پخش، مکث، و حجم صدا را می افزاید.
شما همچنین باید یک محتوای متنی بین برچسب های <audio> و </audio> برای مرورگر هایی که عنصر <audio> را پشتیبانی نمی کنند درج کنید.
عنصر <audio> به عناصر <source> متعدد اجازه می دهد. عناصر <source> می توانند به فایل های مختلف صوتی لینک کنند . مرورگر اولین فرمت تشخیص داده شده را اجرا خواهد کرد.
در حال حاضر، 3 فرمت فایل پشتیبانی شده برای عنصر <audio> وجود دارد : MP3 ، WAV ، و OGG:
انواع MIME برای فرمت های صوتی:
Format  MIME-type
MP3  audio/mpeg
Ogg  audio/ogg
Wav  audio/wav
خب سری آشنایی با ویژگی های جدید HTML5 هم به پایان رسید
سعی کردیم در این 5 قسمت به نشانه ی HTML 5 تمامی ویژگی های جدید HTML5 را توضیح دهیم امیدوارم که از مطالب این آموزش ها خوشتان آمده باشد
بزودی شما رو با یک سری آموزش جدید خواهیم دید
به امید دیدار.............
#html5_session5
#html5