שיעור חמישי

טפסים

התג <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=button >  משמש להצגת כפתור. בכפתור ניתן לרשום טקסט כלשהו ע"י המאפיין value.

כפתור תמונה

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

כפתור שליחה

<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>:

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

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

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

תיבת רשימה

התג <select> מציג תיבת רשימה. 
כל ערך ברשימה יש לרשום עם התג <option> ולסגור עם התג <//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="return checkEmail(this)">

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

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

• סקריפט לבדיקת תקינות שדה האי-מייל
• סקריפט לבדיקת תקינות שדה הטלפון