דף הכניסה של מדריך HTML5 עם טופסי HTML5

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

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

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

קלט HTML5

בוא נסתכל על הסימון הבא.

 
 
 
 
דוא"ל 
 
סיסמה 
 
 
 
 
 
 

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

בעל המקום

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

תכונה נדרשת

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

בורר חדש מוצג גם ב- CSS3, :נדרש כדי למקד לשדות עם נדרש תכונה. הנה דוגמה;

 input: required border: 1px solid red;  

סוג קלט דוא"ל

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

שימוש בסוגי קלט בדוא"ל יכול גם לתת חוויה טובה יותר למשתמשים ניידים, כמו משתמשי iPhone ו- Android, שבהם הוא יציג את מיטוב על המסך המקלדת עם ייעודי “@” כדי לעזור להקליד את כתובת הדוא"ל מהר יותר.

החסרונות

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

ה מציין מיקום תכונה, נתמך רק בדפדפנים מודרניים - Firefox 3.7+, Safari 4+, Chrome 4+ ו- Opera 11+. אז, אם אתה צריך את זה כדי לעבוד בדפדפנים שאינם נתמכים, אתה יכול להשתמש polyfills זה יחד עם Modernizr.

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

אז, באמצעות JavaScript כדי לאמת את השדה הנדרש הוא (עד כה) אפשרות טובה יותר.

 ("שם משתמש"). אם (x == null || x == "") התראה ("אנא מלא את שם המשתמש"); חזר כ  

עיצוב הטפסים

בסדר, עכשיו בואו לקשט את טופס ההתחברות שלנו עם CSS. ראשית אנו נותנים את הרקע עץ דפוס ב HTML תג.

 html background: url ('wood_pattern.png'); font-size: 10pt;  

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

 .loginform ul ריפוד: 0; שוליים: 0;  .loginform li display: inline; צף: משמאל;  

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

 תווית display: block; צבע: # 999;  .cf: before, .cf: after content: ""; התצוגה: Table;  .cf: אחרי ברורני you בשתי;  .cf * zoom: 1; : focus outline: 0;  

ב CSS3 יש לנו את בורר השלילה. אז, נשתמש בו כדי למקד תשומות חוץ מה שלח סוג, אשר במקרה זה יכוון את הדוא"ל ואת הסיסמה קלט;

 .inputform input: לא ([type = submit]) padding: 5px; margin-right: 10px; גבול: 1px מוצק rgba (0, 0, 0, 0.3); border-radius: 3px; box-shadow: inset 0px 1px 3px 0px rgba (0, 0, 0, 0.1), 0px 1px 0px 0px rgba (250, 250, 250, 0.5);  

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

 .inputform input [type = submit] border: 1px solid rgba (0, 0, 0, 0.3); רקע: # 64c8ef; / * דפדפנים ישנים * / background: -Moz-linear-gradient (למעלה, # 64c8ef 0%, # 00a2e2 100%); / * FF3.6 + * / background: -webkit-gradient (ליניארי, שמאלי למעלה, שמאל למטה, צבע עצור (0%, # 64c8ef), צבע להפסיק (100%, # 00a2e2)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (למעלה, # 64c8ef 0%, # 00a2e2 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (למעלה, # 64c8ef 0%, # 00a2e2 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (למעלה, # 64c8ef 0%, # 00a2e2 100%); / * IE10 + * / רקע: ליניארי- gradient (לתחתית, # 64c8ef 0%, # 00a2e2 100%); / * W3C * / מסנן: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef", endColorstr = "# 00a2e2", GradientType = 0); / * IE6-9 * / color: #fff; ריפוד: 5px 15px; margin-right: 0; margin-top: 15px; border-radius: 3px; טקסט צל: 1px 1px 0px rgba (0, 0, 0, 0.3);  

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

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

מילים סופיות

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

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