فرم ثبت‌نام بهترین شیوه‌های Codelab

سام داتون

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

مرحله 1: از HTML معنی دار استفاده کنید

در این مرحله یاد خواهید گرفت که چگونه از عناصر فرم برای استفاده حداکثری از ویژگی های داخلی مرورگر استفاده کنید.

  • روی Remix to Edit کلیک کنید تا پروژه قابل ویرایش باشد.

به HTML فرم خود در index.html نگاهی بیندازید. خواهید دید که ورودی هایی برای نام، ایمیل و رمز عبور وجود دارد. هر کدام در یک بخش هستند و هر کدام یک برچسب دارند. دکمه Sign up یک <button> است! بعداً در این کد لبه، قدرت های ویژه همه این عناصر را خواهید آموخت.

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>
    <label>Full name</label>
    <input>
  </section>
  
  <section>
    <label>Email</label>
    <input>
  </section>
  
  <section>
    <label>Password</label>
    <input>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

برای پیش‌نمایش فرم ثبت‌نام روی View App کلیک کنید. این به شما نشان می دهد که فرم بدون CSS غیر از سبک های پیش فرض مرورگر چگونه به نظر می رسد.

  • آیا سبک های پیش فرض خوب به نظر می رسند ؟ چه چیزی را تغییر می دهید تا فرم بهتر به نظر برسد؟
  • آیا سبک های پیش فرض درست کار می کنند ؟ با استفاده از فرم شما در حالت فعلی چه مشکلاتی ممکن است پیش بیاید؟ در موبایل چطور؟ برای صفحه‌خوان‌ها یا سایر فناوری‌های کمکی چطور؟
  • کاربران شما چه کسانی هستند و چه دستگاه ها و مرورگرهایی را هدف قرار می دهید؟

فرم خود را تست کنید

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

برای پیش‌نمایش فرم ثبت‌نام روی View App کلیک کنید.

  • فرم خود را در دستگاه های مختلف با استفاده از Chrome DevTools Device Mode امتحان کنید.
  • اکنون فرم را در تلفن یا سایر دستگاه های واقعی باز کنید. چه تفاوت هایی می بینید؟

مرحله 2: CSS را اضافه کنید تا فرم بهتر کار کند

برای بازگشت به کد منبع خود روی View Source کلیک کنید.

هیچ مشکلی با HTML تا کنون وجود ندارد، اما باید مطمئن شوید که فرم شما برای طیف وسیعی از کاربران در موبایل و دسکتاپ به خوبی کار می کند.

در این مرحله CSS را اضافه می‌کنید تا استفاده از فرم آسان‌تر شود.

تمام CSS های زیر را در فایل css/main.css کپی و پیست کنید:

روی View App کلیک کنید تا فرم ثبت نام استایل خود را ببینید. سپس روی View Source کلیک کنید تا به css/main.css برگردید.

  • آیا این CSS برای انواع مرورگرها و اندازه های صفحه نمایش کار می کند؟

  • سعی کنید padding ، margin و font-size متناسب با دستگاه های آزمایشی خود تنظیم کنید.

  • CSS اول برای موبایل است. پرس‌و‌جوهای رسانه‌ای برای اعمال قوانین CSS برای ویوپورت‌هایی که حداقل 400px عرض دارند و سپس دوباره برای ویوپورت‌هایی با عرض حداقل 500px استفاده می‌شوند. آیا این نقاط شکست کافی است؟ چگونه باید نقاط شکست را برای فرم ها انتخاب کنید؟

مرحله 3: برای کمک به کاربران برای وارد کردن داده ها، ویژگی هایی را اضافه کنید

در این مرحله شما ویژگی هایی را به عناصر ورودی خود اضافه می کنید تا مرورگر بتواند مقادیر فیلد فرم را ذخیره و تکمیل کند و در مورد فیلدهایی که داده های گم شده یا نامعتبر دارند هشدار می دهد.

فایل index.html خود را به روز کنید تا کد فرم به شکل زیر باشد:

<form action="#" method="post">
        
  <h1>Sign up</h1>
  
  <section>        
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name" 
           pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
           type="email" required>
  </section>
  
  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password" 
           type="password" minlength="8" required>
  </section>
  
  <button id="sign-up">Sign up</button>
  
</form>

مقادیر type کار بسیار زیادی انجام می دهند: * type="password" متن را هنگام وارد کردن پنهان می کند و مدیر رمز عبور مرورگر را قادر می سازد یک رمز عبور قوی پیشنهاد دهد. * type="email" اعتبار سنجی اولیه را ارائه می دهد و تضمین می کند که کاربران تلفن همراه صفحه کلید مناسبی دریافت می کنند. آن را امتحان کنید!

روی View App کلیک کنید و سپس روی برچسب ایمیل کلیک کنید. چه اتفاقی می افتد؟ فوکوس به ورودی ایمیل منتقل می‌شود زیرا برچسب دارای مقدار for است که با id ورودی ایمیل مطابقت دارد. برچسب ها و ورودی های دیگر به همین ترتیب کار می کنند. صفحه‌خوان‌ها همچنین متن برچسب را زمانی که برچسب (یا ورودی مرتبط برچسب) تمرکز می‌کند، اعلام می‌کنند. می‌توانید با استفاده از افزونه ChromeVox آن را امتحان کنید.

