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

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

בחינת ההבנה

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

משאבים

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