JavaScript

שליחת תשובות לאירועי טופס

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

לעזור למשתמשים למלא אמצעי בקרה נוספים בטפסים

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

אפשר להשתמש ב-JavaScript כדי לחשוף <input> רק כאשר <input type="radio"> שמשויך אליו נבחר כרגע.

if (event.target.checked) {
    // show additional field
} else {
   // hide additional field
}

בואו נראה את קוד JavaScript כדי לראות את ההדגמה. שמת לב למאפיינים aria-controls ו-aria-expanded? כדאי להשתמש במאפייני ARIA האלה כדי לעזור למשתמשים בקורא מסך להבין מתי פקד נוסף של טופס מוצג או מוסתר.

מוודאים שהמשתמשים יכולים לשלוח טופס בלי לצאת מהדף

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

לשם כך, צריך להאזין לאירוע onsubmit, להשתמש ב-event.preventDefault() כדי למנוע את התנהגות ברירת המחדל, ולשלוח את FormData באמצעות Fetch API.

תמיכה בדפדפן

  • 42
  • 14
  • 39
  • 10.1

מקור

הסקריפט של הקצה העורפי יכול לבדוק אם נראה שבקשת POST מגיעה מהדפדפן (באמצעות המאפיין action של רכיב טופס, כאשר method="post") או מ-JavaScript, כמו בקשת fetch().

if (req.xhr || req.headers.accept.indexOf('json') !== -1) {
    // return JSON
} else {
    // return HTML
}

יש להודיע תמיד למשתמשים בקורא מסך על שינויים בתוכן דינמי. צריך להוסיף ל-HTML רכיב עם המאפיין aria-live="polite", ולעדכן את תוכן הרכיב אחרי שינוי. לדוגמה, אפשר לעדכן את הטקסט ל 'התגובה שלך פורסמה בהצלחה' לאחר שמשתמש שולח תגובה.

מידע נוסף על אזורים פעילים ב-ARIA

אימות באמצעות JavaScript

מוודאים שהודעות השגיאה תואמות לסגנון ולטון של האתר

הניסוח של הודעות שגיאה המוגדרות כברירת מחדל משתנה בין דפדפנים. איך תוכלו להבטיח שאותה הודעה תוצג לכל המשתמשים, ושההודעה תתאים לסגנון ולטון של האתר? משתמשים ב-method setCustomValidity() של Constraint Validation API כדי להגדיר הודעות שגיאה משלכם.

מוודאים שהמשתמשים מקבלים התראה על שגיאות בזמן אמת

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

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

לוודא שהמשתמשים יכולים לראות את הסיסמה שהם הזינו

הטקסט שהוזן בשדה <input type="password"> מוסתר כברירת מחדל, כדי לכבד את פרטיות המשתמשים. כדי לעזור למשתמשים להזין את הסיסמה שלהם, אפשר להציג <button> כדי להפעיל או להשבית את החשיפה של הטקסט שהוזן.

נסו את ההדגמה. הצגת הסיסמה <button> מאפשרת לשנות את מידת החשיפה של הטקסט שהוזן. איך זה עובד? לחיצה על הצגת סיסמה משנה את המאפיין type בשדה הסיסמה מ-type="password" ל-type="text", והטקסט <button> משתנה ל 'הסתרת הסיסמה'.

חשוב שהלחצן הצגת הסיסמה יהיה נגיש. צריך לחבר את <button> ל-<input type="password"> באמצעות המאפיין aria-controls.

כדי להודיע למשתמשים בקורא מסך אם הסיסמה מוצגת או מוסתרת כרגע, צריך להשתמש ברכיב מוסתר עם aria-live="polite" ולשנות את הטקסט שלו בהתאם. חשוב לאפשר למשתמשים בקורא מסך לדעת מתי מוצגת סיסמה וגלויה לאדם שמביט במסך שלהם.

<span class="visually-hidden" aria-live="polite">
    <!-- Dynamically change this text with JavaScript -->
</span>

למידע נוסף על הטמעת אפשרות להצגת סיסמה.

מקורות מידע