מדריך HTML מספר 10 - טפסים, שדות וכפתורים (Forms and input fields)

Steps

1. 1

   Step 1

   כדי להשתמש בשדות, צ'ק בוקסים וכדומה עלינו להגדיר טופס, כלומר, עלינו להגדיר אלמנט מסוג form אשר בתוכו נגדיר אלמנטי קלט שונים (Input). אלמנט הקלט לרוב יתלווה במאפיין מסוג type שיגדיר איזה סוג קלט נקבל, לדוגמא:
2. 2

   Step 2

   
   Your dogs name:
3. 3

   Step 3

   
   במקרה הזה נקבל שדה קלט פשוט המקבל תווים - שימו לב שאלמנט הform רק מגדיר שמדובר בטופס ואינו נראה לעין בדף האינטרנט שלנו. אלמנט הinput נמצא בין תגיות אלמנט הform והוא מכיל בתוכו מאפיין type שהערך שלו הוא text (כלומר שדה טקסט) , כמו כן, קיים מאפיין name שמייצג שם שנוכל להתייחס אליו מאלמנטים אחרים (ערכו נבחר באופן שרירותי).
4. 4

   Step 4

   כאשר נגדיר למשתמשים לעשות בחירות מסויימות בטופס, עלינו לחשוב כמה אפשרויות ברצוננו לתת למשתמש לבחור ובהתאם להציב כפתורים וקופסאות. אם המשתמש צריך לבחור אופציה אחת מתוך מספר אופציות נשתמש בכפתור הרדיו (Radio button) או בתפריט נפתח (Drop down). . אם נרצה שמשתמש יוכל לבחור מספר אופציות, נשתמש בצ'ק בוקס (Check box). דוגמא לRadio button:
5. 5

   Step 5

   
   Eilat
   Ramat ha golan
6. 6

   Step 6

   
   את מאפיין הtype באלמנט הinput הגדרנו כradio ויצרנו מאפיין value עם שם הערך. בדף הHTML יוצגו 2 הכפתורים שיצרנו עם הטקסט שהגדרנו שיהיה לצידם.
7. 7

   Step 7

   כדי לעשות צ'ק בוקסים (לבחירת מספר אופציות) נעשה כך:
8. 8

   Step 8

   
   What classes do you have?
   Math
   biology
   English
   
9. 9

   Step 9

   
   בדף הHTML יופיעו הצ'ק בוקסים לבחירה מרובה. הנה דוגמא לתפריט נפתח (Drop down) לבחירה יחידה.
10. 10

    Step 10

    
    Israel USA Canada Australia
11. 11

    Step 11

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

    Step 12

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

    Step 13

    Password:
14. 14

    Step 14

    מגדיר סיסמא (תוכן הסיסמא יוסתר)
15. 15

    Step 15

    some text in the text area
16. 16

    Step 16

    הדוגמא הזו מראה לנו כיצד להכין שדה שיכול להכיל מספר גדול של תווים (בניגוד לאלמנט הtext). זו דוגמא ליצירת כפתור:
17. 17

    Step 17
18. 18

    Step 18

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

    Step 19

    Name:
    
    E-mail:
    
    Comment: