PDA

View Full Version : ویژگی های جدید HTML5 – قسمت اول


mahdivita
پنج شنبه 22 فروردین 1392, 22:26 عصر
تعیین کردن نوع سند :

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


<!DOCTYPE html>

ساختن متن های قابل ویرایش :

با استفاده صفت contenteditable در HTML5 می توان محتوایی در پوشش صفحات وب با قابلیت ویرایش ساخت و می توان به کاربران اجازه داد نوشته هایی که در پوشش این المان هستند را ویرایش کنند .






<html lang="en">

<head>

<meta charset="utf-8">

<title>untitled</title>

</head>

<body>

<h2>Editable</h2>

<ul contenteditable="true">

<li>Text 1</li>

<li>Text 2</li>

<li>Text 3</li>

</ul>

</body>

</html>


استفاده از HTML5 در Internet Explorer :

در مرورگر Internet Explorer پشتیبانی خوبی از تگ های HTML5 نمی شود و به همین دلیل برای استفاده باید از یک سری تکنیک ها استفاده شود که بهترین روش استفاده از اسکریپت HTML5.js است که باید به صورت زیر در قسمت Head صفحات وب استفاده شود :


<!--[if IE]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->


صفت مورد نیاز برای فیلدها :

برای اجباری کردن فیلد های مورد نظر درفرم های تماس و … در HTML5 می توان از صفت Required به دو روش استفاده کرد :


<input type="text" name="someInput" required>


با


<input type="text" name="someInput" required="required">


صفت انتخاب اتوماتیک فیلدها :

از این صفت برای انتخاب اتوماتیک فیلد مورد نظر در فرم ها استفاده می شود که همان حالت Focus است که بعد از کلیک کردن روی فیلد اتفاق می افتد . که باید به صورت زیر استفاده شود :


<input type="text" name="someInput" autofocus>


عبارات منظم :

گاهی اوقات ورودی فیلدها و اغلب در فیلدهای ایمیل ، متن ورودی باید از قاعده خاصی پیروی کند که قبل از HTML5 از کدهای جاوا برای این منظور استفاده می شد و در حال حاضر با یک کد خلاصه می شود این کار را به راحتی انجام داد :


<form action="" method="post">

<label for="username">Create a Username: </label>

<input type="text"

name="username"

id="username"

placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}"

autofocus

required>

<button type="submit">Go </button>

</form>
Veteran
پنج شنبه 22 فروردین 1392, 22:34 عصر
اینجا بخش برنامه نویسی هست
فکر کنم توی طراحی باشه بهتره
بازدهی بیشتری داره
eshpilen
جمعه 23 فروردین 1392, 10:27 صبح
گاهی اوقات ورودی فیلدها و اغلب در فیلدهای ایمیل ، متن ورودی باید از قاعده خاصی پیروی کند که قبل از HTML5 از کدهای جاوا برای این منظور استفاده می شد و در حال حاضر با یک کد خلاصه می شود این کار را به راحتی انجام داد :


<form action="" method="post">

<label for="username">Create a Username: </label>

<input type="text"

name="username"

id="username"

placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}"

autofocus

required>

<button type="submit">Go </button>

</form>


به گمانم اینطوری زیاد به درد نمیخوره. چون فقط یک پیام خطای کلی میده برای هر مورد؛ اونم به انگلیسی.
اگر میشد تعیین کرد که پیام خطایی رو که برای هر موردی میده خودمون تنظیم کنیم خیلی بهتر میشد.
مثلا اگر فرمت نام کاربری معتبر نبود، به فارسی پیام خطا بده که فرمت نام کاربری باید چنین و چنان باشد!
mahdivita
جمعه 23 فروردین 1392, 13:25 عصر
باید صبر کنیم شاید کدی هم برای ما ایجاد شد :لبخند:
MRmoon
جمعه 23 فروردین 1392, 18:48 عصر
دست شما درد نکنه بابت ااطلاع رسانی
eshpilen
شنبه 24 فروردین 1392, 13:00 عصر
گفتم یه سرچ بزنم دیدم بله پیامهای خطا رو هم میشه سفارشی کرد!

مثال:


<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<script>
function invalid(e) {

e.target.setCustomValidity("");
if (!e.target.validity.valid) {
if(e.target.validity.valueMissing) e.target.setCustomValidity("مقدار رو وارد کن");
else if(e.target.validity.patternMismatch) e.target.setCustomValidity("مقدار وارد شده باید 4 تا 10 کاراکتر از حروف انگلیسی باشد");
else if(e.target.validity.rangeUnderflow) e.target.setCustomValidity("تعداد کاراکترهای وارد شده کمتر از حد مجاز است");
else if(e.target.validity.rangeOverflow) e.target.setCustomValidity("تعداد کاراکترهای وارد شده بیشتر از حد مجاز است");
}

}
</script>
</head>
<body>

<form action="" method="post">

<label for="username">Create a Username: </label>

<input type="text"

name="username"

id="username"

placeholder="4 <> 10"

pattern="[A-Za-z]{4,10}"

autofocus

required

oninvalid="invalid(event)"

oninput="this.setCustomValidity('')"

>

<button type="submit">Go </button>

</form>

</body>
</html>