دوستانه تر ساختن ، فرم های وب "محاوره ای"

() translation by (you can also view the original English article)

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

بیایید شروع کنیم!

فرم ها مانند مکالمات هستند

تصور کنید که فرم مانند یک مکالمه هست که شما با کاربرتان دارید. در یک مکالمه ، نوعی حس جلو و عقب رفتن وجود دارد. و جایی رخ می دهد که قسمتی از مکالمه قسمتی دیگر را به عنوان پاسخ ایجاب می کند. برای نمونه ، بیایید حالتی را در نظر بگیریم که بازدیدکننده به هریک از دو بخش ثبت نام یا ورود آمده باشد. در هردو وضعیت ، شما ایمیل آنها را نیاز دارید ، پس چرا مکالمه ای را حتی از آن جا شروع نکنیم؟

آدرس ایمیل خود را به من دهید ، من بررسی خواهم کرد و اگر که شما یک حساب کاربری داشته باشید خواهم فهمید. در این صورت ، من گذرواژه شما را می خواهم ، در غیر این صورت من به شما اجازه خواهم داد که یک گذرواژه جدید را به من بدهید و بعد آن گذرواژه را با من تصدیق کنید.

پس وقتی که کاربر وارد صفحه ای می شودکه همراه با فرم است ، آنها یک اعلان بسیار روشن دارند: "آدرس ایمیل شما چیست؟"

شخص مزاحم در مهمانی

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

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

بیایید به یک مثال ساده نگاه کنیم.

فرم ورود به سیستم

فرآیند ورود چیزی شبیه این است: من آدرس ایمیلم را وارد می کنم ، سپس گذرواژه ام را وارد می کنم ، و بعد دکمه ی ورود(Enter) را فشار می دهم. در این مثال ، شما یاد خواهید گرفت که چگونه هریک از این فیلد ها را فقط بعد از اینکه فیلد قبلی کامل شد نشان دهید ، تنها با استفاده کردن از HTML و CSS. ما در ادامه این را می سازیم ، و سپس یک نسخه اصلاح شده شده ایجاد می کنیم.

بیایید با اولین قطعه از نشانه گذاری شروع کنیم.

<form method="post">
<input type="email" name="email" required>
    <input type="password" placeholder="Password..." required>
    <input type="submit">
</form>

اگر آن کمی رعب آور به نظر می رسد ، نگران نباشید ، من هر قسمت را توضیح خواهم داد. بیایید با ورودی ایمیل شروع کنیم. ما می بینیم که آنسوی نام تگ مقداری صفات اضافه شده. اول از همه ، نوع ورودی ایمیل"email" تعیین شده؛ این نسبتا نوع جدیدی از ورودی هست که چند رفتار ویژه را در مرورگرهای پشتیبانی کننده از آن به ما می دهد. برای نمونه ، در آیفون ، نشان "@" روی صفحه کلید اصلی نشان داده خواهد شد.

ویژگی دیگر صفت نوع ورودی این است که فرم های HTML5 توانایی ارزیابی سطح-مرورگر دارند. این بدین معنی است که شما برای اجرای ارزیابی عناصر پایه ای فرم نیازی به نوشتن کد های جاوا اسکریپت ندارید ! توجه کنید که ما یک صفت "required" روی هردوی عناصر ایمیل و گذرواژه داریم. آن دو عنصر توسط مرورگر یکبار بررسی می شوند که پرشده باشند و مقادیر آنها معتبر باشد ، شما حتی می توانید با گزینشگر ساختگی :valid آنها را هدف قرار دهید.

قلمرو عبارات با قاعده

این عالی است ، اما ما باید آن را بهتر درست کنیم. برای مثال ، مرورگر عبارت "a@b" را به عنوان یک آدرس ایمیل قابل قبول می پذیرد. دلیل این امر این است که آدرس ایمیل باید طوری وضع شود که آماده رفتن به جایی مانند "something@localhost" باشد. گذرواژه ما می تواند هر چیزی که وارد می کنیم باشد ، پس یک گذرواژه تک حرفی مانند "a" می تواند معتبر تعیین شده باشد. بیایید کمی عبارات با قاعده برای حل و فصل این مشکلات اضافه کنیم.

توجه: اگر شما با عبارات با قاعده(regex) آشنا نیستید ، اشکالی ندارد ! ما در اینجا یک مقدار کم از آنها را برای اینکه به شما نشان دهیم خط مشی استفاده کردن از آنها برای ارزیابی وظایف متداول در فرم HTML5 چگونه است پوشش می دهیم ، اما شما می توانید به اقدامات مرورگر اتکا کنید و هنوز این آموزش را دنبال کنید. تنها این قسمت را از قلم بیاندازید و خواند بقیه مطالب را ادامه دهید !

