פירוט של רכיב הטופס

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

לא תמיד צריך להוסיף את אמצעי הבקרה של הטפסים לרכיב <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"> כדי ליצור לחצן Submit גרפי. עם זאת, עכשיו אפשר ליצור לחצנים גרפיים באמצעות CSS, ולכן לא מומלץ להשתמש ב-type="image".

מתן הרשאה למשתמשים לשלוח קבצים

אפשר להשתמש ב-<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.

בדיקת ההבנה

בדיקת הידע שלכם לגבי רכיב הטופס

איזה ערך צריך להגדיר ל-enctype כדי לשלוח קבצים?

multipart/form-data
🎉
multipart/form-files
כדאי לנסות שוב.
form-data
כדאי לנסות שוב.
form-files
כדאי לנסות שוב.

האם אפשר לשלוח נתוני משתמשים בלי <form>

לא
כדאי לנסות שוב.
כן, באמצעות JavaScript.
🎉
כן, עם Flash.
כדאי לנסות שוב.
כן, באמצעות HTML5.
כדאי לנסות שוב.

איך שולחים <form>?

לוחצים על <button>.
כדאי לנסות שוב.
מקישים על Enter.
כדאי לנסות שוב.
לוחצים על <input type="image">.
כדאי לנסות שוב.
כל האפשרויות.
🎉

משאבים