كيفية إضافة نموذج مع KompoZer

01 من 06

إضافة نموذج مع KompoZer

إضافة نموذج مع KompoZer. لقطة شاشة مجاملة جون موران

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

02 من 06

إنشاء نموذج جديد مع KompoZer

إنشاء نموذج جديد مع KompoZer. لقطة شاشة مجاملة جون موران

يحتوي KompoZer على أدوات شكل غنية يمكنك استخدامها لإضافة نماذج إلى صفحات الويب الخاصة بك. يمكنك الوصول إلى أدوات النموذج بالنقر فوق الزر "نموذج" أو القائمة المنسدلة المصاحبة على شريط الأدوات. لاحظ أنه إذا لم تكتب نصوص معالجة النصوص الخاصة بك ، فستحتاج إلى الحصول على بعض المعلومات لهذه الخطوة من الوثائق أو من المبرمج الذي كتب البرنامج النصي. يمكنك أيضًا استخدام نماذج mailto ولكنها لا تعمل دائمًا .

  1. ضع المؤشر في الموقع الذي ترغب في أن يظهر النموذج فيه على الصفحة.
  2. انقر فوق الزر "نموذج" على شريط الأدوات. يفتح مربع الحوار خصائص النموذج.
  3. أضف اسمًا للنموذج. يتم استخدام الاسم في رمز HTML الذي تم إنشاؤه تلقائيًا لتحديد النموذج وهو مطلوب. تحتاج أيضًا إلى حفظ صفحتك قبل أن تتمكن من إضافة نموذج. إذا كنت تعمل مع صفحة جديدة غير محفوظة ، فسوف يطالبك KompoZer بالحفظ.
  4. أضف عنوان URL إلى النص البرمجي الذي سيعالج بيانات النموذج في حقل عنوان URL الإجراء. عادة ما تكون معالجات النماذج مكتوبة بلغة PHP أو لغة مماثلة من جانب الخادم. بدون هذه المعلومات ، لن تتمكن صفحة الويب الخاصة بك من عمل أي شيء مع البيانات التي أدخلها المستخدم. سيطالبك KompoZer بإدخال URL الخاص بمعالج النموذج إذا لم تقم بإدخاله.
  5. حدد الطريقة المستخدمة لإرسال بيانات النموذج إلى الخادم. الخياران هما GET و POST. سوف تحتاج إلى معرفة الطريقة التي يتطلبها البرنامج النصي.
  6. انقر فوق موافق ثم تتم إضافة النموذج إلى صفحتك.

03 من 06

أضف حقل نصي إلى نموذج مع KompoZer

أضف حقل نصي إلى نموذج مع KompoZer. لقطة شاشة مجاملة جون موران

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

  1. اختر المكان الذي تريد أن يذهب إليه حقل النص في منطقة النموذج المحددة. إذا كنت ترغب في إضافة تسمية ، فقد ترغب في كتابة النص في البداية.
  2. انقر فوق السهم لأسفل الموجود بجوار الزر "نموذج" في شريط الأدوات واختر "حقل النموذج" من القائمة المنسدلة.
  3. سيتم فتح نافذة خصائص حقل النموذج. لإضافة حقل نص ، اختر نص من القائمة المنسدلة المسماة نوع الحقل.
  4. أعط اسمًا إلى حقل النص. يتم استخدام الاسم لتعريف الحقل في تعليمات HTML البرمجية ويحتاج النص البرمجي لمعالجة النموذج إلى اسم لمعالجة البيانات. يمكن تعديل عدد من السمات الاختيارية الأخرى في مربع الحوار هذا عن طريق تبديل زر خصائص / خصائص المزيد من الخصائص أو بالضغط على الزر تحرير متقدم ، ولكن في الوقت الحالي سنقوم فقط بإدخال اسم الحقل.
  5. انقر فوق موافق ويظهر الحقل النصي على الصفحة.

04 من 06

إضافة منطقة نص إلى نموذج مع KompoZer

