معتبرسازی فرم UX در HTML و CSS

بخش: توسعه وب 39 بار مشاهده شده جمعه ۶ اسفند ۹۵ 0 نظر ارسال شده
معتبرسازی فرم UX در HTML و CSS

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

شما می توانید مقدار قابل توجهی از اعتبار سنجی فرم را فقط با Attribute های( ویژگی های) HTML انجام دهید. می توانید با استفاده از Selector های (انتخاب کننده های)  CSS یک تجربه کاربری بسیار خوبی را ایجاد کنید. برای انجام صحیح این کار به یک سری از ترفندهای CSS نیاز خواهید داشت.

شما می توانید از برچسب گذاری مثل یک Placeholder استفاده کنید.

با استفاده از صفت placeholder می توان یک مقدار پیش فرض را در input قرار داد تا کاربر بتواند داده مورد نیاز را تشخیص دهد.

اولا: همیشه از المان های <label for="correct_input"> استفاده کنید. Placeholder ها در واقع به کاربر ورودی های معتبر را پیشنهاد می کنند، مانند قرار دادن "Tulsa" در ورودی دارای برچسب "City". ( توضیح بیشتر: یعنی اینکه در فیلد City باید اسم یک شهر مثلا Tulsa را قرار داد)

من می خواهم بگویم که اگر یک فرم کوتاه و دارای یک الکوی مشخص (مثل ثبت نام یا ورود) بود شما می توانستید از روش بصری  placeholder استفاده کنید ولی به جاش از برچسب های واقعی استفاده کنید.

فرم زیر را در نظر بگبرید.

<form action="#0" method="post">

  <div>
    <input type="text" id="first_name" name="first_name">
    <label for="first_name">First Name</label>
  </div>

  <!-- ... --->

</form>

از تگ <div> برای ایجاد مرجع موقعیت دهی (positioning context) و قراردادن برچسب به طور مستقیم در فرم استفاده می شود.

form {
  max-width: 450px;
  
  // positioning context
  > div {
    position: relative;

    // Looks like placeholder
    > label {
      opacity: 0.3;
      position: absolute;
      top: 22px;
      left: 20px;
    }
  }
}

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

ترفند به این صورت است که ابتدا ورودی را قرار دهید و بعد می توانید برچسب Focus  را Hide (مخفی)کنید.

form {
  
  /* ... */

  > div {
    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {

      &:focus {
        & + label {
          opacity: 0;
        }
      }

    }
  }
}

شکل 4

پر کردن فیلدهای خاص را ضروری کنید.

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

<input required type="text" id="first_name" name="first_name">

شکل 6

نشان دهیم ورودی وارد شده درست است.

به کاربر نشان دهید که ورودی را به درستی وارد کرده است. مرورگرها می توانند این کار را با انتخاب کننده Valid انجام دهند.

form {

    > input[type="text"],
    > input[type="email"],
    > input[type="password"] {
      
      // show success!
      &:valid {
        background: url(images/check.svg);
        background-size: 20px;
        background-repeat: no-repeat;
        background-position: 20px 20px;

        // continue to hide the label
        & + label {
          opacity: 0;
        }
      }
    }
  }
}

شکل 8

Valid: در این حالت یعنی اینکه فیلدهای ضروری پر شده است و انتخاب کننده هم برای اعتبارسنجی نوع ورودی استفاده شده است.

نشان دهید که چه نوع ورودی مد نظر است.

شما می توانید نشان دهید که چه نوع ورودی مدنظر شماست: آیا ایمیل مدنظر است یا عدد. در زیر نمونه هایی را مشاهده خواهید کرد.

<input type="email" id="email" name="email" required>

در این شکل ورودی مورد نظر آدرس ایمیل است و باید یک آدرس ایمیل معتبر باشد.

بیاید این کار را برای UX انجام دهیم

  • وقتی کاربر به فیلدی می رسد در مورد الزامات به او بگویید
  • به او یادآوری کنید که فیلد مورد نظر مقدار معتبری ندارد

در غیر این صورت

