מידע מפורט על רכיב הטופס

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

האם כדאי להשתמש ברכיב <form>?

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

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

איך <form> עובד?

למדתם ש<form> היא הדרך הכי טובה לטפל בנתוני משתמשים. עכשיו אתם בטח תוהים איך טופס עובד.

‫<form> הוא קונטיינר של אמצעי בקרה אינטראקטיביים בטופס.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

איך עובד תהליך שליחת הטופס?

כששולחים <form>, הדפדפן בודק את המאפיינים של <form>. הנתונים נשלחים כבקשת GET או POST בהתאם למאפיין method. אם לא קיים מאפיין method, מתבצעת בקשת GET לכתובת ה-URL של הדף הנוכחי.

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

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

בנוסף, הדפדפן מחפש מאפיינים נוספים ברכיב <form>, למשל כדי להחליט אם צריך לאמת את הטופס (novalidate), אם צריך להשתמש בהשלמה אוטומטית (autocomplete="off") או באיזה קידוד צריך להשתמש (accept-charset).

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

<form method="post" action="/color">
    <label for="color">What is your favorite color?</label>
    <input type="text" name="color" id="color">
    <button>Save</button>
</form>

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

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

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

יש כמה דרכים להוסיף לחצן שליחה. אפשרות אחת היא להשתמש ברכיב <button> בתוך הטופס. כל עוד לא משתמשים ב-type="button", הוא פועל כלחצן שליחה. אפשרות נוספת היא להשתמש ב-<input type="submit" value="Submit">.

אפשרות שלישית היא להשתמש ב-<input type="image" alt="Submit" src="submit.png">, כדי ליצור לחצן גרפי שליחה. עם זאת, עכשיו אפשר ליצור לחצנים גרפיים באמצעות CSS, ולכן לא מומלץ להשתמש ב-type="image".

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

המשתמשים יכולים לשלוח קבצים

משתמשים ב<input type="file"> כדי לאפשר לאנשים להעלות ולשלוח קבצים, אם צריך.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

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

כדי לוודא שהמשתמשים יוכלו להעלות קבצים, צריך לבצע עוד שינוי אחד – להגדיר את המאפיין enctype בטופס. ערך ברירת המחדל הוא application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

כדי לוודא שאפשר לשלוח קבצים, משנים את ההגדרה ל-multipart/form-data. בלי הקידוד הזה, אי אפשר לשלוח קבצים עם בקשת POST.

בדיקת ההבנה

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

משאבים

• אלמנט הטופס ב-HTML
• שיטות מומלצות ללחצן השליחה