تعد نماذج HTML أدوات فعالة للتفاعل مع المستخدمين، ومع ذلك، ولأسباب تاريخية وتقنية، ليس من الواضح دائمًا كيفية استخدامها بكامل إمكاناتها. في هذا الفصل، سنغطي جميع جوانب نماذج HTML، بدءًا من البنية وحتى التصميم، ومن معالجة البيانات إلى عناصر واجهة المستخدم المخصصة.
النموذج: يجمع أنواعًا مختلفة من بيانات إدخال المستخدم ويرسلها إلى الخادم لتحقيق تفاعل البيانات بين المستخدم والخادم.
يعلن نموذج علامة النموذج عن نطاق جمع البيانات، طالما أنه موجود في النموذج، فهو البيانات التي سيتم جمعها.
يمكن أن تكون هناك علامات نموذج متعددة في الصفحة، ويمكن أن تكون في علاقة متوازية فقط ولا يمكن أن تكون متداخلة. عندما يرسل المستخدمون بيانات إلى الخادم، يمكنهم فقط إرسال البيانات في نموذج واحد في كل مرة. إذا كنت تريد إرسال نماذج متعددة، فأنت بحاجة إلى استخدام التفاعل غير المتزامن في JS.
عنصر <النموذج>
تُستخدم نماذج HTML لجمع مدخلات المستخدم.
نموذج HTML لتعريف العنصر:
<form>.formelements.</form>
1. تحتوي نماذج HTML على عناصر النموذج.
تشير عناصر النموذج إلى أنواع مختلفة من عناصر الإدخال، وخانات الاختيار، وأزرار الاختيار، وأزرار الإرسال، وما إلى ذلك.
(1) عنصر <الإدخال>
عنصر <input> هو العنصر الأكثر أهمية في النموذج. يحتوي العنصر <input> على العديد من الأشكال، اعتمادًا على سمة النوع. وهذا هو النوع المستخدم في هذا الفصل:
(2) إدخال النص
<input type=text> يحدد حقل إدخال سطر واحد لإدخال النص:
<!DOCTYPEhtml><html><body><form>الاسم الأخير:<br><inputtype=textname=firstname><br>الاسم الأول:<br><inputtype=textname=lastname></form><p>من فضلك لاحظ أن النموذج نفسه غير مرئي. </p><p>لاحظ أيضًا أن العرض الافتراضي لحقول النص هو 20 حرفًا. </p></body></html>
النتائج المقدمة هي كما يلي:
(3) إدخال زر الاختيار
<input type=radio> يحدد أزرار الاختيار. تسمح أزرار الاختيار للمستخدم بتحديد واحد من عدد محدود من الخيارات:
<!DOCTYPEhtml><html><body><form><inputtype=radioname=sexvalue=1checked>ذكر<br><inputtype=radioname=sexvalue=2>أنثى</form></body></html>
النتائج المقدمة هي كما يلي:
(4) زر الإرسال
<input type=submit> يحدد الزر المستخدم لإرسال النموذج إلى معالج النموذج. معالج النموذج هو عادةً صفحة خادم تحتوي على برامج نصية لمعالجة بيانات الإدخال. يتم تحديد معالج النموذج في سمة إجراء النموذج:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>الاسم الأخير:<br><inputtype=textname=firstnamevalue=李><br>الاسم:<br><inputtype=textname=lastnamevalue= Lei <br><br><inputtype=submitvalue=Submit></form><p>إذا قمت بالنقر فوق "إرسال"، فسيتم إرسال بيانات النموذج إلى صفحة تسمى demo_form.ashx للمعالجة اللاحقة. </p></body></html>
النتائج المقدمة هي كما يلي:
2. سمات النموذج:
(1) سمة العمل
تحدد سمة الإجراء الإجراء الذي سيتم تنفيذه عند إرسال النموذج. الطريقة المعتادة لإرسال نموذج إلى الخادم هي استخدام زر الإرسال. عادةً، يتم إرسال النماذج إلى صفحة ويب على خادم ويب. في المثال أعلاه، تم تحديد برنامج نصي للخادم للتعامل مع النموذج المقدم:
<formaction=action.php>
إذا تم حذف سمة الإجراء، فسيتم تعيين الإجراء على الصفحة الحالية.
(2) سمة الطريقة
تحدد سمة الطريقة طريقة HTTP (GET أو POST) المستخدمة عند إرسال النموذج:
<formaction=action.phpmethod=GET>
أو:
<formaction=action.phpmethod=POST>
متى تستخدم GET؟
يمكنك استخدام GET (الطريقة الافتراضية): إذا كان إرسال النموذج سلبيًا (مثل استعلام محرك البحث) ولا توجد معلومات حساسة. عند استخدام GET، تكون بيانات النموذج مرئية في شريط عنوان الصفحة:
action_page.php?firstname=Han&lastname=Meimei
ملحوظة: يعد GET هو الأنسب لإرسال كميات صغيرة من البيانات. سيقوم المتصفح بتعيين حد للسعة (255 حرفًا).
متى تستخدم البريد؟
يجب عليك استخدام POST: إذا كان النموذج يقوم بتحديث البيانات، أو يحتوي على معلومات حساسة (مثل كلمات المرور). يعد POST أكثر أمانًا لأن البيانات المقدمة في شريط عنوان الصفحة غير مرئية.
(3) سمة الاسم
يجب أن يحتوي كل حقل إدخال على مجموعة سمات اسم إذا تم إرساله بشكل صحيح. سيرسل هذا المثال حقل إدخال اسم العائلة فقط:
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx>الاسم الأخير:<br><inputtype=textvalue=李><br>الاسم الأول:<br><inputtype=textname=lastnamevalue=Lei >< br><br><inputtype=submitvalue=Submit></form><p>إذا قمت بالنقر فوق "إرسال"، فسيتم إرسال بيانات النموذج إلى صفحة باسم demo_form.ashx. </p><p>لن يتم إرسال الاسم الأخير لأن عنصر الإدخال هذا لا يحتوي على سمة اسم. </p></body></html>
النتائج المقدمة هي كما يلي:
3. ضوابط النموذج
دمج بيانات النموذج مع <fieldset>
يقوم عنصر <fieldset> بدمج البيانات ذات الصلة في نموذج. يحدد العنصر <legend> عنوان عنصر <fieldset>.
<!DOCTYPEhtml><html><body><formaction=/demo/demo_form.ashx><fieldset><legend>المعلومات الشخصية:</legend>الاسم الأخير:<br><inputtype=textname=firstnamevalue=Mickey><br > الاسم:<br><inputtype=textname=lastnamevalue=Mouse><br><br><inputtype=submitvalue=Submit></fieldset></form></body></html>
تُستخدم النماذج لجمع بيانات المستخدم، والتي يجب ملؤها في عناصر تحكم مختلفة. يتم أيضًا تنفيذ عناصر تحكم HTML من خلال العلامات، ولكنها ستقدم بعض المظاهر الخاصة ولها بعض الوظائف التفاعلية.
يمكن أن تحتوي نماذج HTML على عناصر تحكم كما هو موضح في الجدول التالي: