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

سم داتون

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

۱. از HTML معنادار استفاده کنید

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

  1. یک قلم جدید ایجاد کنید .

  2. کد زیر را کپی کرده و در ویرایشگر HTML قرار دهید.

    <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>

  3. برای دیدن فرم HTML، روی پیش‌نمایش زنده کلیک کنید. ورودی‌هایی برای نام، ایمیل و رمز عبور وجود دارد. این فرم فقط از CSS پیش‌فرض مرورگر استفاده می‌کند.

هر ورودی در یک بخش قرار دارد و هر کدام یک برچسب دارند. دکمه ثبت نام، مهم‌تر از همه، یک <button> است. بعداً در این آزمایشگاه کد، قدرت‌های ویژه همه این عناصر را خواهید آموخت.

همانطور که خودتان سوالات زیر را مطرح می‌کنید:

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

فرم خود را آزمایش کنید

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

نمای زنده CodePen خود را باز کنید، یا از نمای زنده ما دیدن کنید. فرم خود را با استفاده از حالت دستگاه Chrome DevTools در دستگاه‌های مختلف امتحان کنید.

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

۲. برای بهبود عملکرد فرم، CSS اضافه کنید

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

در این مرحله، CSS را برای آسان‌تر کردن استفاده از فرم اضافه خواهید کرد. این CSS را کپی کرده و در فایل css/main.css قرار دهید.

برای دیدن فرم ثبت نام استایل‌بندی شده خود، روی پیش‌نمایش کلیک کنید.

آیا این CSS برای مرورگرها و اندازه‌های مختلف صفحه نمایش کار می‌کند؟

  • سعی کنید padding ، margin و font-size متناسب با دستگاه‌های آزمایشی خود تنظیم کنید.
  • CSS برای موبایل طراحی شده است. از کوئری‌های رسانه‌ای برای اعمال قوانین CSS برای نماهایی که حداقل 400px عرض دارند و سپس دوباره برای نماهایی که حداقل 500px عرض دارند، استفاده کنید. آیا این نقاط شکست کافی هستند؟ چگونه باید نقاط شکست را برای فرم‌ها انتخاب کنید؟

۳. ویژگی‌هایی را برای کمک به کاربران در وارد کردن داده‌ها اضافه کنید

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

کد 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" اعتبارسنجی اولیه را فراهم می‌کند و تضمین می‌کند که کاربران تلفن همراه یک صفحه کلید مناسب دریافت می‌کنند.

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

سعی کنید فرم را با یک فیلد خالی ارسال کنید. مرورگر فرم را ارسال نمی‌کند و درخواست تکمیل داده‌های از دست رفته را می‌دهد و فوکوس را تنظیم می‌کند. دلیل این امر این است که ما ویژگی require را به همه ورودی‌ها اضافه کرده‌ایم.

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

استفاده از مقدار autocomplete name برای ورودی Full name منطقی است، اما در مورد سایر ورودی‌ها چطور؟

  • autocomplete="username" برای ورودی ایمیل به این معنی است که مدیر رمز عبور مرورگر، آدرس ایمیل را به عنوان "نام" این کاربر (نام کاربری!) ذخیره می‌کند تا همراه با رمز عبور باشد.
  • autocomplete="new-password" برای رمز عبور، به مدیر رمز عبور این پیام را می‌دهد که باید این مقدار را به عنوان رمز عبور سایت فعلی ذخیره کند. سپس می‌توانید از autocomplete="current-password" برای فعال کردن تکمیل خودکار فرم ورود به سیستم استفاده کنید. به یاد داشته باشید، این یک فرم ثبت نام است.

۴. به کاربران در وارد کردن رمزهای عبور ایمن کمک کنید

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

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

کاربران را مجبور به حدس زدن نکنید. بخش رمز عبور فایل index.html با کد زیر به‌روزرسانی کنید:

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

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

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

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

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

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

ادامه بده

این codelab چندین ویژگی مهم را پوشش نمی‌دهد:

  • بررسی رمزهای عبور لو رفته. هرگز نباید اجازه دهید رمزهای عبوری که لو رفته‌اند، استفاده شوند. می‌توانید (و باید) از یک سرویس بررسی رمز عبور برای شناسایی رمزهای عبور لو رفته استفاده کنید .

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

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

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