اعتبارسنجی و شکل دهی فرم ها با استفاده از html5

در html5 امکانات خوبی برای کار با فرم اضافه شده است. مثلا در بخش type می‌توان موارد جدید زیر را اضافه کرد:

search, email, url, tel, number, range, color
date, month, week, time, datetime, datetime-local

که توضیحات آن در مطلب HTML5 forms input types به تفصیل آمده است.

شاید بگویید چه دلیلی دارد که ورودی ایمیل را type=email معرفی کنم؟! اگر همان type=text معرفی می‌کنم تا همه براوزرها آن را متوجه شوند، بهتر نیست؟!
پاسخ این است که اگر براوزری قدیمی باشد و type ی شما تعریف کردید را نشناسد، خودش اتوماتیک آن را text فرض می‌کند اما حسن استفاده از type های جدید این است که در صفحات لمسی، کیبورد مجازی ظاهر شده روی صفحه، حسب نوعی که شما تعریف کرده‌اید، ظاهر می‌شود تا تجربه کاربری مطلوب‌تری را برای کاربر فراهم نماید. ببینید.

همچنین چند ویژگی جدید نیز برای اعتبارسنجی به تگ form اضافه شده که جالب توجه است. مثلا کد زیر را درنظر بگیرید:

<input name="age" placeholder="سن" pattern="[1-9]d" required autocomplete="off"
    oninvalid="setCustomValidity('سن خود را به صورت صحیح وارد کنید')"
    oninput="setCustomValidity('')" />

با کمک placeholder متن موردنظر شما به صورت کم‌رنگ در زمینه ورودی قرار می‌گیرد و پس از تایپ چیزی توسط کاربر محو می‌شود. این ویژگی منجر به ساده و کم‌حجم شدن فرم می‌شود.
با کمک ویژگی autocomplete می‌توان از فراخوانی مقادیری که قبلا در فرم وارد شده، جلوگیری کرد. این نکته خصوصا برای فیلدهای حساس مهم است تا اولا در حافظه براوزر باقی نماند و در صورتی که کاربر دیگری به همان فرم مراجعه کرد، اطلاعات کاربر قبلی را نتواند ببیند و ثانیا، در صورتی که کاربر یکبار اطلاعاتی را غلط وارد کرد، دوباره همان اطلاعات غلط را وارد نکند.
با کمک ویژگی pattern می‌توان ساختار منطقی (regular expression) ساختار داده مورد توقع را اعلام کرد تا در صورتی که کاربر اطلاعاتی وارد کرد و دارای آن ساختار نبود، پیامی به کاربر نمایش داده شود تا آن را تصحیح کند. در سایت html5 pattern چند نمونه ساختار پرکاربرد آورده شده است. البته پیغام عدم تطابق ساختار اطلاعات وارد شده با ساختار موردانتظار، بر اساس زبان سیستم عامل کاربر است که می‌تواند با ویژگی oninvalid و فراخوانی تابع setCustomValidity (مطابق کد بالا) الزاما به همان متنی که شما بخواهید، تغییر کند.
ویژگی required نیز کاربر را مجبور به پر کردن آن فیلد می‌کند حتی اگر js غیرفعال باشد!

در صورتی که بخواهید یک تابع کاملا سفارسی برای اعتبارسنجی یک ورودی تعریف کنید، می‌توانید از ویژگی oninput برای ست کردن تابع اعتبارسنجی آن استفاده کنید:

<script>
   function validateComments(input){
      if(input.value<18)
         input.setCustomValidity("فقط سنین بالای 18 سال میتوانند این فرم را پر کنند");
      else if(input.value>35)
         input.setCustomValidity("سن شما بیش از حد مجاز برای استخدام است");
      else
         input.setCustomValidity("");
   }
</script>
<input name="age" oninput="validateAge(this)" />

در html4 رویدادهای onblur, onchange, onfocus را داشتیم اما در html5 رویدادهای دیگری (مثل oninput) اضافه شده که به محض ورود اطلاعات توسط کاربر عمل میکند. (برای مطالعه در مورد رویدادهایی که در html5 اضافه شده، این مطلب را ببینید.)

تغییر استایل مطلوب فرم‌ها با کمک css3

بسیاری از ما دوست داریم که ورودی (input, textarea, select و ...) همگی دارای width:100% باشند و تمام عرض قابل دسترس را بپوشانند:

input {
    width: 100%;
    padding: 5px;
    border: 1px solid silver;
}

اما این قضیه به دلیل وجود border و padding معمولا به درستی انجام نمی‌شود. اما با افزودن box-sizing به استایل فوق می‌توان این مشکل را برطرف کرد:

input {
    width: 100%;
    padding: 5px;
    border: 1px solid silver;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

html5 در صورت نامعتبر بودن یک ورودی، تمرکز بر روی یک ورودی و ... یک سری کلاس کاذب (pseudo class) به ورودی اضافه می‌کند که از طریق css3 می‌توان برای آن استایل تعریف کرد:

input{
    border: 1px solid #ccc;
}
input:invalid{
    background: #fff3f3;
    border-color: #f66;
}
input:focus{
    border-color: #99f;
    outline: none;
    -moz-box-shadow: 0 0 0.25em #99f; 
    -webkit-box-shadow: 0 0 0.25em #99f; 
    box-shadow: 0 0 0.25em #99f; 
}

input:focus:invalid{
    -moz-box-shadow: 0 0 0.25em #f55; 
    -webkit-box-shadow: 0 0 0.25em #f55; 
    box-shadow: 0 0 0.25em #f55;
}
input:required{
    background-color: LightYellow;
}
input:required:invalid{
    background-color: LightPink;
}

یک‌دست و هماهنگ کردن فرم و عناصر آن در تمام براوزرها

یکی از مشکلاتی که طراحان دارند این است که حس می‌کنند عناصر فرم آنها با هم همخوانی ندارد یا با تم کلی صفحه‌ای که ایجاد کرده‌اند، چندان تناسب ندارد. مشکل دیگری که وجود دارد است است که عناصر فرم، با توجه به نوع مرورگر و سیستم‌عامل و ... کمی تفاوت می‌کند و این امر برای یک طراحی شکیل و یکدست، مطلوب نیست.

برای حل این مشکل راه‌حل‌هایی وجود دارد که یکی از ساده‌ترین آنها استفاده از پلاگین Uniform است.
توضیحات و نمونه اجرایی این پلاگین را در لینک فوق می‌توانید مشاهده نمایید.

مسیر اتوماتیک ورودی

در html5 می‌توان از خصیصه جدید dir=auto استفاده کنید تا خود براوزر (حسب اولین کاراکتر ورودی) تصمیم بگیرد که direction آن ورودی، راست به چپ باید باشد یا چپ به راست:

<input type=text dir=auto>

یادداشت‌های مرتبط

علیرضا معظمی

مشاوره و اجرای پروژه‌های خاص طراحی و برنامه‌نویسی وب

آموزش‌ها

اعتبارسنجی و شکل دهی فرم ها با استفاده از html5

تغییر استایل مطلوب فرم‌ها با کمک css3

یک‌دست و هماهنگ کردن فرم و عناصر آن در تمام براوزرها

مسیر اتوماتیک ورودی

مدیریت

یادداشت‌های کوتاه فنی تخصصی

آموزش‌هایی برای ارتقاء فنی سایت و سرور

تبلیغات

ربات‌های تلگرامی:

دامنه‌های فروشی: