שימוש בטפסים לקבלת נתונים ממשתמשים

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

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

ב-HTML, אפשר ליצור את זה באמצעות אלמנט הטופס (<form>), אלמנט <input> עם <label>, ואלמנט שליחה <button>.

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

מהו רכיב טופס?

רכיב הטופס מורכב מתג פתיחה <form>, מאפיינים אופציונליים שמוגדרים בתג הפתיחה ותג סגירה </form>.

בין תג הפתיחה לתג הסגירה אפשר לכלול רכיבי טופס כמו <input> ו-<textarea> לסוגים שונים של קלט משתמש. במודול הבא תוכלו לקרוא מידע נוסף על רכיבי טפסים.

איפה הנתונים מעובדים?

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

כברירת מחדל, הבקשה נשלחת לדף שבו מוצג הטופס.

נניח שרוצים להריץ סקריפט ב-https://web.dev כדי לעבד את נתוני הטופס. איך היית עושה את זה? רוצים לנסות את זה ב-CodePen?

      <form action="https://example.com/animals"></form>

בדוגמה הקודמת, נשלחת בקשה אל https://example.com/animals. סקריפט בקצה העורפי של example.com יכול לטפל בבקשות ל-/animals ולעבד נתונים מהטופס.

איך הנתונים מועברים?

כברירת מחדל, נתוני הטופס נשלחים כבקשת GET, והנתונים שנשלחו מצורפים לכתובת ה-URL. אם משתמש שולח את המילה frog בדוגמה הקודמת, הדפדפן שולח בקשה לכתובת ה-URL הבאה:

https://example.com/animals?animal=frog

במקרה כזה, אפשר לגשת לנתונים בחלק הקדמי או האחורי של האתר על ידי קבלת הנתונים מכתובת ה-URL.

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

<form method="post">
...
</form>

כשמשתמשים ב-POST, הנתונים נכללים בגוף הבקשה.

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

באיזו שיטה כדאי להשתמש?

יש תרחישים לדוגמה שמתאימים לכל אחת משתי השיטות.

בטפסים שמעבדים נתונים רגישים, צריך להשתמש בשיטה POST. הנתונים מוצפנים (אם משתמשים ב-HTTPS) ורק הסקריפט של ה-backend יכול לגשת אליהם כדי לעבד את הבקשה. הנתונים לא מוצגים בכתובת ה-URL. דוגמה נפוצה היא טופס כניסה.

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

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

בדיקת ההבנה

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

משאבים

אלמנט <form>.