Codelab שיטות מומלצות לשימוש בטופסי תשלום

Sam Dutton

בשיעור הזה תלמדו איך ליצור טופס תשלום מאובטח, נגיש וקל לשימוש.

שלב 1: שימוש ב-HTML בהתאם לייעוד שלו

משתמשים ברכיבים שנוצרו במיוחד למטרה הזו:

  • <form>
  • <section>
  • <label>
  • <input>,‏ <select>,‏ <textarea>
  • <button>

כפי שתראו, הרכיבים האלה מאפשרים פונקציונליות מובנית בדפדפן, משפרים את הנגישות ומוסיפים משמעות לתגי העיצוב.

  • לוחצים על Remix to Edit כדי להפוך את הפרויקט לעריכה.

מעיינים בקוד ה-HTML של הטופס ב-index.html.

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

  <h1>Payment form</h1>

  <section>
    <label>Card number</label>
    <input>
  </section>

  <section>
    <label>Name on card</label>
    <input>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label>Expiry date</label>
      <input>
    </div>
    <div>
      <label>Security code</label>
      <input>
      <div class="explanation">Last 3 digits on back of card</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

יש <input> רכיבים למספר הכרטיס, לשם שמופיע על הכרטיס, לתאריך התפוגה ולקוד האבטחה. כולם עטופים ברכיבי <section>, ולכל אחד יש תווית. הלחצן השלמת התשלום הוא HTML <button>. בהמשך ה-codelab הזה נסביר על תכונות הדפדפן שאפשר לגשת אליהן באמצעות הרכיבים האלה.

לוחצים על הצגת האפליקציה כדי לראות תצוגה מקדימה של טופס התשלום.

  • האם הטופס פועל בצורה טובה מספיק כמו שהוא?
  • האם יש משהו שהיית משנה כדי שהיא תפעל טוב יותר?
  • מה לגבי מכשירים ניידים?

לוחצים על הצגת המקור כדי לחזור לקוד המקור.

שלב 2: עיצוב לניידים ולמחשבים

קוד ה-HTML שהוספתם תקין, אבל העיצוב של דפדפן ברירת המחדל מקשה על השימוש בטופס, במיוחד בנייד. גם הוא לא נראה טוב במיוחד.

כדי לוודא שהטפסים פועלים בצורה טובה במגוון מכשירים, צריך לשנות את המרווחים הפנימיים, השוליים וגדלי הגופנים.

מעתיקים את כל ה-CSS שבהמשך ומדביקים אותו בקובץ css/main.css.

זה המון CSS! השינויים העיקריים שחשוב לדעת עליהם הם השינויים בגדלים:

  • ‫padding ו-margin נוספו לקלט.
  • הערך font-size וערכים אחרים שונים בגדלים שונים של אזור התצוגה.

כשמרוצים מהתוצאה, לוחצים על הצגת האפליקציה כדי לראות את הטופס עם הסגנון החדש. תשימו לב גם שהגבולות הותאמו, ושהתווית display: block; משמשת כדי להציג את התוויות בשורה משלהן, ושהשדות יכולים להיות ברוחב מלא. בשיטות המומלצות לטופס כניסה מוסבר ביתר פירוט למה כדאי להשתמש בגישה הזו.

הסלקטור :invalid משמש לציון מקרים שבהם ערך הקלט לא תקין. (תשתמשו בזה בהמשך ב-Codelab).

ה-CSS הוא Mobile-first:

  • קובץ ה-CSS שמוגדר כברירת מחדל מיועד לאזורי תצוגה ברוחב של פחות מ-400px.
  • שאילתות מדיה משמשות לביטול ברירת המחדל של אזורי תצוגה ברוחב של 400px לפחות, ואז שוב לאזורי תצוגה ברוחב של 500px לפחות. השיטה הזו מתאימה לטלפונים קטנים, למכשירים ניידים עם מסכים גדולים ולמחשבים.

בכל פעם שאתם יוצרים תוכן לאינטרנט, אתם צריכים לבדוק אותו במכשירים שונים ובגדלים שונים של אזורי תצוגה. זה נכון במיוחד לגבי טפסים, כי תקלה קטנה יכולה להפוך אותם ללא שמישים. חשוב תמיד להתאים את נקודות עצירה של CSS כדי לוודא שהן פועלות בצורה טובה עם התוכן ועם מכשירי היעד.

  • האם הטופס כולו גלוי?
  • האם שדות הקלט בטופס גדולים מספיק?
  • האם כל הטקסט קריא?
  • האם הבחנתם בהבדלים בין השימוש במכשיר נייד אמיתי לבין הצגת הטופס במצב מכשיר בכלי הפיתוח ל-Chrome?
  • האם היה צורך לשנות את נקודות עצירה?

יש כמה דרכים לבדוק את הטופס במכשירים שונים:

שלב 3: מוסיפים מאפיינים שיעזרו למשתמשים להזין נתונים

הפעלת האפשרות לדפדפן לאחסן ערכי קלט ולמלא אותם אוטומטית, ומתן גישה לתכונות מאובטחות מובנות של תשלום ואימות.

מוסיפים מאפיינים לטופס בקובץ index.html כך שהוא ייראה כך:

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

  <h1>Payment form</h1>

  <section>
    <label for="cc-number">Card number</label>
    <input id="cc-number" name="cc-number" autocomplete="cc-number" inputmode="numeric" pattern="[\d ]{10,30}" required>
  </section>

  <section>
    <label for="cc-name">Name on card</label>
    <input id="cc-name" name="cc-name" autocomplete="cc-name" pattern="[\p{L} \-\.]+" required>
  </section>

  <section id="cc-exp-csc">
    <div>
      <label for="cc-exp">Expiry date</label>
      <input id="cc-exp" name="cc-exp" autocomplete="cc-exp" placeholder="MM/YY" maxlength="5" required>
    </div>
    <div>
      <label for="cc-csc">Security code</label>
      <input id="cc-csc" name="cc-csc" autocomplete="cc-csc" inputmode="numeric" maxlength="3" required>
      <div class="explanation">Back of card, last 3 digits</div>
    </div>
  </section>

  <button id="complete-payment">Complete payment</button>

</form>

מציגים שוב את האפליקציה ומקישים או לוחצים על השדה מספר הכרטיס. בהתאם למכשיר ולפלטפורמה, יכול להיות שיופיע חלון לבחירת אמצעי תשלום ששמורים בדפדפן, כמו זה שמופיע למטה.