معرفی input type  های جدید در HTML5 :

در HTML5 سیزده فیلد ورودی جدید تعریف شده است، فیلدهای جدیدی که بسیار مفید هستند . در ادامه به بررسی این فیلدهای جدید می پردازیم:

Email : این فیلد برای آدرس های ایمیل در نظر گرفته شده است.

Tel  : برای شماره تلفن ها در نظر گرفته شده است .

url  : برای آدرس های وب در نظر گرفته شده است.

Color : برای مقادیرهگزادسیمال رنگ در نظر گرفته شده است .

Number : فیلدی است برای وارد کردن عدد به همراه فلشی برای کاهش و افزایش ایجاد می کند. همچنین می توانید محدوده اعداد را با خاصیت MIN و MAX  کنترل کنید.

Range : فیلدی است برای وارد کردن عدد دقیقا مانند فیلد Number ، ولی از طریق اسلایدر. در این فیلد نیز می توانید از خاصیت MIN  و Max استفاده کنید. با استفاده از خاصیت Step نیز می توانید تعداد واحد افزایش در اسلایدر را کنترل کنید . به این نکته توجه کنید که کجا از این فیلد استفاده می کنید . اسلایدر ها در کاربرد های خاصی مانند رنج قیمت مناسب هستند . هرچند در اکثر موارد کاربران ترجیح می دهند از فیلد های معمولی استفاده کنند ولی این فیلد جدید نیز کاربردهای خاص خود را دارد.

Search : برای جستجوی کلمات کلیدی مورد استفاده قرار می گیرد. کاربرد ان در قسمت سرچ وب سایت ها می باشد .

Date ، month ،week  ، time ، datetime و datetime-local : برای ورودی های وابسته به تاریخ می باشند .

نکته : اگر می خواهید از این امکانات جدید HTML5 استفاده کنید ، حتما نوع سند خود را در قسمت Doctype  به صورت HTML5  تعریف کنید.

خاصیت AutoFocus و Placeholder در فیلد های ورودی  :

با استفاده از خاصیت Autofocus  میتوان به صورت خودکار برروی فیلدهای فرم در زمان لودینگ فرم فوکوس کرد . دیگر نیازی به استفاده از کدهای جاوااسکریپت برای این کار نیست  و تنها با استفاده از تکه کد زیر در کدهای HTML قادر به انجام این کار خواهید بود.

پشتیبانی مرورگرها برای این خاصیت  ضعیف است ولی با استفاد از کد جی کوئری زیر می توانید این مشکل را برطرف کنید :

inputEl = document.createElement('input');if !!('autofocus' in inputEl) {  $('input[autofocus="true"').eq(0).focus();};

کد بالا ابتدا فیلد ورودی را ایجاد می کند و سپس خاصیت Autofocus آنرا چک می کند اگر این خاصیت توسط فیلد قابل پشتیبانی نبود به دنبال اولین فیلدی میگردد که خاصیت Autofocus=on  داشته باشد و فوکوس را به آن فیلد انتقال می دهد.

خاصیت  placeholder : با استفاده از این خاصیت به راحتی می توان متن پیش فرض را برای فیلدها بدون نیاز به کدهای جاوا اسکریپت مشخص کرد.  در زیرطرزکاربرد این خاصیت در فیلد کدپستی مشخص شده است :

<input type="text" name="postcode" id="postcode" placeholder="A1A 1A1" />

پشتیبانی مرورگرها برای این خاصیت نیز ضعیف است ولی با استفاده از پلاگین های جی کوئری به راحتی می توانید  این مشکل را برطرف کنید.

خاصیت Required  : با استفاده از این خاصیت می توان عملیات  بررسی صحت محتوای  فیلد ها را در سمت کاربر انجام داد. حتی میتوان از عبارات منظم برای بررسی فیلدهای خاص مانند کدپستی و کد ملی و... استفاده کرد.

<input type="email" name="sample-email" id="sample-email" required="true" />

امیدواریم از این مقاله بهره کافی را برده باشید .سایر مقالات شرکت طراحی سایت رادکام سیستم را می توانید از منوی مقالات در بالای صفحه دنبال کنید.