טפסים HTML

טפסים HTML

כללי:

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

פתיחת טופס באתר מאפשרת איסוף נתונים והעברתם אל השרת לצורך ניתוח ועיבוד. לצורך אלה מספק הטופס כלים כשורות לכתיבת טקסט, תיבות סימון, כפתורי "שגר" (Submit) ו"נקה" (Clear) ועוד. כלי הטופס משמשים גם לצורך פעולות פנימיות בדף עצמו כמו למשל, הפעלת הוראות של Javascript השתולות בתוך הדף עצמו.

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

 ·          כתיבת טקסט חופשית

 ·          בחירה מתוך רשימה קבועה או נפתחת (נגללת).

 ·          סימון ובחירת בסגנון "כן/לא".

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

בניית טפסים ב- HTML

(קובצי תרגול: Forms  ו- script)

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

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

כל תגי הטופס מאופיינים בכמה תכונות. תכונה אחת מופיעה בכולם. תכונת name= מגדירה את שם הטופס ואת שם (כינוי) השדה שבטופס הנתון. כך תוכל תכנת השרת לשייך את השדה הנכון אל הטופס הנכון.

 המידע מהטופס יכול לעבור אל השרת – לתוכנת עיבוד נתונים מיוחדת (קובצי CGI ו- ASP) או אל כתובת דואר אלקטרוני. שתי תכונות מצורפות אל התג, שבאמצעותן מנתבים את המידע אל מקומו הסופי.

            ·          Method היא התכונה המגדירה את השיטה בה מעבירים את המידע. הערך Post מציין העברה בדואר אלקטרוני, ו- Get מציין העברה ישירות אל השרת.

            ·          Action: מגדיר את המסלול אליו נשלח את המידע.

תג טופס המעביר את המידע אל דואר אלקטרוני יראה כך (הכתובת היא דוגמא בלבד ואינה אמיתית):

<Form Name=”Form01” method=”post” action=”Myaddress@isp.net.il ?subject=Submitted from the site" enctype="text/plain”>

            ·          התוספת ?subject= מוסיפה את שורת הנושא הנלוות אל הדואר.

            ·          התכונה enctype=text/plain גורמת לדואר להישלח בקידוד רגיל.

תג טופס המעביר את המידע אל השרת יראה כך:

<Form Name=”Form01” method=”get” action=”/cgi-bin/script”>

תגי הטופס

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

 ·          <Textarea>

 ·          <Select>

 ·          <Input>

Textarea

תג מכולה להגדרה שטח לכתיבת טקסט.

<FORM …>

<textarea name="textarea1" cols=”35” rows=”15”></textarea>

שורת הדוגמא המצוינת, בונה שטח לכתיבה ברוחב 35 עמודות ו- 15 שורות.

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

ניתן להוסיף לתיבה זו, טקסט שיופיע כברירת מחדל:

<textarea name="textarea 2" rows=”10”>טקסט כברירת מחדל</textarea>

Select

תג לבחירת אפשרות מתוך רשימת גלילה או מתוך רשימה פתוחה.

תיבת בחירה זו בנויה משני תגים, ומתכונות המצורפות לכל אחת בנפרד. Select מאפשרת שלושה סוגי תיבות בחירה.

·         רשימת גלילה:

אפשרות המציגה על המסך תיבה נגללת (Combo Box) המציגה בחלון שם אחד מתוך אפשרויות הבחירה. ניתן לקבוע מראש מה יהיה השם המוצג כברירת המחדל. רשימה זו מאפשרת בחירת שם אחד בלבד מתוך סך כל האפשרויות.

תחביר:

o        שורה פותחת הכוללת את התג Select ותכונה מצורפת (name=) הנותנת לתיבה שם.

o        שורה נפרדת לכל אחת מאפשרויות הבחירה. השורה מתחילה בתג Option אליו מוסיפים את התכונה Value הנותנת ערך לבחירה. ערך זה בצרוף עם שם ה Select, הוא שישלח אל השרת.

