לעבור (חלקית) ל-HTML 5 מבלי לפגוע בשימושיות של הטופס

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

נעבור על כמה דברים שאפשר לשנות בקלות בקוד מבלי לפגוע בשימושיות שלו.

DOCTYPE

מדהים איך משהו שהיה כמעט קללה בעבר (לך תמצא מה ה-DOCTYPE הרלוונטי!) הפך כיום ל-

<!DOCTYPE HTML>

פשוט וקליל.

INPUT

כאן נכנסת הגדולה האמיתית של HTML 5. השימוש ב-INPUT היה כל כך נפוץ עד היום, לכל כך הרבה צרכים שונים, שזה היה עניין של זמן עד שיעשו משהו גאוני. בעבר, HTML נבנתה כך שאם היו מחסירים את סיווג ה-INPUT, השפה הייתה מניחה שהתכוונת ל-TYPE=TEXT. בזכות זה, היום כל הסוגים החדשים שנוצרו נופלים חזרה לאחור ל-TYPE=TEXT, ולכן ניתן לשנות את ה-TYPE לסוגים החדשים מבלי לחשוש מנפילה בשימושיות.

למה שנרצה לשנות את זה, אתם בטח שואלים. הסיבות רבות, אבל בעיקר: מערכות ההפעלה של המובייל מתאימות את המקלדת אותה הן מקפיצות לשדה אותם אנחנו ממלאים. כך שאם אנחנו מקלידים אימייל, לדוגמא, מקש "@" או "@gmail.com" ישתרבבו למקלדת האותיות, בעוד שתווים כמו $ או # יעלמו. בנוסף, נוספות פונקציונאליות חדשות (לדוגמא, X קטן שמוחק את התוכן שהוקלד).

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

TYPE=SEARCH

הלהיט התורן, שווה להחליף כל TYPE=TEXT רגיל אליו, כי הוא לא משנה כמעט כלום, רק מוסיף X קטן בתוך התא שמאפשר מחיקה של התוכן.

TYPE=EMAIL

מאפשר מקלדת EMAIL במידה והדפדפן תומך בזה.

TYPE=URL

מאפשר מקלדת נוחה להקלדת כתובת במידה ונתמכת, לדוגמא מתווספים מקשים כגון ".com" או "/" במקלדות מובייל.

TYPE=COLOR

פותח Color Picker שמאפשר לבחור צבע.

TYPE=DATE

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

TYPE=NUMBER (כולל תתי פקדים כגון MAX, MIN, STEP וכו')

מאפשר בחירה של מספר ופקדים כגון העלאה והורדה של מדרגה.

VALIDATE

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

<input type="email" required validate>

האימות מתבצע אוטומטית על ידי HTML 5, אבל אם לא רוצים אותו ניתן לבטל אותו.

<form novalidate>

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

AUTOFOCUS

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

<input name="search" type="search" autofocus>

PLACEHOLDER

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

<input name="search" type="search" placeholder="Please Enter Your Query">

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

הוסף תגובה