Forms

רוב האתרים והאפליקציות כוללים טופס אינטרנט. אתרים עם בדיחות, כמו DoWebsitesצריךכדילראותבדיוקאותואותובכלכלBrowser.com, אולי אין לו טופס כזה, אבל גם ל-MachineLearningWorkshop.com (MLW), יש מודל כזה בתור בדיחת אחד באפריל. גם אם יש תמונה מזויפת. "הקריאה לפעולה" הראשית של MLW הוא טופס רישום של מכונות להרשמה לסדנה. הטופס הזה נמצאת ברכיב <form>.

אלמנט ה-HTML <form> מזהה ציון דרך של מסמך שמכיל אמצעי בקרה אינטראקטיביים לשליחת מידע. בתוך <form> יש את כל האתרים האינטראקטיביים (והלא אינטראקטיביים) ופקדי הטופס שמרכיבים את הטופס.

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

הטפסים מאפשרים למשתמשים לבצע פעולות באתר או באפליקציה, לאמת את המידע שהוזן ולשלוח את הנתונים לשרת. מאפייני HTML יכולים לחייב את המשתמש לבחור פקדי טופס או להזין ערך. HTML יכולים להגדיר קריטריונים ספציפיים שהערך שלהם צריך להתאים כדי להיות חוקי. כשהמשתמש מנסה לשלוח את הטופס, כל הערכים של פקדי הטפסים עוברים אימות אילוצים בצד הלקוח ויכולים למנוע שליחה עד שהנתונים יתאימו לקריטריונים הנדרשים; ללא JavaScript. אפשר גם להשבית את התכונה הזו: הגדרה של novalidate ב-<form> או, לעיתים קרובות יותר, formnovalidate בלחצן, ושומרים את נתוני הטופס להשלמה מאוחר יותר, מניעת אימות.

שליחת טפסים

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

<input type="submit" value="Submit Form">
<button type="submit">Submit Form</button>

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

המאפיינים של הרכיב <form> מגדירים את שיטת HTTP כך שבה הטופס נשלח ואת כתובת ה-URL שמעבדת את שליחת הטופס. כן, ניתן לשלוח טפסים, לעבד אותם כדי לטעון דף חדש בלי להשתמש ב-JavaScript. הרכיב <form> הוא כל כך חזק.

המאפיינים action ו-method של הרכיב <form> מגדירים את כתובת ה-URL שמעבדת את נתוני הטופס, ואת שיטת ה-HTTP שמשמשת לשליחת הנתונים, בהתאמה. כברירת מחדל, נתוני הטופס נשלחים לדף הנוכחי. אחרת, צריך להגדיר את המאפיין action בתור כתובת ה-URL שאליה צריך לשלוח את הנתונים.

הנתונים שנשלחים מורכבים מצמדי שם/ערך של פקדי הטופס השונים. כברירת מחדל, הוא כולל את כל אמצעי בקרה שמוצבים בתוך הטופס שיש להם name. עם זאת, במאפיין form אפשר לכלול פקדי טפסים מחוץ ל-<form> וכדי להשמיט פקדי טפסים שמוצבים בתוך <form>. נתמך בפקדי טפסים ובאפשרות <fieldset>, המאפיין form מקבל את הערך שלו במאפיין id בצורת הבקרה שאליה הוא משויך, לא בהכרח בצורה שאליה הוא משויך הוא מקונן. המשמעות היא שפקדי טפסים לא צריכים להיות מקוננים פיזית ב-<form>.

המאפיין method מגדיר את פרוטוקול ה-HTTP של הבקשה: בדרך כלל GET או POST. באמצעות GET, נתוני הטופס נשלחים מחרוזת פרמטר של name=value זוגות, המצורפת לכתובת האתר של action.

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

יש גם שיטה של DIALOG. אם <form method="dialog"> נמצא בתוך <dialog>, שליחת הטופס תסגור את תיבת הדו-שיח. יש אירוע שליחה למרות שהנתונים לא נוקו או נשלחו. שוב, בלי JavaScript. הנושא הזה נדון בקטע של תיבת הדו-שיח. לתשומת ליבך, מכיוון שהטופס לא נשלח, כדאי כנראה מוסיפים גם את formmethod="dialog" וגם את formnovalidate בלחצן השליחה.

לחצני הטופס יכולים לכלול יותר מהמאפיינים שמתוארים בתחילת הקטע הזה. אם הלחצן כולל formaction, המאפיין formenctype, formmethod, formnovalidate או formtarget, הערכים שמוגדרים בלחצן שמפעילים את הטופס השליחה מקבלת עדיפות על פני הערכים action, enctype, method ו-target שהוגדר בתאריך <form>. אימות האילוצים מתרחש לפני שליחת הטופס, אבל רק אם אין formnovalidate בלחצן השליחה שהופעל או novalidate ב-<form>.

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

לאחר שליחת הטופס

כשהמשתמש שולח טופס אונליין מלא, נשלחים השמות והערכים של פקדי הטופס הרלוונטיים. השם הוא הערך של המאפיין name. הערכים מגיעים מהתוכן של המאפיין value או מהערך שהוזן או שנבחר על ידי המשתמש. הערך של <textarea> הוא הטקסט הפנימי שלו. הערך של <select> הוא ה-value של <option> שנבחר. לחלופין, אם <option> לא כולל value, הערך הוא הטקסט הפנימי של האפשרות שנבחרה.

<form method="GET">
  <label for="student">Pick a student:</label>
  <select name="student" id="student">
    <option value="hoover">Hoover Sukhdeep</option>
    <option>Blendan Smooth</option>
    <option value="toasty">Toasty McToastface</option>
  </select>
  <input type="submit" value="Submit Form">
</form>

בוחרים תלמיד/ה: הובר סוחדיפ בלנדן חלק פרצוף טוסטי מקטוסט

בחירה באפשרות 'Hoover Sukhdeep' (או לא לעשות דבר, כי הדפדפן מוצג ולכן בוחר בערך האפשרות הראשונה כברירת מחדל) ולאחר מכן לחיצה על לחצן השליחה תטען מחדש את הדף, ותגדיר את כתובת ה-URL כך:

https://web.dev/learn/html/forms?student=hoover

מאחר שהאפשרות השנייה לא כוללת מאפיין value, הטקסט הפנימי נשלח כערך. בחירה באפשרות 'Blendan Smooth' ולחיצה על לחצן השליחה תטען מחדש את הדף, ותגדיר את כתובת ה-URL כך:

https://web.dev/learn/html/forms?student=Blendan+Smooth

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

קיימים 22 סוגי קלט, כך שלא נוכל לכסות את כולם. שימו לב שבמקרים שבהם אתם רוצים שהמשתמש יזין מידע, הוספה של ערך היא אופציונלית, ובמקרים רבים לא מומלץ לעשות זאת. ברכיבי <input> שבהם המשתמש לא יכול לערוך את הערך, צריך תמיד לכלול ערך, כולל לקלט רכיבים מסוג hidden, radio, checkbox, submit, button ו-reset.

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

לחצני בחירה

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

name צריך להיות ייחודי לקבוצה: אם משתמשים בטעות באותו name לשתי קבוצות נפרדות, שבוחרים רדיו בקבוצה השנייה יבטל את הבחירה בכל הפריטים שנבחרו בקבוצה הראשונה עם אותו name.

name עם ה-value של לחצן הבחירה שנבחר נשלחים עם הטופס. יש לוודא שבכל לחצן בחירה value רלוונטי (ובדרך כלל ייחודי). הערכים של לחצני הבחירה שלא נבחרו לא יישלחו.

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

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

אם המשתמש נדרש לבחור שלט בחירה מתוך קבוצה של לחצני בחירה, יש להוסיף את המאפיין required לאחד לפחות של אמצעי הבקרה. אם כוללים את required בלחצן בחירה בקבוצה, חובה לבחור אפשרות לשליחת טופס, אבל לא חייב להיות רדיו עם המאפיין שנבחר כדי להיות חוקי. כמו כן, יש לציין בבירור ב<legend> שחובה להשתמש בפקד הטופס. הוספת התוויות של קבוצות לחצני בחירה לצד כל לחצן בנפרד מתוארת מאוחר יותר.

תיבות סימון

אפשר להשתמש באותו name בכל תיבות הסימון בקבוצה. רק תיבות הסימון שנבחרו כוללות name וvalue נשלח באמצעות הטופס. אם בחרתם כמה תיבות סימון עם אותו שם, יש לשלוח את אותו השם עם אותו שם. (בתקווה) ערכים שונים. אם יש לכם כמה פקדי טפסים עם אותו שם, גם אם לא כולם תיבות סימון: כולם יישלחו, מופרדים באמצעות סימן אמפרסנד (&).

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

https://web.dev/learn/html/forms?chk=on&chk=on&chk=on

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

תוויות וקבוצות שדות

כדי שמשתמשים יידעו איך למלא טופס, הם צריכים להיות נגישים. לכל פקד של טופס חייבת להיות תווית. ניתן גם להוסיף תוויות לקבוצות של פקדי טפסים. למרות שאזורי קלט, בחירה ואזורי טקסט מסומנים בתווית <label>, קבוצות של פקדי טפסים מתויגות לפי התוכן של <legend> ה-<fieldset> שמקבץ אותם.

בדוגמאות הקודמות הבחנתם שבכל פקד של הטופס מלבד לחצן השליחה, היה <label>. Labels (תוויות) לספק פקדי טפסים עם שמות נגישים. הלחצנים מקבלים את השם הנגיש מהתוכן או מהערך שלהם. כל השאר פקדי הטופס דורשים <label> משויך. אם אין תווית משויכת, הדפדפן עדיין יעבד את פקדי הטופס אבל המשתמשים לא ידעו מה המידע שמצופה ממנו.

כדי לשייך פקד טופס באופן מפורש ל-<label>, צריך לכלול את המאפיין for ב-<label>: הערך שהוא id של פקד הטופס שאליו הוא משויך.

<label for="full_name">Your name</label>
<input type="text" id="full_name" name="name">

השם שלך

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

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

<label>Your name
  <input type="text" name="name">
</label>

השם שלך

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

בדרך כלל, <label> מופיע לפני פקד הטופס, חוץ מאשר במקרים של לחצני בחירה ותיבות סימון. זו לא חובה. זהו פשוט הדפוס הנפוץ של חוויית המשתמש. הסדרה 'טופסי למידה' כוללת מידע על עיצוב טפסים.

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

<fieldset>
  <legend>Who is your favorite student?</legend>
  <ul>
    <li>
      <label>
        <input type="radio" value="blendan" name="machine"> Blendan Smooth
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="hoover" name="machine"> Hoover Sukhdeep
      </label>
    </li>
    <li>
      <label>
        <input type="radio" value="toasty" name="machine"> Toasty McToastface
      </label>
    </li>
  </ul>
</fieldset>

בדוגמה הזו, הגדרת התוויות המשתמעת של <label> היא לחצן בחירה, וה-<legend> מספק את התווית של קבוצת לחצני הבחירה. הצבת <fieldset> בתוך <fieldset> אחר היא שיטה מקובלת. לדוגמה, אם טופס הוא סקר שכולל הרבה שאלות מחולק לקבוצות של שאלות קשורות, "התלמיד האהוב" יכול להיות ש-<fieldset> נמצא בתוך רכיב <fieldset> אחר עם התווית "המועדפים שלך":

<fieldset>
  <legend>Your favorites:</legend>
  <ul start="6">
    <li>
      <fieldset>
        <legend>Who is your favorite student?</legend>
        <ul>
          <li>
            <!-- the rest of the code here -->

של הרכיבים האלה הופעות ברירת המחדל הובילו לשימוש יתר, אבל אפשר לעצב את <legend> ואת <fieldset> באמצעות CSS. בנוסף לכל המאפיינים הגלובליים, <fieldset> תומך גם במאפיינים name, disabled ו-form. כשמשביתים קבוצת שדות, כל פקדי הטפסים הפנימיים מושבתים. למאפיין name או למאפיין form אין הרבה פעמים ב-<fieldset>. אפשר להשתמש ב-name כדי לגשת לקבוצת השדות באמצעות JavaScript, אבל למערך השדות עצמו לא נכללת בנתונים שנשלחים (כוללים את פקדי הטופס בעלי שם).

