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

במודול הקודם למדתם איך להשתמש ברכיב <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. בנוסף, הדפדפן בודק אם ללחצן שליחה יש מאפיין 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".

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

בעזרת <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 של הטופס
• שיטות מומלצות לשימוש בלחצן שליחה