מדריך HTML » לימוד HTML באינטרנט » מדריך HTML למתחילים » טפסים אלקטרוניים

טפסים אלקטרוניים

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

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

התגיות הבסיסיות ביותר ב – HTML הם form, input, textarea, select ו – option.
התגית form מציינת כי מדובר בטופס. תגית form דורשת את הגדרת התכונה action אשר מציינת את היעד שאליו ישלח המידע שהוזן על ידי הגולש באתר.

תכונה נוספת אשר מוכלת בתגית form היא method אשר מציינת את אופן שליחת המידע שהוזן על ידי המשתמש. התכונה method יכולה לקבל 2 ערכים, get ( ערך ברירת מחדל ) או post. בדרך כלל, השימוש הוא בערך post אשר מחביא את המידע מגולש לעומת get אשר משרשר את המידע בכתובת ה – URL של הגולש.

אלמנט form בסיסי יוצג בצורה הבאה :

  1. <form action="processingscript.php" method="post">
  2. </form>

התגית input היא העיקר בעולם הטפסים האלקטרוניים. השימוש בתגית input הם מגוונים מאוד :

  • <input type="text" /> - ליצירת תיבת טקסט סטנדרטית. באפשרותך להגדיר את התכונה value למידע הראשוני שיוצג בתוך התיבה.
  • <input type="password" /> - ליצירת תיבת טקסט אשר משמשת להזנת סיסמא. התוכן שיוזן לתיבה זו, יוסתר על ידי הדפדפן.
  • <input type="checkbox" /> - ליצירת תיבת סימון, במקרה זה הגולש יכול לבחור מספר תיבות מקבוצה של תיבות סימון. באפשרותך להגדיר את התיבה כמסומנת בצורה ההתחלתית על ידי שימוש בתכונה checked. ההגדרה מבוצעת בצורה הבאה
  • <input type="checkbox" checked="checked" />
  • <input type="radio" /> - ליצירת תיבת רדיו אשר דומה לתיבת סימון. אם זאת, במקרה זה הגולש יוכל לבחור רק תיבה אחת ממספר תיבות רדיו.
  • < input type="file" /> - ליצירת אלמנט של העלאת קבצים לאינטרנט.
  • <input type="submit" /> - ליצירת כפתור שליחה לטופס, באמצעות כפתור זה הגולש יוכל לשלוח את הטופס באינטרנט. באפשרותך לשלוט על הטקסט שיופיע על ידי התכונה value, למשל : <input type="submit" value="Ooo. Look. Text on a button. Wow" />
  • <input type="image" /> - ליצירת תמונה אשר תשלח את הקואורדינטות שעליהן הגולש לחץ. אלמנט זה דורש הגדרה של תכונת src ( בדומה לשימוש בתגית img ).
  • <input type="button" /> - ליצירת כפתור שלא יעשה שום פעולה מיוחדת ללא קטע קוד נוסף.
  • <input type="reset" /> - ליצירת כפתור אתחול לטופס, בדומה לכפתור שליחת המידע ניתן לשלוט על הטקסט שיופיע על ידי התכונה value.
  • <input type="hidden" /> - ליצירת שדה מוסתר. השימוש העיקרי באלמנט זה הוא לביצוע מעקב, ניתוח ביצועים ואופטימיזציה של ROI.

שים לב שהתגית input מבצעת סגירה עצמאית שלה.

תגית ה – textarea היא תיבת טקסט גדולה ולכן היא דורשת תכונות rows ו –cols אשר יציינו את גודל התיבת. תגית textrarea מוצגת בצורה הבאה :

  1. <textarea rows="5" cols="20">הרבה מאוד טקסט יבוא כאן</textarea>

התגית select עובדת בצורה משותפת עם התגית option על מנת ליצור תפריט בחירה.
התגיות מוצגות בצורה הבאה :

  1. <select>
  2.     <option value="first option">אופציה 1</option>
  3.     <option value="second option">אופציה 2</option>
  4.     <option value="third option">אופציה 3</option>
  5. </select>

כאשר הטופס האלקטרוני נשלח, ערך התגית option תשלח לבעל האתר.

בצורה דומה לתיבות סימון וכפתורי רדיו, התגית option יכולה לקבל את התכונה selected אשר מציגה את התגית בצורה פעילה. הדבר נעשה בצורה הבאה :

  1. <option value="mouse" selected="selected">האם אתה רוצה להרשם לעדכונים בדואר אלקטרוני</option>

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

  1. <input type="text" name="yourname" />

טופס אלקטרוני באינטרנט נראה בצורה הבאה והוא חייב לעבוד בצמוד לסקריפט שיטפל בו (contactus.php) ויעביר אותו ליעד (בדרך כלל, תיבת הדואר האלקטרוני או למסד הנתונים ).

  1. <form action="contactus.php" method="post">
  2. <p>Name:</p>
  3.     <p><input type="text" name="name" value="Your name" /></p>
  4. <p>Comments: </p>
  5.     <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>
  6. <p>Are you:</p>
  7.     <p><input type="radio" name="areyou" value="male" /> Male</p>
  8.     <p><input type="radio" name="areyou" value="female" /> Female</p>
  9.     <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
  10.     <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>
  11. <p><input type="submit" /></p>
  12. <p><input type="reset" /></p>
  13. </form>

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

עמודים רלוונטים

  • עמוד HTML לדוגמא
  • טבלאות
  • טפסים נגישים ( מדריך HTML למומחים )
  • שפת JavaScript ( מדריך HTML למתקדמים ) – מדריך המדגיש שילוב JavaScript בטפסים אלקטרוניים.

דוגמאות קוד

  • תיבות טקסט
  • תיבות סימון וכפתורי רדיו
  • אפשרויות העלאת קבצים
  • איזורי טקסט
  • תיבות בחירה

רפרנס

  • תגית form
  • תגית input
  • תגית textarea
  • תגית select
  • תגית option