סוגי קלט ומקלדת דינמית

כמו שציינו קודם, יש 22 סוגים שונים של מקורות קלט. במקרים מסוימים, כשמשתמש נמצא במכשיר עם מקלדת דינמית שמוצגת לפי הצורך בלבד, למשל טלפון, קלט הקלט הסוג שבו נעשה שימוש קובע את סוג המקלדת שמוצגת. מקלדת ברירת המחדל שמוצגת ניתנת לאופטימיזציה לסוג הקלט הנדרש. לדוגמה, בהקלדה tel יופיע לוח מקשים שעבר אופטימיזציה להזנת מספרי טלפון; email כולל את @ ואת .; את הרצף מקלדת דינמית עבור url כוללת נקודתיים וסמל לוכסן. לצערנו, ה-iPhone עדיין לא כולל את : ב- המקלדת הדינמית שמוגדרת כברירת מחדל ל-url סוגי קלט.

מקלדות של <input type="tel"> ב-iPhone ובשני טלפונים שונים עם Android:

מקלדות של <input type="email"> ב-iPhone ובשני טלפונים שונים עם Android:

גישה למיקרופון ולמצלמה

סוג הקלט של הקובץ <input type="file"> מאפשר העלאת קבצים באמצעות טפסים. הקבצים יכולים להיות מכל סוג, להגדיר ומוגבלים לפי המאפיין accept. הרשימה של סוגי הקבצים הקבילים יכולה להיות רשימה מופרדת בפסיקים של סיומות קבצים, סוג גלובלי, או שילוב של סוגים ותוספים גלובליים. לדוגמה, הפקודה accept="video/*, .gif" תקבל קובצי וידאו או קובצי GIF מונפשים. שימוש ב-'audio/*' לקובצי קול, "video/*" לקובצי וידאו, וגם ל-'image/*' לקובצי תמונות.

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

<label for="avatar">A recent photo of yourself:</label>
<input type="file" capture="user" accept="image/*" name="avatar" id="avatar">

אימות מובנה

שוב, בלי לכלול JavaScript, HTML יכול למנוע שליחה של טפסים עם ערכים לא חוקיים.

