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.

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

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

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

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

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

חשוב לוודא שהודעות השגיאה תואמות לסגנון ולסגנון הדיבור של האתר

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

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

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

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

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

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

לנסות את הדמו. משנים את החשיפה של הטקסט שהוזן באמצעות הסמל Show Password (הצגת הסיסמה) <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>

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

משאבים

• FormData
• Constraint Validation API
• <input type="password">