زمانی که ورودی خالی هست نیاز به  reminder(یادآوری کننده) نیست. همانطور که دیدید عبارت نامعتبر را نمی پذیرد. انجام این کار زیاد جالب نیست ( در واقع کار اضافیست). برای انجام این کار باید بدانید که آیا  فیلدی خالی است یا نه.

زیر ترفند! بررسی کنید آیا یک ورودی مقدار دارد یا نه

می خواهیم با Valid و Invalid  کار کنیم. ما نمی خواهیم invalid را قبل از استفاده از Valid بکار بریم. آیا یک انتخاب کننده ای برای تست کردن ورودی خالی وجود دارد؟ درواقع این طور نیست. شما فکر می کنید Empty نشان دهنده این موضوع است. اما اینطور نیست. ان برای انطباق چیزهایی مثل<p></p> می باشد.... عناصر محتوایی هستند که چیزی درون آنها نیست. ورودی ها عناصر غیر محتوایی هستند.

ترفند این است که مطمئن شوید که ورودی دارای مقدار Placeholder است، پس از آن:

input:not(:placeholder-shown) {

}

در demo (نمونه نمایشی) از Placeholder استفاده نمی کنیم و اما Space تنها به کار می آید.

<input placeholder=" ">

: placeholder-shownدر اینجا بسیار کارآمد است. این در واقع یک انتخاب کننده مخفی برای بررسی اینکه آیا یک ورودی که در حال حاضر مقدار دارد یا نه می باشد.

IE یا Firefox این مورد را ساپورت نمی کند. Navigate کردن سخت است. از@supports  می توانید استفاده کنید.

/* This doesn't work */
@supports (input:placeholder-shown) {
  input:not(:placeholder-shown) {
  }
}

اما از @supports نمی توان به عنوان Selector استفاده کرد مگر اینکه به صورت زیر استفاده شود.

@supports (display: flex)

 

 

Property         Value                                                                                                                     

تست حفاظت placeholder در JavaScript خیلی آسان است.

شکل 13

اما به نظر نمی آید که راه ساده ای برای تست placeholder-shown وجود داشته باشد. پس این فقط نیاز به صبر برای پشتیبانی یک Browser قوی تر دارد که بتوان در کارهای تولیدی بزرگ ازش استفاده کرد.

 

 

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

شکل 14

شکل 15

شما می توانید معتبرسازی قوی ایجاد کنید.

شما نه تنها می توانید چیزهای ضروری مانند ایمیل را مشخص کنید بلکه می توانید در سمت سرویس گیرنده مینی موم طول پسورد   و حداکثر کاراکترها را مشخص کنید.

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

حداقل 6 کاراکتر

حداقل 1 حرف بزرگ

حداقل 1 کاراکتر حروف کوچک

حداقل 1 عدد

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

شکل 16

شکل 17

Demo (نمونه نمایشی)

Placeholder-shown   در اینجا باعث می شود که به خوبی در IE و یا Firefox کار نکند. این فقط یک نمونه نمایشی است. به راحتی می توانید چیزهایی را از اینجا انتخاب کنید که کارتون را راه بندازد.

شکل 18

گروه تحقیقات سافت اسکیل
گروه تحقیقات سافت اسکیل

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

شما چه نظر و یا سوالی درباره این نوشته دارید؟

پرســیدن سؤال جدید

سؤال های تخصصی خود را از ما بپرسید

دنبال کردن تلگرام کانال سافت اسکیل

https://telegram.me/softskill_ir

عملیات کاربران

خبـرنــامه

Newsletters

در خبــرنـامه سافت اسکیل عضو شویــد تا جدیدترین هـای سایت را بلافاصله در ایمیل خـود دریافت کنیـد

کلیک کنید و سوالات خود را از ما بپرسید
لطفا فرم سوال را پر کنید

سوال شما با موفقیت ثبت شد. برای اینکه بتوانیم به شما اطلاع رسانی کنیم، موارد زیر را وارد کنید:

لطفا چند لحظه منتظر بمانید ...