۱۰ ابزار مفید در CSS و JavaScript برای بهبود فرم ها

فرم ها تقریبا بخش مهمی از هر وب سایتی هستند با این حال ما همیشه به جزئیات به صورت دقیقی توجه نمی‌کنیم. کارهایی وجود دارد که می‌توان برای بهبود فرم ها انجام داد. برای مثال افزودن اعتبار سنجی، ماسک ها برای ورودی ها و دیگر راهنمایی های بصری و اینها فقط ظاهر کار هستند. هدف اصلی این است که فرم ها را جذاب کرده و استفاده از آنها را ساده تر کنیم. در زیر به ۱۰ ابزار رایگان که می توانید از آنها برای عالی کردن فرم های تان استفاده کنید اشاره خواهم کرد.

formbase

formbase یک بسته است که از CSS/SASS به منظور بهبود استایل پیش فرض فرم ها استفاده می کند. این استایل ها cross-browser بوده و برای تجربه کاربری بهتر استفاده می شود.

Foxholder

Foxholder مجموعه ای از 15 انیمیشن placeholder برای تقویت فرم‌های شماست. وقتی کاربری با این input های شما ارتباط برقرار می کند، یک انیمیشن اجرا می شود. این یک روش عالی برای این است که کاربران شما بدانند دقیقا در کجای فرم ها قرار گرفتند.

dirrty

dirrty یک پلاگین jQuery است که می‌توان زمانی که یک فیلد از یک فرم تغییر می‌کند را تشخیص دهد. وقتی تغییری شناسایی شود از کاربر خواسته خواهد شد که تغییرات را ذخیره سازی کند.

Inputmask

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

jQuery Validation Plugin

jQuery Validation Plugin ابزاریست که به سرعت می توان به کمک آن داده های فرم را اعتبارسنجی کرد. این ابزار حتی برای Url ها و ایمیل ها هم استفاده می شود. این ابزار دارای API هایی هست که به کاربران اجازه می دهد اعتبارسنجی مورد نظر خود را بنویسند.

dependsOn

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

Choices.js

با استفاده از Choices.js می توانید select box های جذاب و ویژگی های زیبا را به فیلد های متنی در فرم خود اضافه کنید. این کتابخانه سبک وزن بوده و با استفاده از آن میتوانید قالب شخصی خود را برای input مورد نظر اعمال کنید.

Cascading Drop-Down Menu

Cascading Drop-Down Menu یک راه حل عالی برای زمانی است که نیاز به فرمی دارید که در آن کاربر باید گام‌های متعددی را انتخاب کند. برای مثال در مورد انتخاب یک اتومبیل فکر کنید. شما می توانید مدل آن و سپس سال ساخت و غیره را یکی پس از دیگری انتخاب کنید.

Multipicker

Multipicker روشی بصری را برای کاربران به منظور انتخاب چند گزینه (شبیه به checkbox) و یا انتخاب یک گزینه (شبیه به radio button) در یک لیست فراهم می آورد که با استفاده از عناصر html همچون لیست های غیر ترتیبی می تواند استفاده شود.

jQuery Form Plugin

بروز رسانی فرم های استاندارد html برای استفاده از ایجکس می‌تواند با استفاده از پلاگین jQuery Form Plugin انجام بپذیرد. این پلاگین دارای ویژگی های زیادی است که کنترل کاملی در مورد نحوه ارسال اطلاعات به سمت سرور به شما ارائه خواهد داد.

منبع: لرن سورس