o        השם המופיע בתיבה לכל בחירה, נכתב כטקסט רגיל מחוץ לתג. אפשרות בחירה שאינה מלווה בטקסט שם, משאירה את האפשרות לבחירת אופציה ריקה.

o        קביעת ברירת מחדל נעשית ע"י צרוף התכונה Selected לתג.

התיבה שבדוגמא, נוצרת ע"י התחביר הבא:

 Red Apple Pink Peach Sweet Pear 

<SELECT NAME="FRUITS">

<option value="apple">Red Apple

<option value="Peach">Pink Peach

<option value="Pear" selected>Sweet Pear

</select>

בדוגמא זו, נוצרת תיבת גלילה בעלת 3 ערכים. השם הניתן ל Value נשלח אל תכנת השרת, בעוד שהשם המופיע בפועל על המסך, הוא הטקסט הכתוב מחוץ לתג. כך, בעוד שעל המסך, מופיע השם Red Apple, הרי שאל השרת, ישלח הערך apple. ברירת המחדל של תיבה זו, היא: Sweet Pear.

·         תיבה פתוחה:

אפשרות זו מציגה על המסך תיבה פתוחה המכילה רשימת אפשרויות ממנה ניתן לבחור אפשרות אחת בלבד. בניית התיבה מתאפשרת ע"י הוספת התכונה Size ומתן ערך המגדיר את מס' האפשרויות שיופיעו בו זמנית על המסך. אם הרשימה כוללת מס' גדול יותר של אפשרויות בחירה, יופיע פס גלילה אוטומטי בצדה הימני של התיבה. בדוגמא שלהלן, תופיע על המסך תיבה בת 3 שורות אך עם 4 אפשויות. בחירת הערך הריק, לא תשלח מאומה אל השרת, מאחר ולאפשרות שנבחרה (הריקה), אין ערך ל Value.

 Red Apple Pink Peach Sweet Pear Nice Apricot 

<SELECT NAME="FRUITS" SIZE=”3”>

<option value="apple">Red Apple

<option value="Peach">Pink Peach

<option value="Pear" selected>Sweet Pear

<option value="Apricot">Nice Apricot

</select>

הוספת התכונה Multiple אל תג Select מאפשרת בחירת יותר מאשר אפשרות אחת. בחירה מרובה נעשית ע"י לחיצה על מקש Shift בעת ההקשה על העכבר - ליצירת רצף אפשרויות, או על מקש Ctrl לבחירה של כמה אפשרויות בודדות. תכונה זו מבטלת את הצורך בתכונת Size, אולם ניתן בהחלט להוסיפה על פי הצורך.

Input

תג ליצירת תיבות סימון, בחירה או שורת טקסט רגילה. תג זה מאפשר מגוון רב של תיבות איסוף אינפורמציה. אל תג זה מתווספת תכונת Type המגדירה את הסוג:

·          Input Type=Text - תיבת טקסט.

·          Input Type=Password - תיבת טקסט המציגה כוכביות במקום הערך שנרשם בפועל.

·          Input Type=Checkbox - תיבת סימון

·          Input Type=Radio - תיבת (עיגול) בחירה מתוך רשימה

·          Input Type=Submit - כפתור שליחת תוכן הטופס אל השרת

·          Input Type=Reset - כפתור ניקוי הטופס והחזרתו למצב ברירת המחדל.

·          Input Type=Button – כפתור ללא הגדרת תפקיד. כפתור זה עובד בשילוב עם סקריפטים השתולים בקובץ. (ניתן להגדיר כפתור זה גם כתג עצמאי ראה <Button>).

·         תיבת טקסט

תג Input מציג על המסך שורת טקסט.

תחביר:

·         Type: תכונה הכרחית המגדירה את סוג התיבה. ערך תכונה זו עבור תיבת טקסט הוא  Type=Text.

·         Name: מגדיר את שם התיבה לצורך אבחנת השרת בין התיבות השונות

·         Value: הערך המופיע בתיבה. השארת הערך ריק,"" Value=  תציג תיבה ריקה על המסך. ערך או טקסט, יופיע על המסך כברירת מחדל.

