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

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

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

איך עושים זאת באמצעות HTML?

ב-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 כדי לעבד את נתוני הטפסים - איך עושים את זה? רוצים לנסות?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

בדיקת ההבנה

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

משאבים

הרכיב <form>.