טפסת ברשת (עודכן)
מעיון ברשימה של שאילתות החיפוש באתר הזה (אלו שנוצרים כאשר משתמשים בתיבת החיפוש בפינה הימנית העליונה של הדף הראשי) אני רואה שיש די הרבה גולשים שמגיעים לכאן ומחפשים מידע על בניית אתרים, כנראה בעקבות קישורים לאתר בניית האתרים שהיה כאן פעם.
כדי שהם (אתם?) לא יצאו מכאן בידיים ריקות לחלוטין, החלטתי לעדכן מדריך שכתבתי לפני כמה שנים כתשובה לשאלה בפורום בוני אתרים בנענע, אותו ניהלתי בזמנו, העוסק ביצירת טפסים.
הנה הוא לפניכם:
הנה הוא לפניכם:
המקום הכי טוב לתרגל טפסים הוא המחשב שלך. הכיני דף עם טופס, וכשאת מחוברת
לרשת מלאי אותו ושלחי אותו. שחקי עם האפשרויות.
כמות שהם, דפי HTML לא יכולים לעשות שום דבר. אחת ההמצאות הראשונות בשביל לפתור את זה הם טפסים. טפסים לוקחים מידע מהדף ושולחים אותו לאנשהו. לאיפה? תלוי.
הטפסים הנפוצים ביותר הם טפסים ששולחים דואר. כרגיל ברשת, יש שני סוגים של טפסים כאלה: כאלה שמשתמשים בתוכנה בשרת בשביל לשלוח את הדואר, וכאלה שלא.
את אלה שלא יותר קל להתקין, אבל הם עושים הרבה בעיות, במיוחד אם הטופס בעברית.
רוב השרתים נותנים גישה לתוכנה המתאימה. גם אם אין לך שרת כזה, יש שרתים שיתנו לך להשתמש בתוכנה שלהם, בחינם. אחד ידוע הוא feedback.com. רשימה ארוכה של שרתים כאלה אפשר למצא ב־cgi-resources . בדוגמאות כאן נשתמש בתוכנה שיושבת על השרת של feedback.com.
סוגי השדות הקיימים בטופס:
במקרה של טופס הנשלח באמצעות feedback.com התג יראה כך:
<form method="post" action="http://www.note.com/success/public/freeform/mailto.cgi">
feedback.com נותן לנו אפשרות להגדיר דברים מתקדמים בהתנהגות הטופס באמצעות "שדות נסתרים". אלה הם שדות שהמבקר בדף לא רואה, אבל הם נשלחים יחד עם הטופס ומובנות על ידי התוכנה שיש ל־feedback.com על השרת. זהירות- איזה שדות נסתרים יש ומה לשים בהם שונה משרת לשרת!
בדוגמא כאן נשתמש רק בשדות הנסתרים הבסיסיים ביותר. רשימה מלאה של השדות הנסתרים הנתמכים ב־feedback.com אפשר למצא בדף הבא. הגדרת הכתובת אליו תשלח הטופס תעשה באמצעות השדה הנסתר admin. הנה כך:
<input type="hidden" name="to" value="xslf@hotmail.com">
כמובן שצריכים להחליף את הכתובת שלי בכתובת הרצוייה (אלא אם רוצים שאני אקבל את הטפסים :-) )
במקרים מיוחדים, כשרוצים לשלוט ידנית בכיווניות הטקסט בטופס, אפשר להשתמש במאפיין dir.
<input type="text" dir="rtl" size="20" name="Hebrew Text" value="טקסט עברי">
מגדיר שדה טקסט עם כיווניות ימין לשמאל.
תומר מעדכן ומוסיף למדריך (תודה תומר!):
הגירסה הרביעית של HTML הוסיפה לנו עוד מספר תכונות שימושיות, שקיימות בצורה זו או אחרת בממשקי המשתמש הרגילים:
תוויות - במקום סתם למקם את הכותרת של כל רכיב בטופס כטקסט רגיל, נוכל להשתמש בתוויות, ולהגדיר בעצם טקסט, שלחיצה עליו תוביל ישירות לרכיב הרלוונטי.
בעיקרון, אפשר למקם את התווית בכל מקום בדף, אבל אנו מעוניינים למקמן במקום סמוך לרכיב עצמו, כאשר היוצאים מן הכלל הם דפים המשתמשים בטבלאות לעיצוב הטופס, לדוגמה.
מבנה של רכיב קלט עם תווית -
<label for="name">שם</label><input type="text" size="20" name="name">
מסגרות - כשעושים טפסים ארוכים במיוחד, לעיתים מעוניינים למקם אלמנטים גרפיים בין קטעים של הטופס. בעבר היו משתמשים בקו-אנכי (<hr>), ובכותרות למניהן, אך גם כן HTML גירסה 4 מביאה לפנינו חידושים לצורת הכתיבה המסורתית, בדמות fieldset להגדרת אוסף שדות, ו-legend לקביעת הכותרת. בבריירת המחדל יוצגו האלמנטים על-ידי הדפדפן באופן דומה לשל ממשק משתמש סטנדרטי, אך באמצעות CSS וקצת דימיון נוכל לעצבם כרצוננו, בכפוף למגבלות של CSS גירסה 2, כמובן.
דוגמה לטופס שעושה שימוש באלמנטים של תוויות ומסגרות:
קישורים רלוונטיים:
שימוש בטפסים ב-HTML. מתוך מסמך המלצת w3c לגבי html 4.01
כמות שהם, דפי HTML לא יכולים לעשות שום דבר. אחת ההמצאות הראשונות בשביל לפתור את זה הם טפסים. טפסים לוקחים מידע מהדף ושולחים אותו לאנשהו. לאיפה? תלוי.
הטפסים הנפוצים ביותר הם טפסים ששולחים דואר. כרגיל ברשת, יש שני סוגים של טפסים כאלה: כאלה שמשתמשים בתוכנה בשרת בשביל לשלוח את הדואר, וכאלה שלא.
את אלה שלא יותר קל להתקין, אבל הם עושים הרבה בעיות, במיוחד אם הטופס בעברית.
רוב השרתים נותנים גישה לתוכנה המתאימה. גם אם אין לך שרת כזה, יש שרתים שיתנו לך להשתמש בתוכנה שלהם, בחינם. אחד ידוע הוא feedback.com. רשימה ארוכה של שרתים כאלה אפשר למצא ב־cgi-resources . בדוגמאות כאן נשתמש בתוכנה שיושבת על השרת של feedback.com.
מבנה טופס
טופס סטנדרטי מורכב משני סוגי תגים: תגים המגדירים את הטופס, ותגים המגדירים שדות בטופס.סוגי השדות הקיימים בטופס:
קוד של טופס
כל טופס נפתח עם התג <form> ונסגר עם התג <form/>. הקוד של הטופס עצמו וכל השדות הולכים בין שני התגים האלה. לתג <form> בדרך כלל מוסיפים שני משתנים: method ו־action.- method- השיטה שבה הטופס עובד. בדרך כלל post.
- action- מגדיר את התוכנית בה הטופס ישתמש. נשתמש ב־mailto:email@example.com - כשעובדים ללא תוכנה על השרת (כשבמקום email@exmpale.com שמים את הכתובת אליו רוצים שהתוצאות ישלחו) או את הכתובת של התוכנית על השרת.
במקרה של טופס הנשלח באמצעות feedback.com התג יראה כך:
<form method="post" action="http://www.note.com/success/public/freeform/mailto.cgi">
feedback.com נותן לנו אפשרות להגדיר דברים מתקדמים בהתנהגות הטופס באמצעות "שדות נסתרים". אלה הם שדות שהמבקר בדף לא רואה, אבל הם נשלחים יחד עם הטופס ומובנות על ידי התוכנה שיש ל־feedback.com על השרת. זהירות- איזה שדות נסתרים יש ומה לשים בהם שונה משרת לשרת!
בדוגמא כאן נשתמש רק בשדות הנסתרים הבסיסיים ביותר. רשימה מלאה של השדות הנסתרים הנתמכים ב־feedback.com אפשר למצא בדף הבא. הגדרת הכתובת אליו תשלח הטופס תעשה באמצעות השדה הנסתר admin. הנה כך:
<input type="hidden" name="to" value="xslf@hotmail.com">
כמובן שצריכים להחליף את הכתובת שלי בכתובת הרצוייה (אלא אם רוצים שאני אקבל את הטפסים :-) )
עברית וטפסים
כשכתבתי את המדריך במקור, בעידן העברית הויזואלית, זה היה נושא כאוב. לשמחתי, במשך השנים, המצב השתפר, וכיום אין בעייה מיוחדת בעברית בטפסים ואין צורך להגדיר משהו מיוחד כדי שזה יעבוד.במקרים מיוחדים, כשרוצים לשלוט ידנית בכיווניות הטקסט בטופס, אפשר להשתמש במאפיין dir.
- dir="rtl"- קובע כיווניות ימין לשמאל (כשהטקסט העיקרי הוא עברי)
- dir="ltr"- קובע כיווניות שמאל לימין (כשהטקסט העיקרי הוא אנגלי).
<input type="text" dir="rtl" size="20" name="Hebrew Text" value="טקסט עברי">
מגדיר שדה טקסט עם כיווניות ימין לשמאל.
לחבר הכל ביחד
ולסיום, הנה טופס לדוגמא, יחד עם הקוד שלו. <form method="post"
action="http://www.note.com/success/public/freeform/mailto.cgi">
<input type=hidden name=to value=xslf@hotmail.com>
<p dir="rtl">
שם:<input type="text" size="20" name="name"><br>
דואר אלקטרוני:<input type="text" size="20" name="from"><br>
אתר:<input type="text" size="20" name="url" dir="ltr"><br>
שם האתר:<input type="text" size="20" name="home_page"><br>
האם המדריך הזה היה שימושי? <br>
<input type="radio" name="good_guide" value="no">
לא
<input type="radio" name="good_guide" value="yes">
כן <br>
האם אתם רוצים לראות מדריכים נוספים?<br>
<select name="more_guides" size="1" dir="rtl">
<option>בחרו תשובה....</option>
<option>כן, עוד מדריכים על קוד בבקשה</option>
<option>כן, עוד מאמרים כללים</option>
<option>כן, עוד מאמרים על גרפיקה</option>
<option>כן, סקירת אתרים</option>
<option>כן, סקירת תוכנות</option>
<option>כן, מדריכים בנושאים נוספים</option>
<option>לא, המדריך הזה הספיק לי</option>
</select>
<br>
כתבו כאן את ההודעה שלכם:<br>
<textarea name="comments" rows="4" cols="20" dir="rtl"></textarea>
<br>
<input type="submit" name="submit" value="שליחת הטופס">
</p>
</form>
<input type=hidden name=to value=xslf@hotmail.com>
<p dir="rtl">
שם:<input type="text" size="20" name="name"><br>
דואר אלקטרוני:<input type="text" size="20" name="from"><br>
אתר:<input type="text" size="20" name="url" dir="ltr"><br>
שם האתר:<input type="text" size="20" name="home_page"><br>
האם המדריך הזה היה שימושי? <br>
<input type="radio" name="good_guide" value="no">
לא
<input type="radio" name="good_guide" value="yes">
כן <br>
האם אתם רוצים לראות מדריכים נוספים?<br>
<select name="more_guides" size="1" dir="rtl">
<option>בחרו תשובה....</option>
<option>כן, עוד מדריכים על קוד בבקשה</option>
<option>כן, עוד מאמרים כללים</option>
<option>כן, עוד מאמרים על גרפיקה</option>
<option>כן, סקירת אתרים</option>
<option>כן, סקירת תוכנות</option>
<option>כן, מדריכים בנושאים נוספים</option>
<option>לא, המדריך הזה הספיק לי</option>
</select>
<br>
כתבו כאן את ההודעה שלכם:<br>
<textarea name="comments" rows="4" cols="20" dir="rtl"></textarea>
<br>
<input type="submit" name="submit" value="שליחת הטופס">
</p>
</form>
תומר מעדכן ומוסיף למדריך (תודה תומר!):
הגירסה הרביעית של HTML הוסיפה לנו עוד מספר תכונות שימושיות, שקיימות בצורה זו או אחרת בממשקי המשתמש הרגילים:
תוויות - במקום סתם למקם את הכותרת של כל רכיב בטופס כטקסט רגיל, נוכל להשתמש בתוויות, ולהגדיר בעצם טקסט, שלחיצה עליו תוביל ישירות לרכיב הרלוונטי.
בעיקרון, אפשר למקם את התווית בכל מקום בדף, אבל אנו מעוניינים למקמן במקום סמוך לרכיב עצמו, כאשר היוצאים מן הכלל הם דפים המשתמשים בטבלאות לעיצוב הטופס, לדוגמה.
מבנה של רכיב קלט עם תווית -
<label for="name">שם</label><input type="text" size="20" name="name">
מסגרות - כשעושים טפסים ארוכים במיוחד, לעיתים מעוניינים למקם אלמנטים גרפיים בין קטעים של הטופס. בעבר היו משתמשים בקו-אנכי (<hr>), ובכותרות למניהן, אך גם כן HTML גירסה 4 מביאה לפנינו חידושים לצורת הכתיבה המסורתית, בדמות fieldset להגדרת אוסף שדות, ו-legend לקביעת הכותרת. בבריירת המחדל יוצגו האלמנטים על-ידי הדפדפן באופן דומה לשל ממשק משתמש סטנדרטי, אך באמצעות CSS וקצת דימיון נוכל לעצבם כרצוננו, בכפוף למגבלות של CSS גירסה 2, כמובן.
דוגמה לטופס שעושה שימוש באלמנטים של תוויות ומסגרות:
<form
action="http://www.note.com/success/public/freeform/mailto.cgi"
method="post" >
<input type=hidden name="to" value="xslf@hotmail.com">
<fieldset>
<legend>פרטים אישיים</legend>
<label for="name">שם:</label>
<input type="text" size="20" name="name" /><br />
<label for="mail">דואר אלקטרוני:</label>
<input type="text" size="20" name="mail" dir="ltr" /><br />
</fieldset>
<fieldset>
<legend>תגובה</legend>
<label for="message">הודעה:</label>
<textarea name="message" rows="4" cols="20"></textarea>
</fieldset>
<input type="submit" name="submit" value="שליחה" />
</form>
<input type=hidden name="to" value="xslf@hotmail.com">
<fieldset>
<legend>פרטים אישיים</legend>
<label for="name">שם:</label>
<input type="text" size="20" name="name" /><br />
<label for="mail">דואר אלקטרוני:</label>
<input type="text" size="20" name="mail" dir="ltr" /><br />
</fieldset>
<fieldset>
<legend>תגובה</legend>
<label for="message">הודעה:</label>
<textarea name="message" rows="4" cols="20"></textarea>
</fieldset>
<input type="submit" name="submit" value="שליחה" />
</form>
קישורים רלוונטיים:
שימוש בטפסים ב-HTML. מתוך מסמך המלצת w3c לגבי html 4.01
0 הפניות
Listed below are links to blogs that reference this entry: טפסת ברשת (עודכן).
TrackBack URL for this entry: http://www.xslf.com/mt/xslf-tb.cgi/18
שלום תומר, ותודה על התוספות. למעשה, יש בטפסים עוד הרבה (למשל הגדרת סדר מעבר טאבים או access keys) אבל לא רציתי לסבך את הקוראים :-)
לשאלתך, הקוד נעשה עם כיוון LTR בעזרת הוספת span או div עם dir="ltr" מסביב לטקסט הרלבנטי (תסתכל בקוד של הדף בשביל לראות דוגמא).
למקרה ולא הבנת את הרמיזה שמאחורי השאלה, התכוונתי לזה ש-MoveableTypes לא ממש איפשר לי ליישר את הטקסט לימין בדרך כזו, פשוט כי הוא מוגדר להסיר כל קוד HTML לא מורשה. (ובעברית מדוברת - "תערכי לי את התגובה, כי אני לא יכול" .)
ואם את כבר שם, אולי תשימי גם דוגמה של הקוד בפעולה? :-)
בכל מקרה, זהו, פחות-או-יותר, כל מה שצריכים לדעת כדי להתחיל להתעסק עם טפסים. אם רוצים תוצאות קצת יותר יעילות, כדי לקרוא את הדף של w3c המדובר (בקישור למעלה) כדי להרחיב את הידע, וקצת להסתובב ברשת בשביל ללמוד כמה "טריקים" (כמו איך שעושים באתרים דוגמת גוגל שהסמן קופץ אוטומטית לשדה הקלט של החיפוש מיד לאחר טעינת הדף).
התוספת שלך נוספה למדריך- תודה!
בשביל למנוע בלגן, מחקתי את התגובה שלך המכילה את מה שהוספתי למדריך. מקווה שזה לא מפריע לך.
רק רצוי להוסיף שיש גם דור חדש לטפסים באינטרנט שקוראים לו xForm והוא מבוסס XML
אני עדיין לא למדתי אותו לעומק (ואפשר לומר שאני מנסה)
ניסיתי לעשות טופס עם FEEDBACK.COM וקיבלתי הודעה שהאתר לא קיים
המממ... אכן נראה שהוא ירד לאחרונה מהרשת. זמן לחפש אתר חדש...
האם יש דרך להצפין את כתובת המייל בשדה ה-hidden
מפני הרובוטים? ובכלל מה סכנות האבטחה בשימוש עם CGI?
"תגובתך התקבלה בהצלחה. כדי להלחם בתופעת הספאם בתגובות, תגובתך נשלחה לאישור, ותופיע באתר כשאראה שהכל איתה בסדר (אני לא נוהגת לערוך תגובות).
אין צורך לשלוח את התגובה שוב!"
הממ על זה גם שאלתי..איך נלחמים בסאפם
תודה
אתר אחר – * שימו לב, החלק הזה לא נכתב על ידי, עד סוף ההודעה * :
השירות הוא שירות חינמי וללא כוונות רווח אשר נועד לענות לצרכי בעלי האתרים ביצירת קשר עם גולשיהם
דרך שירות זה תוכלו לשלוח כמות בלתי מוגבלת של שדות טופס ולהעביר בהם כמות בלתי מוגבלת של מידע (גם בעברית)
כאשר הנכם בונים את טופס יצירת הקשר ישנם שני שדות טופס אשר חייבים להמצא בתוכו.
כמו כן, שדות אלה אמורים להיות מסוג hidden, כלומר מוסתרים
שדות הטופס הם:
SendTo - כאן תרשמו את את כתובת האימייל שלכם
redirect - כאן תרשמו את הדף אליו יגיעו לאחר השליחה
לדוגמא:
את ה-action של הטופס יש לכוון ל-
http://www.hamaccabim.net/tzah/send.asp
הנה דוגמא לטופס שתוכלו לשלוח:
שמך:
מין:
כתובת:
שם האמא:
שם האבא:
;
זהו טופס לדוגמא, תוכלו לשנות ולהוסיף שדות טופס ככל שתרצו, רק שימו לב ששדות הטופס SendTo ו- redirect כלולים ...
(כמו שאתם רואים אפשר גם להשתמש בעברית)
לגבי ה FORM בעברית, זה נחמד מאד. לפחות עכשיו זה מגיע כמו שצריך.
אבל....כל האנגלית, כולל מספרים וטקסט הפוכים לגמרי בדואר שמגיע מהאתר (אני מדבר על צח).
נחמד, אבל דורש שיפור.
מייק- בדוק שהסקריפט בו אתה משתמש לשליחת הדואר משתמש בקידוד נכון. נסה גם לשנות קידוד ידנית בתוכנת הדואר שלך (יש תוכנות דואר בהן אפשר לקבוע ידנית את כיווניות הטקסט- נסה זאת).
ב"ה
או קיי הבנתי את הבניה של הטפסים אבל רציתי לדעת איך אני שומר את המידע המתקבל?
איפה אני שומר אותו הבנתי שבתוך בסיס מידע , אני מכיר די טוב את אקסס אבל רציתי לדעת איך אני עושה את הקישור בינהם?
יש איזה מדריך אולי שמסביר את זה טוב???