מבט לתוך HTML5 טפסים סוגי קלט תאריך, צבע טווח

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

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

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

בורר התאריכים

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

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

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

עם זאת, כל דפדפנים התומכים כעת אשר סוג קלט, כלומר Chrome, Opera ו- Safari מציג את סוג הקלט קצת שונה, מה שעלול להוביל לבעיה של חוסר עקביות בחוויית המשתמש, והנה איך זה נראה.

כמה הבדלים בולטים ניתן לראות במבט אחד מן המסך לעיל; האופרה השתמשה בקיצור האנגלי בן שלוש האותיות עבור שם הימים - Sun, Mon, Thu וכן הלאה, בעוד ש- Chrome השתמש בשפה המקומית שלי, הספארי - לעומת זאת - עובד די מוזר, הוא לא מציג יומן בכלל.

יש גם כמה חדשים קלט IT post בחר תאריך או שעה באופן ספציפי יותר; חודש, שבוע, זמן, תאריך שעה ו datetime-local, שבו אנו בטוחים כי מילת המפתח עצמה היא מאוד desctiptive לספר מה היא עושה.

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

• הדגמה

בוחר צבעים

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

שוב, הדפדפנים, במקרה זה Chrome ו- Opera, מעבירים סוג קלט זה מעט שונה;

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

יתר על כן, אנו יכולים גם להגדיר את צבע ברירת המחדל עם ערך תכונה, כדלקמן;

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

הצגת ערך הצבע

במקום לפתוח את Photoshop רק כדי להעתיק את hex פורמט צבע, אתה יכול למעשה ליצור כלי פשוט על סוג קלט זה לעשות את העבודה, שכן צבע שנוצר כבר הקסדצימלי זה יהיה ממש קל;

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

אנחנו צריכים את jQuery מקושר ב ראש של המסמך שלנו. לאחר מכן אנו מאחסנים את ערך הצבע ואת הערך החדש שנוסף div במשתנה, כך;

 צבע var = $ ('# colorpicker'). val (); hexcolor = $ ('# hexcolor'); 

קבל את הערך ההתחלתי מ #בוחר צבעים;

 hexcolor.html (צבע); 

... ולבסוף לשנות את הערך כאשר נבחר צבע הוא השתנה גם;

 $ ('# colorpicker') על ('שינוי', function () hexcolor.html (this.value);); 

זהו זה; עכשיו בואו לראות את זה בפעולה.

• הדגמה Colorpicker

טווח

ה טווח סוג קלט מאפשר לנו להוסיף המחוון בדפדפן לבחירת מספר בטווח שבו אנו יכולים למצוא גם ב- jQuery ממשק המשתמש.

קטע הקוד לעיל הוא בסיסי של יישום טווח סוג קלט. אנו יכולים גם לשנות את כיוון המחוון לכיוון אנכי באמצעות CSS, כדלקמן;

 קלט [type = range] width: 20px; גובה: 200px; -webkit- המראה: המחוון-אנכי;  

בנוסף, אנו יכולים להגדיר את דקות ו מקסימום טווח של מספרים, למשל;

בקטע הבא הגדרנו את דקות אפ 225 עבור המקסימום. כאשר הם לא צוין במפורש, כברירת מחדל הדפדפן ייקח 0 עבור המינימום 100 עבור המקסימום.

הצג את המספר

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

קודם אנו מוסיפים ריק div ליד הקלט, בסגנון div מספיק כדי שזה ייראה כמו קופסה.

ואז לשים את הקוד הבא אשר יעשה את הקוד הנ"ל ב בורר strongcolor, למעט עכשיו אנחנו מקבלים את הערך של המחוון.

 $ (פונקציה) (var # = (var val = $ ('# slider'). val () = output = $ ('# output'), output.html (val), $ ('# slider' ) output.html (this.value););); 

עכשיו, אתה יכול לראות את ההדגמה. רק תזכורת, להציג את ההדגמה בדפדפנים אלה - Chrome, Opera ו- Safari, מכיוון ש- Firefox ו- IE אינם תומכים טווח סוג קלט כרגע.

• הדגמה טווח

מילים סופיות

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

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

• הדגמה
• הורד מקור

לקריאה נוספת

להלן כמה קישורים שימושיים לך לחפור יותר לתוך טפסים HTML.

• תכונות חדשות בפורמט HTML5 - Opera Opera.
• המדינה הנוכחית של טופסי HTML5 - Wufoo
• תכונות HTML5 - w3school.org
• מתי אוכל להשתמש בטופסי HTML5? - CanIUse.com