يعد التحقق من العميل أحد وظائف برامج عميل الويب الأكثر استخدامًا. لقد زودنا HTML5 بالفعل بوظيفة التحقق من النموذج. بالنسبة إلى سبب عدم شعبيته ، فهو يقدر أنه متوافق ، والأسلوب قبيح للغاية.
سنقوم أدناه بإنشاء التحقق من النموذج من HTML5 و CSS3 خطوة بخطوة ، باستخدام HTML و CSS فقط.
ما يلي على النحو التالي:
الخطوة 1: فرز حقل التحقق والنوعبادئ ذي بدء ، نحن بحاجة إلى الحقول التالية:
بعد إدخال المستخدم بعض المعلومات ، نحتاج إلى التحقق مما إذا كانت معلومات المستخدم صحيحة لتجنب بيانات الخطأ والبيانات المخبوزة إلى الخادم.
في المواصفات الجديدة لـ HTML5 ، يوفر مربع الإدخال مجموعة متنوعة من أنواع الإدخال مثل: Tel ، Email ، Number ، Color ، إلخ. هذه الأنواع لا تنعكس بشكل عام في عميل سطح المكتب. على سبيل المثال ، سيتم تبديل الرقم تلقائيًا إلى أرقام نقية على لوحة المفاتيح المحمول ، وسيتم تبديل لوحة المفاتيح عبر البريد الإلكتروني تلقائيًا باستخدام@لوحة المفاتيح.
الخطوة 2: تحديد نمط النموذجنحتاج أيضًا إلى تحديد النمط النهائي للنموذج. هنا وجدت نمط النموذج على سال لعابه كأسلوب تجريبي في هذا الوقت.
الخطوة 3: رمز القالباستخدم رمز بيان HTML5 القياسي
<!الخطوة 4: إنشاء نموذج
إنشاء عنصر تنسيق أساسي.
<form action = onsubmit = return false> </pation>الخطوة 5: إنشاء العنصر
عناصر الجدول لها تكوين العنصر التالي:
يتم استخدام عناصر UL و LI لتخطيطات الطباعة ، والتي تستخدم لتقسيم عناصر وحدة الجدول والتخطيطات. يتم استخدام الملصق لنص موجه الحقل للنموذج. يتم استخدام الإدخال لبيانات إدخال المستخدم. يستخدم Span لاستخدام الرموز التعبيرية للإشارة إلى ما إذا كان حقل المستخدم ملء بشكل صحيح.
<ul> <li> <label for = name> الاسم الكامل </label> <إدخال type = text id = name name = name holder = الرجاء إدخال name/> <span class = icon-name> </span> < /span> </span> li> </ul>
النموذج النموذج هو رمز HTML رمز الكامل كما يلي:
الخطوة 6: أضف النمطأكمل كتابة عنصر النموذج ، وتحسين أسلوبه بإحكام ، مما يجعله يبدو أكثر جمالا.
body {display} form {padding: 0 ٪ ؛ ؛ اللون: الأسود ؛ المطلق: 0رمز CSS يكمل الرمز على النحو التالي:
الخطوة 7: إضافة موجه الرموز التعبيريةفي كل بنية نموذج النموذج ، أضفنا علامة Span ، مثل قمنا بإضافة تسمية <span class = icon-name> </span> في حقل الاسم. أضف الآن الأسلوب إلى حالة اختبار حالة المدرسة.
li span {block ؛