Get Adobe Flash player
דף הבית טפסים כפתורים

האתר של רפאלי - בניית טופס HTML

כפתורים

שפת ה-HTML יודעת להציג מבחר של כמה סוגי כפתורים, כל אחד למטרה אחרת.

הכפתורים, כמו אובייקטים אחרים של הטופס, הם תוצר של התג <input> ומה שקובע את האובייקט שיוצג הוא המאפיין type.

 

כפתור שליחת הטופס

הכפתור הבסיסי הוא:

<input type="submit" /> 

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

 

שם הכפתור

השם הכתוב על הכפתור משתנה לפי הדפדפנים. אינטרנט אקספלורר (IE) ו-Firefox יציגו את השם Submit Quary גם כאשר שפת האתר היא עברית, ואילו הגוגל כרום יציג במצב הזה "שלח".

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

<input type= "submit" value= "שלח טופס" /> 

כפתור למחיקת הנתונים שהוקלדו בטופס

הערך reset שיינתן ל type, יהפוך את הכפתור לכפתור ניקוי הטופס

<input type= "reset" value= "מחק טופס" /> 

כפתור להעלאת קבצים 

הערך file שיינתן ל type, יהפוך את הכפתור לכפתור ניקוי הטופס.

על מנת שניתן יהיה להעלות קובץ, חשוב מאוד להוסיף לתג form את המאפיין הבא:  enctype="multipart/form-data"ולהגדיר את המאפיין method ל- post. 

הערות: 

  • השונות שבין הדפדפנים מודגמת כאן היטב. אינטרנט אקספלורר (IE) ו-Firefox יקראו לו תמיד Browse ויפתחו לידו תיבת טקסט שבתוכה יוצב הקובץ שייבחר. גוגל כרום לעומתם, בדפים המוגדרים לעברית, יקרא לו "בחר קובץ", אך לא יפתח תיבת טקסט. אחרי הבחירה - שם הקובץ ייכתב לייד הכפתור.
  • HTML לא מאפשר את החלפת השם, גם אם נכתוב שם אחר בערך value.
<form method="post" enctype="multipart/form-data" action="">
<input type= "file" />
</form>
והתוצאה:

שליחת טופס כאמצעות תמונת כפתור

להצגת כפתור באמצעות קובץ תמונה יש לתת שני ערכים לתג input:

type="image" ו- src="שם התמונה ומיקומה".

בדוגמא הבאה, לחיצה על תמונת המעטפה תבצע את השליחה.

<input type= "image" src= "images/picture.jpg"  />
אל השיעור הקודם