1. مقدمة في النموذج
النموذج <Porm> هو واحد من أكثر النماذج التفاعلية في صفحات الويب. يستقبل بيانات المستخدم من خلال نماذج مختلفة ، بما في ذلك مربعات القائمة المنسدلة ، وأزرار الراديو ، ومربعات الاختيار وصناديق النص. تقدم هذه المقالة بشكل رئيسي الخصائص والأساليب الشائعة الاستخدام في النماذج.
يمكن أن يكون JavaScript مناسبًا جدًا لتشغيل النماذج ، مثل الحصول على بيانات النماذج للتحقق الفعال ، وتعيين القيم تلقائيًا لحقول النماذج ، وأحداث المعالجة ، وما إلى ذلك.
في هذا الوقت ، يتم تحليل كل نموذج في كائن ، أي كائنات الشكل. يمكن الرجوع إلى هذه الكائنات من خلال مجموعة المستند. على سبيل المثال ، يمكن استخدام نموذج مع سمة NAMA لـ Form1
انسخ الرمز على النحو التالي: document.forms ["form1"]
ليس ذلك فحسب ، يمكنك أيضًا الرجوع إلى كائنات النماذج من خلال فهرس النموذج في المستند. على سبيل المثال
انسخ الرمز على النحو التالي: document.forms [1]
يمثل كائن النموذج الثاني في المستند المرجعي
فيما يلي عنصر نموذج يحتوي على عناصر نموذج متعددة ، يحتوي كل عنصر على علامة تسمية ، مرتبط بالعنصر ، بحيث من خلال النقر على النص ، يمكنك تعيينه وتحديده على الجدول ، وتحسين تجربة المستخدم.
نسخة الكود كما يلي:
<form method = "post" name = "myForm1" Action = "AddInfo.aspx">
<p> <label for = "name"> الرجاء إدخال اسمك: </label> <br> <input type = "text" name = "name" id = "name"> </p>
<p> <label for = "passwd" ، الرجاء إدخال كلمة المرور الخاصة بك: </label> <br> <إدخال type = "password" name = "passwd" id = "passwd"> </p>
<p> <label for = "color"> يرجى تحديد لونك المفضل: </label> <br>
<حدد name = "color" id = "color">
<Option Value = "RED"> Red </Option>
<Option Value = "Green"> Green </Option>
<Option Value = "Blue"> Blue </Option>
<value Option = "Yellow"> أصفر </eboty>
<value Option = "cyan"> qing </soph>
<value Option = "Purple"> Purple </soph>
</select> </p>
<p> الرجاء تحديد جنسك: <br>
<type type = "radio" name = "sex" id = "male" value = "male"> <label for = "male"> ذكر </label> <br>
<type type = "radio" name = "sex" id = "female" value = "female"> <label for = "female"> female </label> </p>
<p> ماذا تحب أن تفعل: <br>
<type type = "checkbox" name = "hobby" id = "book" value = "book"> <label for = "book"> القراءة </label>
<type type = "checkbox" name = "hobby" id = "net" value = "net"> <label for = "net"> على الإنترنت </label>
<type type = "checkbox" name = "hobby" id = "sleep" value = "sleep"> <label for = "sleep"> sleep </babel> </p>
<p> <label for = "comments"> أريد أن أترك رسالة: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p>
<p> <input type = "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">
<type type = "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</form>
عادةً ما يكون لكل عنصر من عناصر النماذج سمات الاسم والمعرف ، ويستخدم الاسم لتسليم الخادم ، ويتم استخدام المعرف لتصفية الربط والوظائف.
2. عناصر الوصول في النموذج
يتم تضمين العناصر في النموذج ، سواء تم تضمين مربعات النص أو أزرار الراديو أو الأزرار المنسدلة أو مربعات القائمة المنسدلة أو غيرها من المحتوى في مجموعة عناصر النماذج. يمكنك استخدام موضع العنصر في المجموعة أو سمة اسم العنصر للحصول على مرجع للعنصر.
نسخة الكود كما يلي:
var Oform = document.forms ["Form1"] // Get Form
var etextform = Oform.Elements [0] ؛ // احصل على العنصر الأول
var etextpasswd = Oform.Elements ["passwd"] // احصل على العنصر مع سمة الاسم passwd
اقتبس الطريقة الأكثر فعالية وبديهية:
انسخ الكود على النحو التالي: var ethtcomments = Oform.Elements.comments ؛ // احصل على العنصر مع تعليقات السمة الاسم
3. الخصائص والأساليب العامة
جميع العناصر في النموذج (باستثناء العناصر المخفية) لها بعض الخصائص والأساليب الشائعة. فيما يلي بعض القوائم شائعة الاستخدام
نسخة الكود كما يلي:
var oform = document.forms ["form1"] ؛ // احصل على شكل
var imagestComments = Oform.Elements.com. // احصل على العنصر مع تعليقات السمة الاسم
تنبيه (Oform.Type) ؛ // عرض نوع العنصر
var etextpasswd = Oform.Elements ["passwd"] ؛ // احصل على العنصر مع سمة الاسم passwd
foxtpasswd.focus () ؛ // التركيز على عناصر محددة
4. تقديم النماذج
يتم الانتهاء من التقديم في النموذج من خلال أزرار أو صور مع وظائف الزر
نسخة الكود كما يلي:
<type type = "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">
<type type = "image" name = "picsubmit" id = "picssubmit" src = "submit.jpg">
عندما يضغط المستخدم على إدخال أو ينقر على أحد الأزرار ، يمكن إرسال النموذج بدون رمز إضافي. يمكنك استخدام سمة الإجراء في النموذج لاكتشاف ما إذا كان سيتم إرسالها.
انسخ رمز الرمز كما يلي: <method method = "post" name = "form1" action = "javaScript: ALERT ('submited')"> </form>
يجوز للمستخدمين النقر فوق الزر "إرسال" مرارًا وتكرارًا أثناء عملية التقديم لأن سرعة الشبكة بطيئة للغاية. هذا عبء كبير على الخادم ويمكن حظره باستخدام السمة المعوقة. على سبيل المثال:
انسخ الرمز كما يلي: <إدخال نوع = "زر" value = "إرسال" />