Warning: Use of undefined constant get_the_title - assumed 'get_the_title' (this will throw an Error in a future version of PHP) in /home/customer/www/sagive.co.il/public_html/wp-content/themes/sagive/functions/misc-functions.php on line 305
שפת 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"/>
שדה קלט כתובת אתר
שדה קלט מסוג מספר בHTML5 יגרום למקלדת תווים רלוונטיים לכתובת אתר.
מה זאת אומרת שדה קלט מסוג מספר?
<input type="url"/>
שדה קלט טלפון
שדה קלט מסוג טלפון בHTML5 יגרום למקדלת להציג את לוח החיוג הפנימי!
מה זאת אומרת שדה קלט מסוג טלפון?
<input type="tel"/>
שימושי לגמרי ודיי מדליק
אם אתם חדשים לHTML5 אז תתחדשו – גילינו ביחד המון תכונות מעניינות אשר משדרגות את הטפסים שלנו בקלות ומוסיפים להם המון פוזה בסלולרי. אם אתם משתמשים בוורדפרס אז שווה לדעת כי תוספים כמו Contact Form 7 כבר משתמשים בHTML בצורה מובנית אז אתם פטורים מהמאמץ. אני מקווה שאהבתם ושיהיה המון בהצלחה. שווה להשקיע בלייק – זה מעודד אותנו לכתוב עוד מדריכים (והמון תודה).
4 תגובות