מהם טפסים ולמה הם משמשים
טפסים מקוונים הם אובייקטים שאוספים מידע שהגולש באתר מזין ומעבירים אותו אל השרת להמשך טיפול.
דוגמאות לטפסים נפוצים שיש באתרי אינטרנט: שדה החיפוש באתר, טופס יצירת קשר, טופס הרשמה לרשימת התפוצה ועוד.
טפסים יוצרים באמצעות התגית form.
טופס יכול לכלול שדות כמו שדה טקסט חופשי, שדה להזנת סיסמה, כפתורי רדיו, כפתורים לבחירה מרובה ועוד.
כל טופס צריך לכלול כפתור שהקלקה עליו מבצעת את שליחת המידע שהוזן לשרת.
יצירת טופס פשוט ב-HTML
נדגים שימוש בטפסים באמצעות יצירת טופס פשוט.
<form method="post" action="/thankyou" enctype="multipart/form-data">
<label for="input_fullname">Full name:*</label>
<input type="text" name="fn" id="input_fullname" />
<label for="input_email">Email:*</label>
<input type="email" name="em" id="input_email" />
<label for="input_phone">Phone:</label>
<input type="tel" name="ph" id="input_phone" />
<button type="submit" name="send">SEND</button>
</form>זהו טופס יצירת קשר בסיסי. הטופס מבוסס על התגית form, כאשר בתוכה מקוננות התגיות label, input, button.
תגיות ה-input יוצרות שדה להזנת פרטים. השדה יכול להיות מסוגים שונים שנקבעים במאפיין ה-type. במקרה שלנו, ערך text מציין שדה טקסט חופשי, ערך email מציין שדה של מייל וערך tel מציין שדה של טלפון. מומלץ מאוד שכל שדה input יהיה עם ה-type הנכון, ככל שהדבר אפשרי, כיוון שדפדפנים שונים (במיוחד בסלולר) מסיקים מהו סוג השדה ובהעת הזנת נתונים בשדה מציגים לגולש בעמוד מקלדת עם האפשרויות הרלוונטיות (לדוגמה: בשדה input מסוג tel תיפתח מקלדת עם מספרים).
תגית ה-label יוצרת כותרת המקושרת ל-input. נשים לב שערך המאפיין for של התגית label קובע לאיזה input מקושרת הכותרת (לפי ה-id שלו). כותרות לשדות בטפסים תמיד ניצור עם label ולא סתם עם div, במטרה להקנות סמנטיקה לטופס וכדי שמנועי החיפוש וכלים להנגשה יבינו שמדובר בכותרת המשוייכת לשדה ולא בסתם טקסט. נשים גם לב שהקלקה על ה-label בדפדפן יוצרת אפקט של פוקוס על שדה ה-input.
תגית ה-button יוצרת כפתור לשליחת הטופס. במקום תגית ה-button ניתן להשתמש בשדה input עם type עם הערך submit, אבל אנו ממליצים להמנע מכך, למען שמירה על קטע HTML קריא יותר וסמנטי יותר.
ערכי ה-name של התגיות input ו-button מקנות שם לתגיות אלו, וישמשו בהמשך לזיהוי השדות שהוזנו בצד השרת (בעת בדיקת הטופס).
נראה שדרוג לטופס שיצרנו.
<form method="post" action="/thankyou" enctype="multipart/form-data">
<label for="input_fullname">Full name:*</label>
<input type="text" name="fn" id="input_fullname" title="Enter full name" placeholder="John Doe" required="required" pattern=".{2,}" value="Arnold Schwarzenegger" />
<label for="input_email">Email:*</label>
<input type="email" name="em" id="input_email" title="Enter email" placeholder="email@example.com" required="required" value="" />
<label for="input_phone">Phone:</label>
<input type="tel" name="ph" id="input_phone" title="Enter phone" placeholder="03-9999999" pattern="[0-9\-\+\s]{7,}" value="" />
<button type="submit" name="send">SEND</button>
</form>גירסה זו של הטופס כוללת מאפיינים נוספים לתגיות ה-input והופכות את הטופס לנגיש יותר ועם חוויית משתמש טובה יותר.
מאפיין title - מאפיין זה קובע תאור קצר שיוצג לגולש בעת מעבר עכבר על השדה.
מאפיין placeholder - מאפיין זה קובע טקסט "תופס מקום" שיוצג בשדה כל עוד לא הוזן טקסט לתוכו.
מאפיין pattern - מאפיין זה קובע את התבנית המותרת להזנת הנתונים בשדה באמצעות ביטוי רגולרי (למי שלא מכיר, נשאיר את זה למאמר אחר בהרחבה). בדוגמה שלנו למשל, קבענו כי שדה השם חייב להיות באורך של לפחות 2 תווים, ושדה הטלפון חייב להיות באורך של לפחות 7 תווים ולכלול רק ספרות, את הסימנים + או - או רווחים.
מאפיין value - מאפיין זה קובע את הערך שיוצג בשדה. ברוב המקרים נרצה שהערך יהיה ריק (כדי שהגולש ימלא בעצמו את הטופס), אבל אם יוצרים טופס שממלאים אותו (או את חלקו) אוטומטית מראש (נניח על סמך זיהוי של הלקוח שמחובר למערכת) נוכל לטעון לו ערכים ראשונים בצורה זו.
שליחת טפסים באמצעות post ובאמצעות get
עם ההקלקה על כפתור השליחה, עובר הדפדפן לעמוד הרשום במאפיין action של התגית form ושולח את נתוני הטופס שמולאו לשרת.
שליחת הנתונים מהדפדפן לשרת יכולה להתבצע באמצעות אחת משתי שיטות אפשריות: get או post. בחירת השיטה איתה רוצים לעבוד נקבעת במאפיין method של התגית form. בדוגמאות לעיל, בחרנו להשתמש בשיטת post.
שיטת get מעבירה את הדפדפן לכתובת המופיעה ב-action, כאשר הנתונים שמולאו בטופס מועברים כפרמטרים לכתובת. כלומר, ה-URL אליו מועברים עם ההקלקה על כפתור השליחה כולל בצורה חשופה את הנתונים שמולאו בטופס.
שיטת post מעבירה את הנתונים שמולאו בטופס לשרת בצורה ישירה, ולא כחלק מפרמטרים בכתובת שב-action. ה-URL אליו מועברים עם ההקלקה על כפתור השליחה כולל רק את הכתובת המופיעה ב-action, ללא פרמטרים נוספים.
במקרים בהם נרצה שהנתונים שמולאו בטופס יחשפו לגולשים (נניח בטופס חיפוש באתר) נשתמש בשיטת get ואילו במקרים בהם נרצה להצפין את נתוני הטופס (נניח בטופס התחברות שבו מזינים שם וסיסמה) נשתמש בשיטת post.
כאשר משתמשים בשיטת post להעברת המידע, המאפיין enctype קובע את קידוד המידע (האופן בו המידע המועבר לשרת מקודד).
ניתן לקודד את המידע כ- text/plain במקרה של מידע טקסטואלי בלבד, כ- multipart/form-data במקרה של מידע בינארי (נניח כאשר הטופס מאפשר העלאת קבצים) או כ- application/x-www-form-urlencoded במקרה של קידוד התווים למבנה URL תיקני (נניח, התו רווח מקודד להיות + ואותיות עבריות מקודדות להיות בקוד HEX עם הסימן %).
בכל מקרה של ספק, אנו ממליצים להשתמש בשליחת נתונים לשרת בשיטת post ובקידוד multipart/form-data.
תגית input ב-HTML
התגית input יכולה לכלול סוגי קלט שונים מהגולש. הדגמנו קודם שימוש באפשרויות text, email, tel ונדגים עכשיו אפשרויות נוספות.
הזנת סיסמה (כאשר הגולש ממלא את השדה, מוצגות נקודות במקום אותיות):
<label for="input_password">Password:</label>
<input type="password" name="pwd" id="input_password" />
תיבת רדיו לבחירת אפשרות אחת מתוך מספר אפשרויות:
<input type="radio" name="gender" id="gender_male" value="male" checked="checked" /> <label for="gender_male">Male</label>
<input type="radio" name="gender" id="gender_female" value="female" /> <label for="gender_female">Female</label>המאפיין checked בו השתמשנו קובע את הבחירה הראשונית (ברירת המחדל). אין חובה לעשות שימוש במאפיין checked, אבל אם כן משתמשים בו, יש להקפיד לשים אותו באפשרות אחת בלבד (לא ניתן לבחור יותר מאפשרות אחת בתיבת רדיו).
תיבת בחירה מרובה (check box) לבחירה של כמה אפשרויות יחד:
<input type="checkbox" name="age" id="age_baby" value="baby" /> <label for="age_baby">0-4</label>
<input type="checkbox" name="age" id="age_child" value="child" checked="checked" /> <label for="age_child">5-12</label>
<input type="checkbox" name="age" id="age_teenager" value="teenager" /> <label for="age_teenager">13-19</label>
<input type="checkbox" name="age" id="age_adult" value="adult" checked="checked" /> <label for="age_adult">20-59</label>
<input type="checkbox" name="age" id="age_old" value="old" /> <label for="age_old">60+</label>גם כאן נוכל להשתמש במאפיין checked כדי לאתחל את השדה עם מספר אפשרויות שיהיו מסומנות מלכתחילה כברירת מחדל. בתיבת בחירה מרובה ניתן לשלב את המאפיין checked ביותר מאפשרות אחת.
תגית textarea ב-HTML
ניתן ליצור תיבה להזנת טקסט באמצעות התגית textarea.
בניגוד לתגית input עם המאפיין text, כאן לא מדובר בשורת טקסט יחידה, אלא באפשרות להזין מספר שורות.
נראה דוגמה:
<textarea name="comments" rows="1" cols="1" title="Enter your comments here" placeholder="Enter your comments ..."></textarea>נשים לב כי זוהי תגית המפוצלת לתגית פתיחה ולתגית סגירה. נוכל להזין טקסט בין תגית הפתיחה לסגירה, והוא יוצג בתוך תיבת הטקסט.
המאפיינים rows ו-cols קובעים את גודל תיבת הטקסט (rows לשורות, cols לעמודות). מומלץ להשתמש במידות 1x1 תמיד, ולעצב את מימדי התיבה באמצעות קובץ CSS.