توجهی دیگر: شما همچنین می توانید مقاله عبارات با قاعده برای نادان ها: سری ویدئویی مهیا شده توسط Jeffrey Way را بررسی کنید.

<form method="post">
<input type="email" name="email" required pattern="[^ @]*@[^ @]*\.[a-zA-Z]{2,}">
    <input type="password" placeholder="Password..." required pattern=".{5,}">
    <input type="submit">
</form>

بیایید از میان هر قسمت از این الگوها(patterns) گذر کنیم. عبارات با قاعده یک روش برای توصیف و مقایسه یک رشته هستند.

ما با الگوی ایمیل شروع خواهیم کرد.

1	pattern="[^ @]@[^ @]\.[a-zA-Z]{2,}"

[^ @]*- هر تعدادی از کارکترها مورد قبول است مگر یک نشان @ یا فضای خالی
@ - یک نشان @
\. – یک نقطه
[a-zA-Z] – هر حرف بزرگ یا کوچک انگلیسی
[a-zA-Z]{2,} – هر ترکیب دوتایی یا بیشتر از حرف ها

همه ی اینها را کنار هم بگذارید ، ما می توانیم ببینیم که این عبارت می گوید که یک ایمیل هر مجموعه ای از کارکتر ها است به غیر از نشان @ ، که به دنبال آن یک نشان @ ، و به دنبال آن هر مجموعه ای از کارکتر ها به غیر از نشان @ ، و در ادامه یک نقطه ، به همراه حداقل دو حرف در آخر آن می باشد.

ما اگر بخواهیم معتبر سازی را فقط برپایه طول مقدار انجام دهیم ، می توانیم یک عبارت با قاعده بسیار ساده تر بکار ببریم:

1	pattern=".{5,}"

معنی نقطه .در عبارت بالا "هر کارکتر" است ، و {5,} می گوید که حداقل باید 5 تا از آن کارکتر ها وجود داشته باشد.

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

ما اطراف نشانه گذار فرم را با مقداری عناصر غیر فرمی ، بیشتر آرایش می کنیم.

<link href=’http://fonts.googleapis.com/css?family=Varela+Round’ rel=’stylesheet’ type=’text/css’>
<div class="login">
  <h3>Log In</h3>
  <form action="." method="post">
<input type="email" placeholder="Your Email" pattern="[^ @]*@[^ @]*\.[^ @]{2,}" required />
    <input type="password" placeholder="Password..." required pattern=".{5,}" />
    <input type="submit" />
  </form>
</div>

چند اعجاز از CSS با صفت `:valid`

حالا که ما برای فرم ورود کاربری خودمان چند نشانه گذار(markup) داریم ، بیایید ببینیم با CSS برای پاسخ دادن به ورودی کاربر چه می توانیم بکنیم.

ما می خواهیم عنصر بعدی فرم وقتی نمایش داده شود که عنصر فعلی معتبر باشد. بیایید با پنهان کردن خود عناصر فرم شروع کنیم ، در یک روش دسترس پذیر ، چنانکه ابزار خواننده صفحه نمایش(مخصوص کاربران نابینا) همچنان بتوانند فرم کامل را ببینند ، و چنانکه تکمیل خودکار قادر باشد که مقادیر را پر کند.(Chris Coyier در اینجا درباره ی این صحبت می کند که چرا نباید از display:noneدر این نوع کاربرد ها استفاده کرد.) ما از متد visuallyhidden توصیف شده در مقاله کریس(Chris) استفاده خواهیم کرد.

.visuallyhidden {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
}

ما با کمی استایل های(styles) پایه ای شروع خواهیم کرد.

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}

input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}

input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}
input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}

این یک فرم ساده ورود به سیستم جا گرفته در مرکز به ما می دهد. اجازه دهید راه کار visuallyhidden را بگیریم و آن را برای عناصری که می خواهیم پنهان کنیم بکار ببندیم.

input[type=password],
input[type=submit]{
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 1px; width: 1px;
  margin: -1px; padding: 0; border: 0;
  opacity: 0;
  transition: opacity 0.4s, height .4s, padding-top .4s, padding-bottom .4s;
}

ما می رویم که قدری تصاویر متحرک(animation) اجرا کنیم ، پس ما یک کلاس توسعه یافته داریم برای شامل کردن یک ذره تیرگی ، حذف مکان یابی کامل و تعیین انتقال اضافه شده.

توجه:ما پیشوند های مربوط به فروشنده گان نرم افزارهای مرورگری را برای انتقال(transition) شامل نمی کنیم ، اما شما باید این کار را بکنید !

اکنون اجازه دهید آنها را نمایش دهیم ، زمانی که باید نمایش داده شده باشند ، با استفاده کردن از گزینشگر ساختگی:valid" و گزینشگر هم نیا +.

input[type=email]:valid + input[type=password]{
opacity: 1;
    position: relative;
    height: 30px;
    width: 100%;
    clip: none;
    margin: 12px auto;
    border: 1px solid #ccc;
    padding: 8px;
}
input[type=password]:valid + input[type=submit]{
  opacity: 1;
    position: relative;
    height: 40px;
    width: 50%;
    clip: none;
    margin: 12px auto;
    padding: 8px;
}

یک یادداشت درباره بهترین روش ها

این اهمیت دارد که اهداف و انتظارات کاربر از یک فرم وب را فرض کنیم. گاهی اوقات ، این راه حل مناسبی است که ورودی ها را کاملا از دید کاربر پنهان کنیم. اگرچه ، در بعضی موارد ، ممکن است این نتیجه عکس دهد و سبب این شود که با وجود آن کاربر حس کند نقشه ی روشنی از روند پرکردن فرم در دست نیست و اینکه ممکن است وقتی آنها آماده اند که عنصر رو شود ، زمان بیشتری بگیرد.

یک راه حل برای این مشکل می تواند استفاده کردن از نوعی محو شدگی بدون ناپدید شدن کامل ورودی ها باشد که برای ساختن روایت باز خوردی نزدیکی از فرم کمک کند ، که یک هدف روشن و چشم داشتی نسبتا قابل پیشگویی داشته باشد. در اینجا یک نسخه ی اصلاح شده موجود هست که از مقیاس گذاری ، فیلتر محو webkit ، شفافیت و تبدیل pointer-events:none به "present" برای کاربر ، هنگامی که آنها مهیا هستند استفاده می کند .

conversational-form-animation-modified — نگاهی به نسخه نمایشی(demo) بیاندازید.

body {
  background-color: #245245;
  font-family: ’Varela Round’, sans-serif;
}
h3 {
  color: #555;
  font-size: 2em;
  text-transform: uppercase;
  letter-spacing: .3em;
}
.login {
  width: 300px;
  margin: 50px auto;
  background: #f5f9fa;
  padding: 50px;
  border-radius: 8px;
  text-align: center;
}

input[type=password],
input[type=email]{
  width: 100%;
  border: 1px solid #ccc;
  padding: 8px;
  box-sizing: border-box;
}

input[type=password]:focus,
input[type=email]:focus {
  border: 1px solid #888;
  outline: none;
}

input[type=submit] {
  background-color: #F29E1E;
  width: 50%;
  border: none;
  padding: 8px;
  box-sizing: border-box;
  color: #fff;
  font-family: "Varela Round";
  font-size: 1em;
  text-transform: uppercase;
}
input[type=submit]:hover {
  background-color: #DB8F2A;
  cursor: pointer;
}
input {
  margin: 6px 0;
}

input[type=password],
input[type=submit]{
  -webkit-filter: blur(1px);
  transform: scale(0.9);
  opacity: .4;
  transition: all .4s;
  pointer-events: none;
}

input[type=password]:valid + input[type=submit],
input[type=email]:valid + input[type=password] {
  pointer-events: auto;
  -webkit-filter: none;
  transform: scale(1);
  opacity: 1;
}

اشاره سریع به یک اشکال: وقتی یک کاربر کلید تب(tab) را می فشارد ؛ آنها وارد عنصر بعدی فرم خواهند شد. ما از کلیک کردن درون عنصر بعدی فرم با pointer-events:none جلوگیری می کنیم ، اما یک صفت "focusable" در CSS وجود ندارد. درعوض ، ما را نیازمند تاثیر گرفتن از جاوا اسکریپت(jQuery flavored) برای کنترل این رفتار می کند.

var inputs = $("input");
$(document).on("keypress", "input", function(){
inputs.each(function(i,el){
        var $el = $(el);
        if ($el.is(":valid")){
            $el.next("input")[0].disabled=false;
        } else {
            $el.next("input")[0].disabled=true;
        }
    });
});

این کد جاوا اسکریپت ورودی های فرم مارا می بیند و ورودی فعال/غیرفعال را بنا بر وضعیت صفت ":valid" هم نیاهای قبلی مشخص می کند. این سبب مانع شدن ما از فوکوس عنصر می شود.pointer-events: none همچنان تابعی برای اداره کردن ورودی ارسال(submit) از پذیرفتن وضعیت hover است.

دیگر موارد استفاده

یک فرم با چند مسیر شبیه فرم "ورود کاربری و ثبت نام" مثال ما را تصور کنید. یک کاربر شاید چندین خصیصه را انتخاب کند که ممکن است یک انتخاب جدید از عناصر فرم را ایجاب کند ، مانند انتخاب کردن یک ناحیه برای حمل و نقل یا یک بازه زمانی برای رزرو یک میز شام. در این وضعیت ، ارزیابی ساده ممکن است کافی نباشد ، و در عوض ما تمایل به استفاده از یک راه حل جاوا اسکریپت-محور داریم.

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

