سنقدم هنا معرفة عناصر النماذج وتقديم النموذج.
عنصر النماذج واجهة DOM لعنصر النموذج هي HTMLFormElement ، التي ترث من HTMLElement ، لذلك لديها نفس السمات الافتراضية مثل عناصر html الأخرى ، ولكن لديها العديد من السمات والأساليب الفريدة: هو نفسه:
| قيمة السمة | يوضح |
|---|---|
| قبول | مجموعة الأحرف التي يمكن للخادم التعامل معها ، يتم تقسيم مجموعات الأحرف المتعددة على المسافات |
| فعل | عنوان URL الذي يقبل الطلبات ، يمكن تغطية هذه القيمة بواسطة خاصية التشكيل لعنصر الإدخال أو الزر في عنصر النموذج |
| عناصر | جميع مجموعات التحكم في النموذج (HTMLCollection) |
| enctype | نوع الترميز المطلوب ، يمكن تغطية هذه القيمة بواسطة خاصية formenctype لعنصر الإدخال أو الزر في عنصر النموذج |
| طول | عدد الضوابط في النموذج |
| طريقة | عادةً ما يكون نوع طلب HTTP الذي سيتم إرساله أو نشره. |
| اسم | اسم النموذج |
| إعادة ضبط () | أعد تعيين جميع مجالات النماذج إلى القيمة الافتراضية |
| يُقدِّم () | إرسال النموذج |
| هدف | اسم النافذة لإرسال الطلبات واستلام الاستجابة ، يمكن تغطية هذه القيمة بواسطة خاصية FormTarget من عنصر الإدخال أو العنصر في عنصر النموذج |
| الإكمال التلقائي | ما إذا كنت ستشكل تلقائيًا عناصر الجدول |
عنصر الإدخال هو عنصر نموذج يستخدم على نطاق واسع.
إدخال نص <إدخال نوع = اسم النص =>
إرسال الإدخال <نوع الإدخال = إرسال>
إدخال الزر المفرد <إدخال type = radio name = يجب أن يكون له نفس قيمة الاسم = من الأفضل أن تكون قيمة التعبئة المقابلة>
أدخل <إدخال type = checkbox name = نفس الاسم القيمة = القيم المقابلة المختلفة>
الإدخال الرقمي <type type = number min = max => يمكن لمربع الإدخال إدخال الأرقام فقط ، ويمكنه تعيين القيمة القصوى والحد الأدنى للقيمة.
إدخال النطاق <إدخال نوع = المدى min = max => على غرار الرقم ، لكنه يظهر شريط انزلاق بدلاً من مربع الإدخال.
سوف يظهر إدخال اللون <نوع الإدخال = اللون> محدد الألوان.
سوف يظهر إدخال التاريخ <نوع الإدخال = التاريخ> محدد التاريخ.
يتم عرض إدخال البريد الإلكتروني <type type = email> كمربع إدخال نصية وستظهر لوحة مفاتيح مخصصة.
إدخال Tel <type type = tel> على غرار إدخال البريد الإلكتروني
إدخال عنوان URL <input type = url> على غرار إدخال البريد الإلكتروني ، ستظهر لوحة مفاتيح مخصصة أيضًا.
يمكن لعناصر Textarea إنشاء منطقة نص متعددة الخطوط.
<textarea name = id = color = 30 صفوف = 10> </textarea>
تمثل قيم السمة من Cols و Row عرض وارتفاع منطقة النص.
حدد عناصر وعناصر الخيار يمكن استخدامها لإنشاء قائمة منسق.
<تحديد name = id => <orte stable => </potion> <value value => </teptor
راديوكيف تجمع؟
مثال:
<نوع الإدخال = الاسم الراديو = القيمة المفضلة = لعبة اللعب> تشغيل الألعاب
<نوع الإدخال = اسم الراديو = القيمة المفضلة = رمز الكتابة> رمز الكتابة
<نوع الإدخال = اسم الراديو = قيمة الجنس = رجل> ذكر
<نوع الإدخال = اسم الراديو = قيمة الجنس = امرأة> أنثى ، أنثى ،
هذه هي مجموعتين من الراديو
عنصر نائبتوفير معلومات سريعة (تلميح) يمكن أن تصف القيمة المتوقعة لحقل الإدخال.
سيتم عرض المطالبة عندما يكون حقل الإدخال فارغًا ، وسيختفي عندما يحصل الحقل على التركيز.
اكتب = مخفيتحديد المدخلات المخفية. الحقول المخفية غير مرئية للمستخدمين. عادةً ما تقوم الحقول المخفية بتخزين قيمة افتراضية ، ويمكن أيضًا تعديل قيمها بواسطة JavaScript.
على سبيل المثال ، بالنسبة للأمان ، يمكن استخدام قيم الاسم والقيمة غير المرئية للمستخدمين في الخلفية للتحقق من الخلفية للتحقق من صفحات التزوير ومنعها.
زر إرسالأضف زر التقديم لتشكيل لتمكين المستخدمين من إرسال النماذج.
يمكن أن تؤدي الأزرار الثلاثة التالية إلى تشغيل حدث إرسال النموذج عند النقر:
<type type = submit /> <button type = president> </utton> <type type = image />
يتم إرسال القيمة الافتراضية للكنوب لعنصر الزر في المواصفات ، لكن قيمة التأمل هي زر تحت IE678 ، لذلك من الضروري إضافة النوع = إرسال الخاصية إلى عنصر الزر من التوافق يدويًا.
إرسال الحدثقد يعتقد الشخص الأولي أن تقديم النموذج يتم تشغيله بواسطة حدث النقر في زر التقديم.
Form.AdDeventListener ('submit' ، function (e) {if (appal ()) {...} e.PreventDefault ()}) عندما لا يكون هناك أحد الأزرار الثلاثة المذكورة أعلاه في عنصر النموذج ، فلن يتمكن المستخدم من إرسال النموذج (مفتاح Enter غير صالح أيضًا submit() . يجب أن يكون عملية التحقق من النموذج قبل الاتصال submit()
if (value ()) {form.submit ()} نموذج التقديم وتجربة المستخدماستنادًا إلى تقنية Ajax+Cross -domain Post (CORS) الشائعة الحالية ، من المحتمل ألا نستخدم عنصر النماذج لإرسال البيانات مباشرة إلى الخادم. على الرغم من أن هذا ممكن ، إلا أن هناك ظاهرة من التدهور في معظم الحالات.
التحقق من نموذج JavaScriptيمكن استخدام JavaScript للتحقق من بيانات الإدخال هذه في نموذج HTML قبل إرسال البيانات إلى الخادم.
هذه البيانات النموذجية التي تم التحقق منها بواسطة JavaScript هي:
هل قام المستخدم بملء العناصر المطلوبة في النموذج؟
هل عنوان البريد الذي أدخله المستخدم قانوني؟
هل أدخل المستخدم تاريخًا قانونيًا؟
هل يدخل المستخدمون النص في الحقل الرقمي؟
يجب أن -مشروع (أو يجب أن تختار) مشروعيتم استخدام الوظائف التالية للتحقق مما إذا كان المستخدم قد ملأ العنصر المطلوب (أو المطلوب) في النموذج. إذا كان يجب ملؤها أو أن يكون الخيار فارغًا ، فسيظهر مربع التحذير ، وتكون قيمة إرجاع الوظيفة خاطئة ، وإلا فإن قيمة إرجاع الوظيفة صحيحة (تعني أن البيانات ليست مشكلة):
Function value_required (الحقل ، ALERTTXT) {مع (الحقل) {if (value == null ||فيما يلي الرمز مع نموذج HTML:
<html> <Head> <script type = text/javaScript> value_required (field ، alerttxt) {with (field) {if (value == null || value ==) {ALERT (ALERT LERTTXT) ؛ {return true}} FUSTION VALUE_FORM (this) {with (this) {if (value_required (email ، يجب ملء البريد الإلكتروني!) <Body> <form action = submitpage.htm onsubmit = return validate_form (this) method = post> email: <input type = text name = 30> <input type = product value = submit> </pody> </body> < /html> التحقق من البريد الإلكترونيتحقق الوظائف التالية مما إذا كانت بيانات الإدخال تتوافق مع بناء الجملة الأساسي لعنوان البريد الإلكتروني.
هذا يعني أن بيانات الإدخال يجب أن تحتوي على@ رموز وأرقام نقطة (.). في الوقت نفسه ، ليس الحرف الأول لعنوان البريد الإلكتروني ، ورقم نقطة واحدة على الأقل بعد@ 同时:
Function value_email (الحقل ، ALERTTXT) {مع (الحقل) {apos = value.indexof (@) dotpos = value.lastindexof (.) if (apos <1 || dotpos-apos <2) lert (alerttxt) ؛ آخر {return true}}}فيما يلي الرمز الكامل مع نموذج HTML:
<html> <head> <script type = text/javaScript> function value_email (الحقل ، ALERTTXT) {مع (الحقل) {apos = value.indexof (@) dotpos = value .lastindexof (.) if (apos <1 || <1 || dotpos-apos <2) {Alert (AlertTxt) ؛ = false) {email.focus () ؛ اسم النص = البريد الإلكتروني = 30> <نوع الإدخال = إرسال القيمة = إرسال> </form> </body> </html> اختصار مفتاح تقديمفي غياب حزمة العناصر النموذجية ، حتى إذا كان تركيز الصفحة الحالية على عنصر النموذج ، فإن الضغط على مفاتيح إدخال لن يؤدي إلى تشغيل النموذج. ، تدمير التدفق الأصلي الأصلي. الحل الأسهل هو لفه بعنصر نموذج على الطبقة الخارجية وتحديد أن هناك على الأقل زر تقديم في عنصر النموذج. في هذا الوقت ، عندما يتم تركيز مجال الإدخال في النموذج ، يضغط المستخدم على مفتاح Enter لتحفيز التقديم.
المتصفح تذكر كلمة مرور الحسابعند تقديم نموذج ، سيسأل متصفح المستوى العالي ، بما في ذلك المستخدمين ما إذا كنت بحاجة إلى تذكر كلمة مرور حساب المستخدم. في غياب عنصر النموذج ، لن يطفو المتصفح على نافذة الاستفسار.
لخصعندما نطور تطبيقًا ، يجب ألا نحاول إزالة عناصر النماذج وإرساله مباشرة. معالجة الحوادث المقدمة في حدث إرسال عنصر النموذج ، وليس حدث النقر فوق زر التقديم.
الرجوع إلى:
نموذج النموذج وتقديم النموذج