yuval@computrade.co.il
רח אריה שנקר 1, הרצליה
© כל הזכויות שמורות לקומפיוטרייד

פקדים חדשים ב HTML5 FORMS 

יובל ישי 30.11.11

במאמר זה נבדוק את היכולות החדשות שהוצגו בטפסים של דפי האינטרנט ( HTML Forms ).
טפסי אינטרנט נמצאים בשימוש נרחב ומהווים את אחד מאבני היסוד בבניית אתרי אינטרנט. בכל זאת HTML5   באה והציגה שינויים ותוספות משמעותיים באפשרויות הניתנות ע"י טפסי אינטרנט.

עד כה הכרנו סוגים של שדות input כגון:  text, checkbox.
לשדות אלה נוספו סוגים חדשים כגון:

tel  - מציין שדה מסוג מספר טלפון.
email - מציין שדה להזנת כתובת מייל.
url - מציין שדה להזנת כתובת אינטרנט.
search -מציין שדה לביצוע חיפוש ע"י מנועי חיפוש.

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









.
מקלדת אייפון מותאמת לשדה מסוג אימייל
מקלדת אייפון מותאמת לשדה טקסט רגיל 
 

פקדים נוספים

range - פקד לבחירה מספרית בטווח מסוים של ערכים, בד"כ מוצג כסרגל גלילה מערך מינימלי לערך מקסימלי

הקוד הבא יציג למשתמש סרגל גלילה לבחירת ערך מטווח ערכים שבין 0 ל 100 כפי שהוגדרו מראש כערכים המינימליים והמקסימליים לפקד:
בנוסף ניתן לראות את השימוש שנעשה ב fieldset כדי לציין הקבצה של מס' פקדים לקבוצה אחת בטופס, ואת השימוש באלמנטים: label ו legend.
דוגמת קוד לשימוש באלמנטים: fieldset, legend, label, range
תוצאה בדפדפן Google Chrome

פקד Date

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

דוגמת קוד לשימוש באלמנטים: date, placeholder
תוצאה בדפדפן Opera

placeholder - משמש להגדרת תצוגת טקסט שתופיע בתוך השדה ותעלם עם תחילת הקשת הערך ע"י המשתמש.
autocomplete - אומר לדפדפן האם לשמור את הערכים המוכנסים לשימוש עתידי או לא. למשל בהכסת כרטיס האשראי לא נרצה שהדפדפן ישמור את הערך לפעמים הבאות.

אימות לטפסים

required - אומר לדפדפן שהשדה הוא חובה.
pattern - מאפשר למפתח להגדיר לכל שדה תצורה של  regular expression. הדפדפן יבדוק את תאימות הערך שהוכנס מול התבניתהנדרשת.
maxLength -  הדפדפן יבדוק שהערך שהתווים שהוכנסו לשדה לא חורגים מכמות התוים המצווינת.
min - הגדרת ערך מספרי מינימלי לשדה.
max - הגדרת ערך מספרי מקסימלי לשדה.
formNoValidate - נותן את האפשרות לשליחת הטופס ללא הפעלת אימות לנתוני הטופס, למשל לצורך שמירה זמנית של טופס מורכב.

ניתן לבצע פעולות הקשורות לאימות של שדות ע"י שימוש ב api שמגיע כחלק מ HTML5.

למשל להגדרת הודעת שגיאה מותאמת אישית יש להשתמש במתודת: setCustomValidity  לדוגמא:

passwordField.setCustomValidity("Password values do not match.")

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

passowrdField.addEventListener("invalid", invalidHandler, false );
 
לסיכום

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