<form action="">
<input type="email">
    <input name="login_password" type="password">
    <input name="signup_password" type="password">
    <input name="signup_password_confirm" type="password">
</form>

var timeout;
$(document).on("keyup", "input[type=email]" function(){
clearTimeout(timeout);
    var input = $(this);
    timeout = setTimeout(function(){
        if (input.is(":valid")){
            var email = input.val();
            $.getJSON("/check_for_user", {email : email}, function(data){
                if (data.user_exists){
                    input.parents("form").attr("action","/login")
                    input.addClass("user_exists");
                    $("input[type=password]").filter("[name*=’login’]").each(function(i,el){
                        el.required = true;
                    })
                } else {
                    input.parents("form").attr("action","/sign_up")
                    input.addClass("user_not_exists");
                    $("input[type=password]").filter("[name*=’signup’]").each(function(i,el){
                        el.required = true;
                    })
                }
            });
        }
    })
});

در کد جاوا اسکریپت بالا ، ما آدرس ایمیل را به مسیر "/check_for_user" در سرور فرستادیم. سرور تمایل به برگرداندن یک پاسخ ساده JSON ، شبیه به کد زیر دارد.

1	callback({
2	user_exists : true
3	});

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

اگر شما برای یک حساب کاربری جدید ثبت نام می کنید ، ما ممکن است نیازمند نمایش دادن فیلد گذرواژه ، برای ثبت نام باشیم(به غیر از فیلد گذرواژه ورود کاربری). برای این کار ، ما تمایل به استفاده کردن گزینشگر ~که گزینشگر متداول برای هم نیا ها می باشد داریم ، و به ما اجازه می دهد که روی عناصر هم نیای بی ربط "پرش(jump)" کنیم.

input[name="signup_password"] {
/* visually hidden styles here */
}
input[type=email].user_not_exists:valid ~ input[name="signup_password"] {
    /* "visible" styles go here */
}
input[type=email].user_exists:valid ~ input[name="login_password"] {
    /* "visible" styles go here */
}

جایگزین ها

وقتی که ما در حال سوق دادن توسعه جلو-پایانه(front-end) به تکنیک های جدید هستیم ، آنها در تمام اوقات ، در تمام مرورگرها به کار نمی روند. خوشبختانه ، در این وضعیت خیلی آسان است که با یک جایگزین مناسب کنار بیاییم. ما بوسیله بیشتر مرورگر های مهم پوشش داده شده ایم ، اما این انتخاب ها متاسفانه شامل IOS7 و اندروید نمی شوند. برای مرورگر های غیر-پشتیبانی کننده ، ما جایگزین های ساده ای به رفتار پیش فرض فرم خواهیم داشت.

برای این کار ، ما می توانیم از وبسایت Modernizrبرای فهمیدن اینکه چه مرورگری از ارزیابی عناصر فرم پشتیبانی می کند استفاده کنیم. استفاده کردن از این وبسایت برای این نوع از بازیابی خصیصه ، بهترین تمرین است ، اما ما همچنین می توانیم یک تابع مختصر و مفید برای الان بنویسیم. بخش "Non-Core Detects" این وبسایت شامل یک انتخاب برای "ارزیابی-فرم ها" دارد ، بنابراین شما به ساختن یک دانلود سفارشی نیاز خواهید داشت. وقتی که این را نصب دارید ، در مرورگر های پشتیبانکلاسform validationروی عنصر htmlداده خواهد شد. شما می توانید این کلاس formvalidationرا برای ارتقا دادن فرم برای پشتیبانی مرورگرها هدف قرار دهید.

1	.formvalidation input[type=password], .formvalidation input[type=submit] {
2	/* Hide or obscure your inputs and disable pointer-events here */
3	}

هنگامی که عناصر ساختگی :valid و :invalid فقط در مرورگر های پشتیبان کار خواهند کرد ، CSS که ورودی ها را پنهان می کند ، تنها CSS ای هست که ما برای استفاده کردن به صورت افزایش تصاعدی نیاز داریم. ورودی ها با توابع پیش فرضشان در مرورگرهای غیر پشتیبانی کننده عمل خواهند کرد.

خودشه!

شما اکنون چند روش جالب برای گرفتن یک سطح جدید از مدل سازی مکالمات تعاملی با کاربرانتان در اختیار دارید. شما چه کارهای قدرتمند دیگری را با استفاده کردن از کلاس های ساختگی :valid و :invalid تصور کرده اید؟ در مورد آن در بخش نظرات(پائین صفحه) گفتگو کنید!