יש כמה סלקטורים ב-CSS שמתאימים לפקדי טפסים על סמך הנוכחות של מאפייני HTML, כולל :required ו-:optional אם הערך הבוליאני required. מוגדר או לא; :default אם checked הוא כתוב בתוך הקוד, וגם :enabled או :disabled, אם האלמנט הוא אינטראקטיבי ואם disabled. קיים. הסיווג המדומה :read-write מתאים לרכיבים עם contenteditable הוגדר ו פקדי טופס שניתן לערוך כברירת מחדל, כמו סוגי קלט number, password ו-text (אבל לא תיבות סימון, לחצני בחירה, או סוג hidden. אם רכיב שבדרך כלל ניתן לכתיבה כולל את הערך readonly שהוגדר, הוא יתאים ל-:read-only במקום זאת.

כשהמשתמשים מזינים את המידע בפקדי הטופס, הסלקטורים בממשק המשתמש ב-CSS, כולל :valid, :invalid, :in-range וגם מצב :out-of-range מופעל או מושבת, בהתאם למדינה. כשהמשתמש יוצא מפקד טפסים, :user-invalid שעדיין לא נתמך באופן מלא יש התאמה בין :user-valid למחלקה לכאורה.

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

form:invalid [type="submit"] {
  opacity: 50%;
  pointer-events: none;
}

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

שירות ה-CSS שהוחל מתעדכן באופן קבוע בהתאם למצב הנוכחי של ממשק המשתמש. לדוגמה, כשכוללים סוגי קלט עם אילוצים, כמו email, number, url וסוגי תאריכים, אם הערך הנוכחי אינו null (לא ריק) הוא לא ערך חוקי של כתובת אימייל, מספר, כתובת URL, תאריך או שעה, המחלקה המדומה של CSS :invalid תהיה התאמה. הקבוע הזה עדכון שונה מאימות אילוצים מובנה של HTML, שמתבצע רק כשהמשתמש מנסה לשלוח את הטופס.

אימות אילוצים מובנה רלוונטי רק למגבלות שהוגדרו עם מאפייני HTML. למרות שאפשר לעצב רכיבים במחלקות :required ו-:valid/:invalid, הדפדפן סיפק הודעות שגיאה שנובעות משגיאות על סמך המאפיינים required, pattern, min, max ואפילו type, מאפשרים שליחת טופס.

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

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

אם ערך של number, תאריך או שעה נמוך מהערך המינימלי min שהוגדר או גבוה מהערך המקסימלי max שהוגדר, הבקרה תהיה :out-of-range (וגם :invalid), וגם המשתמש יקבל הודעה על valididityState.rangeUnderflow, validityState.rangeOverflow בזמן הזה לנסות לשלוח את הטופס. אם הערך הוא מחוץ לשלב עם הערך של step, בין אם הוא מוגדר במפורש או מוגדר כברירת מחדל בתור 1, הבקרה תהיה :out-of-range (ו-:invalid), ויהיה שגיאת validityState.stepMismatch. השגיאה מופיעה כבועה וכברירת מחדל מספקת מידע מועיל על הדרכים לתיקון הטעות.

יש מאפיינים דומים לאורך הערכים: minlength ו-maxlength יציגו התראה למשתמש על שגיאה עם validityState.tooLong או validityState.tooShort בזמן השליחה. הרכיב maxlength גם מונע מהמשתמש להזין יותר מדי תווים.

שימוש במאפיין maxlength עלול לפגוע בחוויית המשתמש. באופן כללי, עדיף לתת למשתמש כדי להזין יותר מאורך התווים המותר מתן מונה, אופציונלי: בצורה של <output>, שלא נשלח עם הטופס, לאפשר להן לערוך את הטקסט עד שהפלט יציג את האורך המרבי המותר. maxlength יכול להיכלל ב-HTML; כמו כל מה שדיברנו עליו, הוא פועל בלי JavaScript. לאחר הטעינה, הערך של ניתן להשתמש במאפיין maxlength כדי ליצור את מונה התווים הזה ב-JavaScript.

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

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

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

דוגמה

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

לחצן השליחה הראשון סוגר את תיבת הדו-שיח. משתמשים ב-formmethod="dialog" כדי לשנות את שיטת ברירת המחדל של הטופס, וסוגרים את <dialog> מבלי לשלוח את הנתונים או למחוק אותם. עליך לכלול גם את formnovalidate, אחרת הדפדפן מוודאים שבכל שדות החובה יש ערך. ייתכן שהמשתמש ירצה לסגור את תיבת הדו-שיח ואת הטופס בלי הזנת נתונים כלשהם, אימות כזה ימנע זאת. הכללה של aria-label="close" כי "X" הוא סימן ויזואלי ידוע, לא תווית תיאורית.

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

ל-<select> יש ערך ברירת מחדל שמבטל את המאפיין required. במקום לכלול את המאפיין value בכל אפשרות, הערך יוגדר כברירת מחדל לטקסט הפנימי.

לחצן השליחה בסוף מגדיר את שיטת הטפסים כ-POST. כשלוחצים על הלחצן, החוקיות של כל ערך תיבדק. אם כל האפשרויות הערכים חוקיים, נתוני הטופס יישלחו, תיבת הדו-שיח תיסגר והדף עשוי להפנות לכתובת thankyou.php, שזו כתובת ה-URL של הפעולה. אם חסרים ערכים, או אם בערך המספרי יש חוסר התאמה בשלב או שהוא נמצא מחוץ לטווח, הפונקציה תופיע הודעת שגיאה רלוונטית שהוגדרה בדפדפן, הטופס לא יישלח ותיבת הדו-שיח לא תיסגר. אתם יכולים להתאים אישית את הודעות השגיאה שמוגדרות כברירת מחדל בעזרת validityState.setCustomValidity('message here') . שימו לב: אם מגדירים הודעה מותאמת אישית, צריך להגדיר את ההודעה באופן מפורש כמחרוזת הריקה כשכל חוקי, אחרת הטופס לא יישלח.

שיקולים נוספים

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

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

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

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

בדיקת ההבנה

בוחנים את הידע שלכם לגבי טפסים.