במבוא הזה לרכיב הטופס אפשר ללמוד את יסודות השימוש בטופס באינטרנט.
נניח שאתם רוצים לשאול אנשים באתר שלכם על החיה שהם אוהבים. בשלב הראשון, נדרשת דרך לאיסוף הנתונים.
איך עושים את זה עם 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> לסוגים שונים של קלטים ממשתמשים.
במודול הבא תלמדו עוד על רכיבי טופס.
איפה הנתונים מעובדים?
כששולחים טופס (למשל, כשמשתמש לוחץ על הלחצן Submit) , הדפדפן שולח בקשה. סקריפט יכול להגיב לבקשה הזו ולעבד את הנתונים.
כברירת מחדל, הבקשה נשלחת לדף שבו הטופס מוצג.
נניח שאתם רוצים שסקריפט יפעל ב-https://web.dev כדי לעבד את נתוני הטופס – איך תבצעו את זה?
רוצים לנסות?
אפשר לבחור את מיקום הסקריפט באמצעות המאפיין action.
<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><form>.<form-container><form><form-element>באיזה מאפיין אפשר להשתמש כדי להגדיר היכן מעובד <form>?
whereactionaction מגדיר איפה מעובד <form>.hrefurlמהי שיטת הבקשה שמוגדרת כברירת מחדל?
GETPOST