صفحة تسجيل الدخول إلى HTML5 التعليمية مع نماذج HTML5

HTML5 يجلب العديد من الميزات والتحسينات ل نماذج الويب, هناك سمات وأنواع المدخلات الجديدة التي تم تقديمها أساسا لجعل حياة مطوري الويب أسهل وتوفير تجربة أفضل لمستخدمي الويب.

لذلك ، سننشئ في هذا المنشور صفحة تسجيل دخول باستخدام أشكال HTML5 لنرى كيف تعمل الميزات المضافة الجديدة.

• عرض
• تحميل المصدر

إدخال HTML5

دعونا نلقي نظرة على العلامات التالية.

 
 
 
 
البريد الإلكتروني 
 
كلمه السر 
 
 
 
 
 
 

إذا كنت تعمل مع نماذج HTML من قبل ، فسيبدو ذلك مألوفًا. ولكن ، ستلاحظ أيضًا وجود اختلافات. المدخلات لها نائب و مطلوب السمات ، والتي هي سمات جديدة في HTML5.

نائب

ال نائب تسمح لنا السمة بتقديم نص أولي في الإدخال الذي سيختفي عندما يكون في التركيز الحالة أو يتم ملؤها. سابقًا ، اعتدنا أن نفعل ذلك باستخدام جافا سكريبت ، لكن الآن أصبح الأمر أسهل بكثير مع هذه السمة الجديدة.

السمة المطلوبة

ال مطلوب ستقوم السمة بتعيين الحقل ليكون إلزاميًا ، وبالتالي يجب عدم تركه فارغًا قبل إرسال النموذج ، لذلك عندما لا يملأ المستخدم الحقل ، سيظهر الخطأ التالي.

تم تقديم محدد جديد أيضًا في CSS3, :مطلوب لاستهداف الحقول مع مطلوب صفة، عزا. هنا مثال؛

 المدخلات: مطلوب الحدود: 1px الصلبة الأحمر ؛  

نوع إدخال البريد الإلكتروني

نوع الإدخال الأول هو البريد الإلكتروني وهو في الواقع نوع الحقل الجديد وأضاف في HTML5 كذلك. ال البريد الإلكتروني سوف النوع يعطي التحقق من صحة عنوان البريد الإلكتروني الأساسي في هذا المجال. عندما لا يملأ المستخدم الحقل بعنوان بريد إلكتروني ، سيعرض المتصفح الإخطار التالي ؛

يمكن أن يوفر استخدام أنواع مدخلات البريد الإلكتروني تجربة أفضل لمستخدمي الأجهزة المحمولة ، مثل مستخدمي iPhone و Android ، حيث سيتم عرضه البريد الإلكتروني الأمثل لوحة المفاتيح على الشاشة مع مخصص “@” زر للمساعدة في كتابة عنوان البريد الإلكتروني بشكل أسرع.

السلبيات

ميزات النماذج الجديدة المقدمة في HTML5 قوية وسهلة التنفيذ ، لكنها لا تزال تفتقر إلى بعض المناطق. على سبيل المثال؛

ال نائب صفة، عزا, معتمد فقط في المتصفحات الحديثة - Firefox 3.7+ و Safari 4+ و Chrome 4+ و Opera 11+. لذلك ، إذا كنت بحاجة إلى العمل في متصفحات غير مدعومة ، فيمكنك استخدام ملفات polyfills هذه بالتعاون مع Modernizr.

الشيء نفسه ينطبق على مطلوب صفة، عزا. لا يمكن تخصيص إشعار الخطأ ، سيبقى الخطأ “الرجاء ملء هذه الخانة” عوضا عن “يرجى ملء اسمك الأول”, يقتصر دعم السمة هذا أيضًا على أحدث المتصفحات.

لذلك ، فإن استخدام جافا سكريبت للتحقق من صحة الحقل المطلوب هو (حتى الآن) خيار أفضل.

 دالة validateForm () var x = document.forms ["login"] ["اسم المستخدم"]. value؛ if (x == null || x == "") alert ("الرجاء ملء اسم المستخدم")؛ عودة كاذبة؛  

تصميم النماذج