سعی کنید فرم را با یک فیلد خالی ارسال کنید. مرورگر فرم را ارسال نمی‌کند، و از آن می‌خواهد داده‌های از دست رفته را تکمیل کند و تمرکز را تنظیم کند. دلیلش این است که شما ویژگی require را به همه ورودی ها اضافه کرده اید. اکنون سعی کنید با رمز عبوری که کمتر از هشت کاراکتر دارد ارسال کنید. مرورگر هشدار می دهد که رمز عبور به اندازه کافی طولانی نیست و به دلیل ویژگی minlength="8" روی ورودی رمز عبور تمرکز می کند. همین امر برای pattern (استفاده شده برای ورودی نام) و سایر محدودیت‌های اعتبارسنجی کار می‌کند. مرورگر همه این کارها را به صورت خودکار و بدون نیاز به کد اضافی انجام می دهد.

استفاده از name مقدار autocomplete برای ورودی Full name منطقی است، اما در مورد سایر ورودی ها چطور؟ * autocomplete="username" برای ورودی ایمیل به این معنی است که مدیر رمز عبور مرورگر آدرس ایمیل را به عنوان "نام" این کاربر (نام کاربری!) ذخیره می کند تا با رمز عبور همراه شود. * autocomplete="new-password" for Password به مدیر رمز عبور اشاره می کند که باید این مقدار را به عنوان رمز عبور برای سایت فعلی ذخیره کند. سپس می توانید از autocomplete="current-password" برای فعال کردن تکمیل خودکار در فرم ورود استفاده کنید (به یاد داشته باشید که این فرم ثبت نام است).

مرحله 4: به کاربران کمک کنید تا رمزهای عبور امن را وارد کنند

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

دو مسئله وجود دارد: * هیچ راهی برای دانستن وجود محدودیت در مقدار رمز عبور وجود ندارد. * شما نمی توانید رمز عبور را ببینید تا بررسی کنید که آیا آن را درست دریافت کرده اید یا خیر.

کاربران را به حدس زدن وادار نکنید!

قسمت رمز عبور index.html را با کد زیر به روز کنید:

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button" aria-label="Show password as plain text. 
          Warning: this will display your password on the screen.">Show password</button>
  <input id="password" name="password" type="password" autocomplete="new-password" 
         minlength="8" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

این ویژگی های جدیدی را برای کمک به کاربران در وارد کردن رمزهای عبور اضافه می کند:

  • یک دکمه (در واقع فقط متن) برای تغییر نمایش رمز عبور. (عملکرد دکمه با جاوا اسکریپت اضافه خواهد شد.)
  • یک ویژگی aria-label برای دکمه تعویض رمز عبور.
  • یک ویژگی aria-describedby برای ورودی رمز عبور. صفحه‌خوان‌ها متن برچسب، نوع ورودی (رمز عبور) و سپس توضیحات را می‌خوانند.

برای فعال کردن دکمه تغییر رمز عبور و نشان دادن اطلاعات کاربران در مورد محدودیت های رمز عبور، تمام جاوا اسکریپت زیر را کپی کرده و در فایل js/main.js خود جایگذاری کنید.

(CSS از مرحله 2 قبلاً در محل قرار گرفته است. نگاهی بیندازید تا ببینید که چگونه دکمه تغییر رمز عبور استایل دهی و قرار گرفته است.)

  • آیا یک نماد بهتر از متن برای تغییر نمایش رمز عبور کار می کند؟ تست قابلیت استفاده از تخفیف را با گروه کوچکی از دوستان یا همکاران خود امتحان کنید.

  • برای تجربه نحوه کار صفحه‌خوان‌ها با فرم‌ها، افزونه ChromeVox را نصب کنید و در فرم پیمایش کنید. آیا می‌توانید فرم را فقط با استفاده از ChromeVox تکمیل کنید؟ اگر نه، چه چیزی را تغییر می دهید؟

شکل شما در این نقطه چگونه باید باشد:

جلوتر رفتن

این کد لبه چندین ویژگی مهم را پوشش نمی دهد:

  • بررسی رمزهای عبور در معرض خطر. هرگز نباید اجازه دهید رمزهای عبور به خطر افتاده است. شما می توانید (و باید) از یک سرویس بررسی رمز عبور برای پیدا کردن گذرواژه های در معرض خطر استفاده کنید . می توانید از یک سرویس موجود استفاده کنید یا خودتان آن را روی سرورهای خود اجرا کنید. آن را امتحان کنید! بررسی رمز عبور را به فرم خود اضافه کنید.

  • به شرایط خدمات و اسناد خط مشی رازداری خود پیوند دهید: نحوه محافظت از داده های آنها را برای کاربران روشن کنید.

  • سبک و نام تجاری: مطمئن شوید که این موارد با بقیه سایت شما مطابقت دارند. هنگام وارد کردن نام و آدرس و پرداخت، کاربران باید احساس راحتی کنند و مطمئن باشند که هنوز در جای درست هستند.

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