إضافة منطقة نص إلى نموذج مع KompoZer. لقطة شاشة مجاملة جون موران

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

  1. ضع المؤشر داخل الشكل التفصيلي للنموذج حيث تريد أن تكون منطقة النص الخاصة بك. إذا كنت تريد كتابة تسمية ، فغالبًا ما تكون فكرة جيدة لكتابة نص التسمية ، وضرب مفتاح الإدخال للانتقال إلى سطر جديد ، ثم إضافة حقل النموذج ، نظرًا لأن حجم مساحة النص على الصفحة يجعلها غير ملائمة التسمية على اليسار أو اليمين.
  2. انقر فوق السهم لأسفل الموجود بجوار الزر "نموذج" الموجود على شريط الأدوات واختر "منطقة النص" من القائمة المنسدلة. سيتم فتح نافذة خصائص منطقة النص.
  3. أدخل اسمًا لحقل مجال النص. يعرّف الاسم الحقل في رمز HTML ويستخدمه برنامج معالجة النصوص لمعالجة المعلومات المقدمة من قبل المستخدم.
  4. أدخل عدد الصفوف والأعمدة التي تريد أن تعرضها منطقة النص. تحدد هذه الأبعاد حجم الحقل في الصفحة ومقدار النص الذي يمكن إدخاله في الحقل قبل أن يحدث التمرير.
  5. يمكن تحديد المزيد من الخيارات المتقدمة مع عناصر التحكم الأخرى في هذه النافذة ، ولكن في الوقت الحالي يكون اسم وأبعاد الحقل كافية.
  6. انقر فوق موافق وتظهر منطقة النص في النموذج.

05 من 06

إضافة زر إرسال وإعادة تعيين إلى نموذج باستخدام KompoZer

إضافة زر إرسال وإعادة تعيين إلى نموذج باستخدام KompoZer. لقطة شاشة مجاملة جون موران

بعد أن يملأ المستخدم النموذج على صفحتك ، يجب أن يكون هناك بعض الطريق لإرسال المعلومات إلى الخادم. بالإضافة إلى ذلك ، إذا أراد المستخدم البدء من جديد أو ارتكب خطأ ، فمن المفيد تضمين عنصر تحكم سيؤدي إلى إعادة تعيين جميع قيم النماذج إلى القيم الافتراضية. تقوم عناصر التحكم بالنماذج الخاصة بمعالجة هذه الوظائف ، وتسمى الأزرار Submit and Reset على التوالي.

  1. ضع المؤشر داخل منطقة النموذج المحددة التي تريد أن يكون زر الإرسال أو إعادة التعيين بها. في أغلب الأحيان ، سيكون موجودًا أسفل باقي الحقول في نموذج.
  2. انقر فوق السهم لأسفل الموجود بجوار الزر "نموذج" الموجود على شريط الأدوات واختر "تعريف الزر" من القائمة المنسدلة. ستظهر نافذة خصائص الزر.
  3. اختر نوع الزر من القائمة المنسدلة المسمى Type. اختياراتك هي تقديم وإعادة تعيين وزر. في هذه الحالة ، سنختار نوع إرسال.
  4. حدد اسمًا للزر الذي سيتم استخدامه في شفرة HTML ومعالجة النموذج لمعالجة طلب النموذج. يدرج مطورو الويب عادة هذا الحقل "إرسال".
  5. في المربع المسمى القيمة ، أدخل النص الذي يجب أن يظهر على الزر. يجب أن يكون النص قصيرًا ولكن وصفيًا لما سيحدث عند الضغط على الزر. شيء مثل "إرسال" أو "إرسال نموذج" أو "إرسال" هي أمثلة جيدة.
  6. انقر فوق "موافق" ويظهر الزر في النموذج.

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

06 من 06

تحرير نموذج مع KompoZer

تحرير نموذج مع KompoZer. لقطة شاشة مجاملة جون موران

يعد تحرير نموذج أو حقل نموذج في KompoZer أمرًا سهلاً للغاية. ببساطة انقر مرتين على الحقل الذي ترغب في تحريره ، ويظهر مربع الحوار المناسب حيث يمكنك تغيير خصائص الحقل لتناسب احتياجاتك. يوضح الرسم البياني أعلاه نموذجًا بسيطًا يستخدم المكونات المغطاة في هذا البرنامج التعليمي.