תגי קלט חכמים בHTML5 עבור טפסים – קל ומעולה!

get_the_title

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

אז מה במאמר הזה?

הדגמה של כמה תגי קלט חכמים (input) אשר מגיעים אלינו באדיבות בגרסה החמישית של HTML. לא נדגום את כל התגים אלא רק את אלה שמעניינים אותנו. היתרון ברור לאחר שמכניסים מידע שגוי לתוך שדה שהוגדר עבור ערך מסוים. לדוגמה, נסו בשדה הקלט של דואר אלקטרוני להכניס כתובת אימייל לא תקנית וראו מה התגובה.

שדה קלט לתאריך

* שדה קלט שמאפשר לבחור תאריך – מתאים את עצמו לשפת הדפדפן של הגולש!

קוד להדגמה

<input type="date" />

דוגמה חיה

שדה קלט עבור חודש

* שדה קלט שמאפשר לבחור חודש – מתאים את עצמו לשפת הדפדפן של הגולש!

קוד להדגמה

<input type="month" />

דוגמה חיה

שדה קלט עבור שבוע

* שדה קלט שמאפשר לבחור שבוע – מתאים את עצמו לשפת הדפדפן של הגולש!

קוד להדגמה

<input type="week" />

דוגמה חיה

שדה קלט עבור זמן

* שדה קלט שמאפשר לבחור שעה / זמן – מתאים את עצמו לשפת הדפדפן של הגולש!

קוד להדגמה

<input type="time" />

דוגמה חיה

שדה קלט שמאפשרת לבחור צבע

* הדרך הכי קלה ליצור תיבת לבחירת צבע (בקלות)

קוד להדגמה

<input type="color">

דוגמה חיה

שדה קלט עבור כתובת אתר

* נסו להכניס כתובת אתר לא תקני

קוד להדגמה

<input type="url" />

דוגמה חיה

שדה קלט לדואר אלקטרוני

* נסו להכניס כתובת אימייל לא תקנית

קוד להדגמה

<input type="email">

דוגמה חיה

שדה קלט של מספר

* שדה קלט שמאפשר להכניס רק מספר! נסו להכניס תווים להדגמה

קוד להדגמה

<input type="number">

דוגמה חיה

שדה קלט עבור טווח

* שדה קלט אלגנטי שמאפשר לבחור מספר מתוך טווח מוגדר מראש

קוד להדגמה

<input type="range" min="1" max="100" />

דוגמה חיה

זה הופך את החיים לקלים בסלולרי!

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

מקלדת טקסט

שדה קלט טקסט

שדה קלט מסוג טקסט בHTML5 יגרום למקלדת של הסלולרי לעבור למצב אותיות!

מה זאת אומרת שדה קלט מסוג טקסט?

<input type="text"/>
מקלדת אימייל

שדה קלט אימייל

שדה קלט מסוג אימייל בHTML5 יגרום למקלדת להציג אייקון של אימייל (שווה!)

מה זאת אומרת שדה קלט מסוג אימייל?

<input type="email"/>
מקלדת מספר

שדה קלט מספר

שדה קלט מסוג מספר בHTML5 יגרום למקלדת להציג את פאנל המספרים.

מה זאת אומרת שדה קלט מסוג מספר?

<input type="number"/>
מקלדת URL

שדה קלט כתובת אתר

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

מה זאת אומרת שדה קלט מסוג מספר?

<input type="url"/>
מקלדת טלפון

שדה קלט טלפון

שדה קלט מסוג טלפון בHTML5 יגרום למקדלת להציג את לוח החיוג הפנימי!

מה זאת אומרת שדה קלט מסוג טלפון?

<input type="tel"/>

שימושי לגמרי ודיי מדליק

אם אתם חדשים לHTML5 אז תתחדשו – גילינו ביחד המון תכונות מעניינות אשר משדרגות את הטפסים שלנו בקלות ומוסיפים להם המון פוזה בסלולרי. אם אתם משתמשים בוורדפרס אז שווה לדעת כי תוספים כמו Contact Form 7 כבר משתמשים בHTML בצורה מובנית אז אתם פטורים מהמאמץ. אני מקווה שאהבתם ושיהיה המון בהצלחה. שווה להשקיע בלייק – זה מעודד אותנו לכתוב עוד מדריכים (והמון תודה).

  • אהבתם? שתפו!