שעור חמישי

טפסים

התג <form>
מציין פתיחת טופס קלט. התג </form>
סוגר את טופס הקלט.

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

תיבת טקסט

• תיבת טקסט – תיבה להקלדת טקסט. 
התג <input type=text> מציין תיבת טקסט.
(לתג זה אין תג סוגר).

<form>
שם פרטי: 
<input type="text" name="firstname">
<br>
שם משפחה: 
<input type="text" name="lastname">
</form>

הטופס יראה כך:

 

שם פרטי:

שם משפחה:

שימו לב לכך שלא ניתן לראות באתר את מסגרת הטופס, את ה-
form.

במאפיין name יש לרשום שם
כלשהו שישמש לזיהוי השדה.

המאפיין type משמש לציון סוג השדה:

כפתור בחירה


<input type=radio> שדה מסוג כפתור
radio button, שימושי כאשר רוצים שהגולש יבחר רק אחת מהאפשרויות.

<form>
<input type="radio" name="sxs" value="male"> זכר
<br>
<input type="radio" name="sxs" value="female"> נקבה
</form>

זה יראה כך:

זכר

נקבה

שימו לב ששני הכפתורים קיבלו את אותו שם במאפיין
name וזאת בכדי לשייך אותם לאותה קבוצה.

תיבת סימון

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

<form>
אני אוהב  <br> לראות טלויזיה:
<input type="checkbox" name="vehicle" value="tv">
<br>
לגלוש באינטרנט: 
<input type="checkbox" name="vehicle" value="internet">
<br>
קולנוע: 
<input type="checkbox" name="vehicle" value="movies">
</form>

זה יראה כך:

אני אוהב
לראות טלויזה:
לגלוש באינטרנט:
קולנוע:

גם כאן המאפיין name זהה בשלושת התגים,
מכיוון ששלושתם משתייכים לאותה קבוצה ועונים על אותה שאלה (“אני אוהב:”).

תיבת סיסמה

<input type=password> משמש להזנת סיסמה.

תיבת טקסט נסתר

<input type=hidden>
משמש לשדה טקסט נסתר, שלא
יראה ל גבי דף האינטרנט.

תיבת טעינת קובץ

תיבה לטעינת קובץ מהמחשב שלי, עם כפתור “עיון”.

טעינת קבצים
<input type=file>  

לחצן

<input type=button > 
משמש להצגת כפתור. בכפתור ניתן לרשום טקסט כלשהו ע”י המאפיין
value.

<input type=”button” value=”לחצן” name=”B3″>

כפתור תמונה

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

<input
border=”0″ src=”home-btn.jpg” name=”I1″ type=”image” width=”103″
height=”23″>
       

כפתור שליחה

<input type=submit>
כפתור המשמש לשליחת הטופס.

כפתור איפוס

<input type=reset>
כפתור המשמש לניקוי הטופס.

קבלת פרטי הטופס בדואר אלקטרוני

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

  1. יש לתת לכל שדה בטופס שם משמעותי, כי שם
    השדה מופיע ב-email שנקבל ויקל עלינו לזהות את השדה.
  2. בתג <form>
    יש לציין את המאפיין action, עם כתובת ה e-mail שלנו.
    יש לרשום mailto: לפני כתובת ה- e-mail.
  3. יש לרשום את המאפיין Method , המציין את צורת
    השליחה של הטופס. לטופס שנשלח בדואר האלקטרוני יש לרשום
    method=post    .
  4. יש לרשום את המאפיין enctype להגדרת אופן קידוד הנתונים הנשלחים.
    בכדי שהטקסט יהיה קריא, יש לרשום enctype=text/plain.

דוגמה למבנה תג ה- <form>:

<form action=mailto:eti@walla.com method =”post” enctype=”text/plain”>

סוגים נוספים של שדות:

תיבת אזור טקסט

התג <textarea>
מציג תיבת טקסט של כמה שורות.
המאפיינים של התג הם, rows המציין את מספר השורות של
התיבה ו- cols המציין את רוחב התיבה.

לתג זה יש תג סוגר </textarea>

<textarea rows=”2″ cols=”20″></textarea>

זה יראה כך:

הערות:
 

תיבת רשימה

התג <select>
מציג תיבת רשימה. 
כל ערך ברשימה יש לרשום עם התג
<option> ולסגור עם התג
<//option>. סגירת הרשימה תהיה עם התג הסוגר
</select>.


<select name=”area”>
<option value=””>בחר אזור</option>
<option value=”merkaz“>מרכז</option>
<option value=”zafon“>צפון</option>
<option value=”darom“>דרום</option></select>

זה יראה כך:

אזור
 

דוגמה לטופס:

<form
action=”MAILTO:etibar@atartov.com” method=”post” enctype=”text/plain”>

שם:
<input type=”text” name=”name”
value=”שם” size=”20″>
<br>
דואר אלקטרוני:
<input type=”text” name=”mail”
value=”דואר אלקטרוני” size=”20″>
<br>
הערות:
<input type=”text” name=”comment”
value=”הערות” size=”40″>
<br><br>
<input type=”submit” value=”שלח”>
<input type=”reset” value=”איפוס”>

</form>
 

זה יראה כך:

שם:
דואר אלקטרוני:
הערות:


בדיקת תקינות

לצורך בדיקת תקינות הנתונים שהוזנו לטופס יש להפעיל תוכנת סקריפט שתבצע בדיקה.
את הסקריפט יש להכניס  בין תגי ה- HEAD (באחת
השורות בין התג הפותח לסוגר). 
לפני תחילת הסקריפט יש לרשום את התג הבא:
ובסוף הסקריפט יש לסגור את התג ב-
</script>.
 

 <script language=”javascript” type=”text/javascript”>
כאן ירשם הסקריפט
 </script>

ה- language יכול להיות
javascript או vbscript תלוי בשפה שבה
רשום הסקריפט.
ניתן לרשום סקריפט גם בקובץ חיצוני, סיומת הקובץ צריכה להיות
.js (כאשר מדובר בסקריפט של
java script).
במקרה זה ירשם בתג ה- script  עם המאפיין  src  

כך:

<script src=”checkform.js”></script>

בכדי
להפעיל את הסקריפט, יש לקרוא לו  מתוך תג ה-
FORM ע”י המאפיין
ONSUBMIT .

לדוגמה:

<form onSubmit=”return checkEmail(this)”>

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

  סקריפטים הבודקים תקינות של
אלמנטים בטופס, ניתן
למצוא באתר http://javascript.internet.com/forms

חזרה לראש הדף

לשעור הבא