HTML/טפסים
טפסים הם דרך לקבל קלט מהמשתמש. את הקלט ניתן לקבל בצורות רבות: ניתן לקבל טקסט דרך שדות טקסט, או בחירה של משתמש דרך כפתורי רדיו, ותיבות בחירה. ניתן לקבל תשובות של כן/לא על ידי תיבות סימון, וניתן גם לקבל קובץ שהמשתמש בוחר להעלות.
ויקי אינו מאפשר להציג דוגמאות של טפסים. על כן, לשמאלכם תמונה של טופס ובו הגדרה של מספר מושגים. על מנת לראות כיצד נראים טפסי HTML מומלץ להעתיק כל שורה של הדגמת קוד לקובץ תבנית של טפסי HTML, לשמור ולנסות בדפדפן שלכם. דוגמאות קוד תמצאו החל מהפרק הבא.
הבה נכיר את הרכיבים בעזרת התמונה שמשמאל:
- מסביב לתמונה יש מסגרת, ובה נמצאים רכיבי הטופס. זוהי מסגרת רכיבי הטופס.
- תיבת טקסט. ניתן לכתוב בו שורה אחת של טקסט.
- תיבת סיסמא. ניתן לכתוב בה שורה אחת של טקסט. הטקסט שמוקלד מוחלף בכוכביות ואינו מוצג על המסך. שדה קלט זה שימושי לקליטת סיסמאות, שכן הוא מוגן בפני מציצים.
- תיבת סימון. ניתן לסמן בה V ולהסיר ממנה את ה-V ועל-ידי כך לומר כן/לא על המשפט שמופיע אחריה. למשפט זה קוראים, תווית התיבה.
- כפתורי רדיו. כפתורי רדיו שימושיים רק בקבוצה. אזי ניתן מכל קבוצה לבחור רק כפתור אחד. בניגוד לתיבת הבחירה (בהמשך), כדאי להשתמש בכפתורי רדיו כאשר המשתמש צריך לקרוא את כל תוויות הכפתורים ולבחור אחת מביניהן, כמו למשל במבחן אמריקאי, וכאשר התווית ארוכה (כמו משפט למשל).
- איזור טקסט. בניגוד לתיבת הטקסט, באיזור הטקסט ניתן לכתוב טקסט בכל אורך ובמספר בלתי מוגבל של שורות.
- תיבת בחירה. בדומה לכפתורי רדיו, גם כאן המשתמש יכול לבחור אחת מבין מכמה אפשרויות. וההבדל הוא בעיקר באופן ההצגה למשתמש. יש להעדיף שימוש בתיבת הבחירה, כאשר אין למשתמש צורך לראות את כל האפשרויות כדי לבחור (כמו ארץ מגורים), וכאשר התווית קצרה (כמו מילה). בנוסף, יש גם תיבות בחירה שמאפשרות בחירה של יותר מאפשרות אחת.
- כפתור שליחת הטופס. לחיצה עליו תשלח את הטופס למקום שאנו נבחר (כתובת דואר אלקטרוני, או דף אינטרנט אחר).
- כפתור איפוס הטופס. לחיצה עליו תנקה את שדות הטופס, ותחזיר לאלו שיש להם את ערכי ברירת המחדל.
מה עושים עם הקלט מהטופס?
ניתן לשלוח אותו לכתובת דואר אלקטרוני או להשתמש בו כדי לקבל קלט עבור יישומוני Javascript, וכך ליצור דף דינאמי.
יחד עם זאת, טפסים שימושיים בעיקר עם שפות צד שרת כמו PHP. בעזרת שפות צד שרת ניתן לשלוח נתונים מדף לדף, ועל-ידי כך ליצור אתר דינאמי, אשפים, קניה מקוונת, רישום משתמשים ו-login, עבודה עם מסדי נתונים ועוד אפשרויות אינסוף כיד הדמיון הטובה.
- בפרק טפסים למתחילים נלמד ליצור טופס פשוט, עם שדות פשוטים ולשלוח אותו בדואר אלקטרוני למנהל האתר.
- בפרק טפסים פשוטים ומקצועיים נלמד ליצור טפסים שממש נח למלא, ובנוסף לכך הם גם נגישים עבור כל סוגי המשתמשים.
- בפרק שדות קלט מתקדמים נכיר את כל שדות הקלט שלא הכרנו קודם.
- בפרק כל המאפיינים של כל התגים נכיר את כל מאפיין ומאפיין.
- בפרק אימות שדות קלט נכיר את המושג אימות טופס, ונלמד מה השיטות השונות לאמת טופס.
- בפרק האחרון נסכם את עיקרי הדברים, ונציג הפניות לפרקים המתאימים בספרי PHP ו-Javascript.
לא נלמד בחלק זה כיצד לשלוח נתוני טופס לדף אינטרנט אחר שכן עיקר הידע הדרוש הוא שפת צד שרת, ולאו דווקא HTML.
ניווט
[עריכה]| הפרק הקודם: HTML |
טפסים תרגילים |
הפרק הבא: טפסים למתחילים |