حسنًا ، دعنا الآن نقوم بتزيين نموذج تسجيل الدخول باستخدام CSS. أولا سوف نعطي خلفية نمط الخشب في أتش تي أم أل بطاقة.

 html background: url ('wood_pattern.png')؛ حجم الخط: 10pt ؛  

ثم ، نحن بحاجة إلى إزالة الحشو الافتراضي والهامش فيه المجاهدين العلامة التي يلتف بأكمله المدخلات ويطفو لى إلى اليسار ، لذلك سيتم عرض المدخلات أفقيا ، جنبا إلى جنب.

 .loginform ul padding: 0؛ الهامش: 0  .loginform li display: inline؛ تعويم: اليسار؛  

لأننا تطفو لى, سوف ينهار الوالدان ، لذلك نحتاج إلى مسح الأشياء حول الوالد من خلال اختراق clearfix.

 التسمية عرض: كتلة ؛ اللون: # 999.  .cf: قبل ، .cf: بعد content: ""؛ جدول العرض؛  .cf: بعد clear: both؛  .cf * zoom: 1؛ : focus outline: 0؛  

في CSS3 لدينا محدد النفي. لذلك ، سوف نستخدمها لاستهداف المدخلات بخلاف خضع اكتب ، وهو في هذه الحالة سوف تستهدف البريد الإلكتروني وإدخال كلمة المرور.

 .إدخال تسجيل الدخول: لا ([type = submit]) padding: 5px؛ الهامش الأيمن: 10 بكسل ؛ الحدود: 1px الصلبة rgba (0 ، 0 ، 0 ، 0.3) ؛ دائرة نصف قطرها الحدود: 3px ؛ box-shadow: inset 0px 1px 3px 0px rgba (0، 0، 0، 0.1)، 0px 1px 0px 0px rpba (250، 250، 250، 0.5)؛  

وأخيرا ، سوف نعطي زخرفة نمط قليلا ل خضع زر ، على النحو التالي.

 .إدخال تسجيل الدخول [type = submit] border: 1px solid rgba (0، 0، 0، 0.3)؛ الخلفية: # 64c8ef؛ / * المتصفحات القديمة * / الخلفية: - التدرج اللوني الخطي (أعلى ، # 64c8ef 0٪ ، # 00a2e2 100٪) ؛ / * FF3.6 + * / background: - التدرج اللوني على الويب (الخطي ، أعلى اليسار ، أسفل اليسار ، توقف اللون (0٪ ، # 64c8ef) ، توقف الألوان (100٪ ، # 00a2e2)) ؛ / * Chrome ، Safari4 + * / background: -webkit-linear-gradient (top، # 64c8ef 0٪، # 00a2e2 100٪)؛ / * Chrome10 + ، Safari5.1 + * / / background: -o-linear-gradient (top، # 64c8ef 0٪، # 00a2e2 100٪)؛ / * Opera 11.10+ * / background: -ms-linear-gradient (top، # 64c8ef 0٪، # 00a2e2 100٪)؛ / * IE10 + * / background: التدرج الخطي (إلى الأسفل ، # 64 c8ef 0٪ ، # 00a2e2 100٪) ؛ / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# 64c8ef"، endColorstr = "# 00a2e2"، GradientType = 0)؛ / * IE6-9 * / color: #fff؛ الحشو: 5px 15px. الهامش الأيمن: 0؛ أعلى هامش: 15 بكسل ؛ دائرة نصف قطرها الحدود: 3px ؛ text-shadow: 1px 1px 0px rgba (0، 0، 0، 0.3)؛  

هذا كل شيء ، الآن يمكنك تجربة نموذج تسجيل الدخول من الروابط التالية.

• عرض
• تحميل المصدر

الكلمات الأخيرة

في هذا البرنامج التعليمي ، نظرنا في بعض الميزات الجديدة في نماذج HTML5:نائب, مطلوب و البريد الإلكتروني أنواع المدخلات لإنشاء صفحة تسجيل دخول بسيطة. لقد توصلنا أيضًا إلى سلبيات السمات ، حتى نتمكن من تحديد طريقة أفضل لتطبيقها.

في المنشور التالي ، سننظر في ميزات نموذج HTML5 جديدة أخرى ، لذلك تابعونا.