כיצד ליצור טופס HTML (דוגמאות מוסברות)

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

מבנה של טופס HTML

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

רכיבי קלט נכנסים לכאן

רכיבי קלט

שדות טקסט

שדות טקסט נוצרים באמצעות התג עם התכונה סוּג מונח על טֶקסט. לדוגמה:

שֵׁם:




טלפון

האלמנט משמש לשדות הזנת מספר טלפון.

טלפון:


תַאֲרִיך

האלמנט משמש לבחירת תאריך.

תאריך לידה:


סיסמה

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

סיסמה:


ארכיון

האלמנט משמש כדי לאפשר למשתמש לבחור קובץ ממערכת הקבצים המקומית שלו.

העלה קובץ:


תיבת סימון

האלמנט משמש לשדות קלט המאפשרים למשתמש לבחור אפשרות אחת, אחת או מרובות.

אני מקבל את התנאים

רָדִיוֹ

האלמנט משמש לשדות קלט המאפשרים למשתמש לבחור אפשרות אחת מתוך קבוצת אפשרויות.

מִין:

איש

נשים

מספר

האלמנט משמש לשדות קלט מספריים.

כמות:


טווח

האלמנט משמש לשדות קלט שחייבים להכיל ערך מטווח ערכים.

כרך:




כפתורים

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

שֵׁם:




טיפול בהזנת טופס

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

שיטת GET

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

רכיבי קלט נכנסים לכאן

שיטת POST

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

רכיבי קלט נכנסים לכאן

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

דוגמה לצורת HTML עם כל האלמנטים 

להלן טופס המשתמש בכל האלמנטים שסקרנו במאמר זה:

טופס הרשמה

שֵׁם:



שם משפחה:



אימייל:



טלפון:



תאריך לידה:



סיסמה:



העלה קובץ:



אני מקבל את התנאים


מִין:

איש

נשים

כמות:



כרך:




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

כפתור "שלח" בסוף הוא זה שיהיה אחראי על שליחת הטופס לכתובת ה-URL המצוינת בתכונה פעולה של התווית צוּרָה (במקרה זה, "/submit_form"). כדי שטופס זה יעבוד באתר אינטרנט אמיתי, יהיה עליך להגדיר שרת כדי לקבל ולעבד את המידע מהטופס הזה בנתיב "/submit_form".