HTML 5 Forms

HTML 5 מספקת לנו שלל של אפשרויות ליצירת טפסים (forms) עם ולידציה ופלייסהולדרים ואף autofocus ללא כל בעיה ובקלות. כמו כל תקן של HTML 5, עדיין יש בו שינויים אך כרום ופיירפוקס (גרסה 4 ומעלה) כבר תומכים בו וניתן להשתמש בו בקלות מרובה.

כיוון שמדובר בתקן שעדיין לא מיושם במלואו – ניתן לבדוק את רמת התמיכה של כל דפדפן בתכונות השונות באתר הזה: http://wufoo.com/html5.

required

בטופס הקטן הזה ה-input הוגדר כנדרש, נסו לשלוח אותו בלי למלא אותו:

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

איך עשיתי את זה? פשוט מאד – הוספת המילה required לשדה באופן הבא:

<form id='example'>
	<input type='text' required/>
	<button type='submit'>שליחה</button>
</form>

autofocus

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

מייד עם טעינת הדף הפוקוס של המשתמש ילך לדפדפן. המשתמש יכול להקליד מיד והקלט ייכנס אל השדה הזה. גם זה קל מאד לביצוע באמצעות הכנסת המילה autofocus. והנה הדוגמא:

<input type='text' autofocus/>

Placeholder

שימו לב לשדה הבא (ונסו להקליד בתוכו דבר מה!):

הדבר הזה נקרא placeholder וממש קל לממש אותו. פשוט מוסיפים את התכונה placeholder ומה אנו רוצים שיהיה בו. למשל:

<input type='text' placeholder='נסו להקליד בתוך השדה'/>

ולידציות

עם HTML 5 Forms קל מאד לעשות ולידציות. מה שפעם הצריך סקריפטים ארוכים מאד, היום הופך לפשוט. יש לנו מספר סוגים חדשים של פקדים שכל אחד מהם מבצע ולידציה בהתאם לסוג שלו. בואו ואדגים באמצעות סוג E-mail. נסו למלא את השדה הבא במשהו שהוא לא כתובת מייל ולידית ולחצו על שליחה. הודעת השגיאה בוא תבוא.

איך עשיתי את זה? פשוט ציינתי את ה-type:

<form id='example2'>
	<input id='email' name='email' type='email' placeholder='[email protected]' />
	<button type='submit'>שליחה</button>
</form>

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

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

כך זה נראה:

<form id='example3'>
	<input pattern="[0-9][A-Z]{3}" title="A part number is a digit followed by three uppercase letters." />
	<button type='submit'>שליחה</button>
</form>

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