نوع های Input جدید

در HTML 5 تعداد زیادی نوع (type) برای  input  معرفی شده است که هر کدام بسته به نیاز طراح می تواند مورد استفاده قرار بگیرد

در ادامه به معرفی اینها می پردازیم :

pattern در html 5

در پست قبلی به نحوه ی استفاده از صفت Required اشاره شد ، حالا فرض کنید ما بخواهید یه نام کاربری از کاربر بگیریم که این نام حداقل 4 و حداکثر 9 حرف تشکیل شده باشه .
در نسخه های قبلی  HTML  باید از جاوا اسکریپت یا کتابخانه های آن استفاده می کردیم ولی در نسخه ی جدید HTML یعنی HTML 5  شما کافیست بعد از صفت  Required ، از صفت  Pattern  استفاده کنید و مقدار آن را الگویی که می خواهید اعمال شود، وارد کنید
این الگو نویسی بر مبنای Regex انجام می شود در آینده ی نزدیک نحوه ی استفاده از این زبان الگوی نویسی قدرتمند به صورت مفصل بیان می شود
برای مثال داریم :

 // HTML 
<form action="#" method="get">
    <label for="input">Required:</label>
    <input type="text" required pattern="\w{4,9}" />
    <button type="submit">Send</button>
</form>

در ضمن شما می توانید بدین صورت از صفت Required هم استفاده کنید :

<input type="text" required="true" pattern="\w{4,9}" />

برای دیدن این مثال به صورت زنده به لینک زیر مراجعه کنید :

jsfiddle

required در html 5

یکی از سختی هایی که در نسخه ی قبلی  HTML وجود داشت این بود که وقتی می خواستیم یه اطلاعاتی رو از کاربر بگیریم و اون کاربر نباید اون فیلد رو خالی باقی می گذاشت ، ما باید با استفاده از جاوا اسکریپت این مشکل رو بر طرف می کردیم و به کاربر پیغام می دادیم که این فیلد نباید خالی گذاشته شود ولی اگر کاربر با استفاده از تنظیمات مرورگر خود جاوا اسکریپت رو غیر فعال می کرد دیگر هیچ کنترلی روی آن فیلد نداشتیم (در سمت کلاینت ) .
ولی در HTML 5 امکانی اضافه شده است که می توان آن فیلدی که نباید خالی گذاشته شود را مشخص کرد و بسته به این که از چه مرورگری استفاده می کنید یه پیغام خطایی به شما داده می شود

برای مثال داریم :

// HTML
<form action="#" method="get">

    <label for="input"> Required:  </label>
    <input type="text" required/>
        <button type="submit"> Send </button>
</form>

برای دیدن این مثال به صورت زنده به لینک زیر مراجعه کنید :

jsfiddle

به زودی مطالب بیشتری درباره ی استفاده از صفت required  و نحوه ی ایجاد پترن یا الگو منتشر می شود

دسترسی به صفت داده ها با جاوا اسکریپت

در HTML 5 امکان ایجاد صفت ها (یا همان attributes) به صورت شخصی سازی شده وجود دارد
برای مثال :

// html

<a href="#" data-length="3m30s" data-category="pop">
wake me up Before You Go-Go
</a>

// JAVASCRIPT

<script type="text/javascript">
//pop
document.querySelector('a').getAttribute('data-category');
</script>

ولی راه بهتری برای انجام دادن این کار وجود دارد :