·         Size:  גודל התיבה. הגדרת תיבה ללא תכונה זו, תיצור תיבה בגודל של ברירת מחדל.

<input type=”text” name="Text_Line_1" value="">

<input type=”text” name="Text_Line_2" value="Default Text">

·         תיבת סיסמא (Password)

כמוה כתיבת טקסט אלא שהערך הנכתב מופיע על המסך בצורת כוכביות. תיבה זו נוצרת ע"י מתן הערך Type=Password.

·         תיבת סימון (Checkbox)

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

תחביר:

·         Type: סוג התיבה הוא Checkbox.

·         Name: כל תיבת סימון מקבלת שם שונה.

·         Value: הערך הנתון לתכונה זו ישלח אל השרת אם התיבה תיבחר. אם לא, לא ישלח דבר בהקשר לתיבה זו.

·         Checked: הוספת התכונה אל התג, יוצרת בחירה ראשונית על המסך (ברירת מחדל).

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

<input type=”checkbox” name=”check1” value="a">Non Checked Box

<input type=”checkbox” name=”check2” value="a" checked>Pre Checked Box

·         תיבת בחירה (Radio)

תיבה לסימון אפשרות אחת בלבד מתוך כמה.

תחביר:

·         Name: כל תיבות הבחירה מקבלות שם זהה. מתן שם זהה מאפשר למערכת להתייחס אל כל תיבות הבחירה כאל מקור אחד, ממנו תיבחר תיבה אחת בלבד.

·         Type: סוג התיבה הוא Radio.

·         Value: לכל תיבה יש לתת ערך שונה. בחירת התיבה תשלח את הערך אל השרת.

·         Checked: הוספת התכונה אל התג, יוצרת בחירה ראשונית על המסך (ברירת מחדל).

<input type=”radio” name=”radio1” value="1">Non Checked radio

<input type=”radio” name=”radio1” value="2" checked>Checked radio

<input type=”radio” name=”radio1” value="3">Non Checked radio

בדוגמא זו מופיעים 3 תיבות רדיו. תיבה בחירה מס' 2 מסומנת כברירת מחדל.

·         לחיצי בקרה (כפתורים)

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

תחביר:

·         Type - ארבעה סוגים:

1.   Submit - לשליחת המידע אל השרת על פי ההנחיות שבתג <form> שבפתיח הטופס.

2.   File - כפתור מיוחד שליחת קבצים. הפקודה יוצרת כפתור ולידו תיבת טקסט. זהו שילוב המיועד לעיון (Browse) למטרות שליחת קובץ. לחיצה על הכפתור תפתח חלון לעיון בקבצים. בחירת הקובץ, תכניס את שמו אל התיבה. שליחת הטופס כולו תשלח את הקובץ על היעד. זוהי שיטה מקובלת ליצירת כפתור להעלאת קבצים (Upload). הפקודה מחייבת שימוש בתכונת Name עבור תיבת הטקסט.

3.   Reset - עבור לחיץ ניקוי כל תיבות הטופס מבחירה קודמת.

4.   Button - ליצירת כפתור ללא פקודה מיוחדת. כפתור זה מיועד להפעלת סקריפטים של ג'אווה, DHTML וכו'.

·         Value: הטקסט שיופיע על פני הלחיץ.

<input type=”reset” value="נקה">

<input type=”submit” value=”שלח”>

<input type=”button” value=”הפעל”>

שילוב כפתור Submit בתוך טופס עצמאי יכול לשמש כקישור אל קובץ אחר במקום שיטת הקישור המסורתית:

<form method=”get” action="examples\marquee.htm" target="_blank">

<input type=”submit” value=”קובץ דוגמא”>

</form>

דוגמא לשילוב כפתור file:

 <input type=”file” name=”upload”>

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

תג<Button> יוצר כפתור על המסך, אליו מוסיפים תכונת ארוע (למשל OnClick) להפעלת תכונות או סקריפט.

דוגמא לכפתור הפעלה והתחביר:

<BUTTON ONCLICK="FUNCTION( )" >שם הכפתור</BUTTON>

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