إنشاء نماذج الويب

في طريقة العرض Design، يُشار إلى النماذج بحد خارجي أحمر منقط. إذا كنت لا ترى هذا المخطط، حدد عرض > مساعدات بصرية > عناصر غير مرئية.

قم بتعيين خصائص نموذج HTML في عارض الخصائص ‏(Window >Properties):

أ.في النافذة Document، انقر فوق الحد الخارجي للنموذج لتحديد النموذج.

ب.في المربع Form Name، اكتب اسمًا فريدًا لتعريف النموذج.

حيث تسهل تسمية النموذج الرجوع إليه أو التحكم فيه باستخدام لغة برمجة نصية مثل JavaScript أو VBScript. وإذا لم تسمِ النموذج، فسيضع Dreamweaver اسمًا باستخدام بناء الجملة formn، ويزيد قيمة n لكل نموذج يُضاف إلى الصفحة.

جـ.وفي المربع Action، حدد الصفحة أو البرنامج النصي الذي سيُستخدم لمعالجة بيانات النموذج عن طريق كتابة المسار، أو النقر فوق رمز المجلد للانتقال إلى الصفحة أو البرنامج النصي الصحيح. مثال: processorder.php.

د.من القائمة المنبثقة Method، حدد الأسلوب المطلوب لنقل بيانات النموذج إلى الخادم.

قم بتعيين أي من الخيارات التالية:

Default يستخدم إعدادات المستعرض الافتراضية لإرسال بيانات النموذج إلى الخادم. وتكون القيمة الافتراضية عادةً الأسلوب GET‎.

GET يلحق هذا الخيار القيمة بعنوان URL الذي يطلب الصفحة.

POST يُضمِّن بيانات النموذج في طلب HTTP.

لا تستخدم الأسلوب GET لإرسال نماذج طويلة. فيجب ألا يزيد طول عناوين URL عن 8192 حرفًا. وإذا كانت كمية البيانات المرسلة كبيرة للغاية، فسيتم قص البيانات، ما يؤدي إلى نتائج معالجة غير متوقعة أو فاشلة.

يمكن ربط الصفحات الديناميكية التي يتم إنشاؤها بمعلمات تم تمريرها بواسطة الأسلوب GET‎ بإشارات مرجعية؛ لأن جميع القيم المطلوبة لإنشاء الصفحة موجودة بعنوان URL المعروض في مربع عنوان المستعرض. وعلى العكس، لا يمكن ربط الصفحات الديناميكية التي يتم إنشاؤها بمعلمات تم تمريرها بواسطة الأسلوب ‏‎POST‎‎‏‎ بإشارات مرجعية.

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

هـ.(اختياري) من القائمة المنبثقة Enctype، حدد نوع الترميز MIME للبيانات المرسلة إلى الخادم للمعالجة.

يُستخدم إعداد ‎application/x-www-form-urlencode الافتراضي عادةً مقترنًا بالأسلوب POST. في حالة إنشاء حقل تحميل ملف، حدد نوع MIME multipart/form‑data.

و.(اختياري) من القائمة المنبثقة Target، حدد النافذة التي تريد أن تعرض بها البيانات التي يتم إرجاعها بواسطة البرنامج المشغَّل.

وإذا لم تكن النافذة المسماة مفتوحة بالفعل، يتم فتح نافذة جديدة بهذا الاسم. قم بتعيين أي من القيم الهدف التالية:

_blank لفتح المستند الوجهة في نافذة جديدة غير مسماة.

_parent لفتح المستند الوجهة المحدد في النافذة الأصل للنافذة التي تعرض المستند الحالي.

_self لفتح المستند الوجهة في النافذة التي تم إرسال النموذج بها نفسها.

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

إدراج كائنات نماذج في الصفحة:

أ.ضع نقطة الإدخال في المكان الذي يجب ظهور كائن النموذج به من النموذج.

ب. حدد الكائن من القائمة Insert > Form، أو من الفئة Forms باللوحة Insert.

جـ.أكمل مربع الحوار Input Tag Accessibility Attributes. لمزيد من المعلومات، انقر فوق الزر Help في مربع الحوار.

د.قم بتعيين خصائص الكائنات.

هـ.أدخل اسمًا للكائن في عارض الخصائص.

يجب أن يكون لكل كائن حقل نص وحقل مخفي وخانة اختيار وقائمة اسم فريد يحدد الكائن في النموذج. لا يمكن أن تحتوي أسماء الكائنات على مسافات أو حروف خاصة. يمكنك استخدام أي مجموعة مكونة من أحرف أبجدية رقمية وعلامة شرطة سفلية (_). وتكون التسمية التي تعينها للكائن اسم المتغير الذي يخزن قيمة (البيانات المدخلة) الحقل. هذه هي القيمة المرسلة إلى الخادم للمعالجة.

و.لتسمية كائن حقل النص، أو خانة الاختيار، أو زر التحديد، انقر بجوار الكائن واكتب التسمية.

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

عند تصميم النماذج، تذكر إضافة تسميات لحقول النماذج بنص وصفي لإعلام المستخدمين بما يجيبون عليه—على سبيل المثال، "اكتب اسمك" لطلب معلومات الاسم.

استخدم الجداول لتوفير هيكل لعناصر النموذج وتسميات الحقول.عند استخدام الجداول في الاستمارات، تأكد من تضمين جميع علامات table بين علامات form.

لتحديد اسم كائن حقل الملف.

يحدد الحد الأقصى لعدد الأحرف التي يمكن عرضها في الحقل.

يحدد الحد الأقصى لعدد الأحرف الذي سيحتويه الحقل. إذا قام المستخدم بالتصفح لتحديد موقع الملف، فيمكن أن يتجاوز اسم الملف والمسار قيمة الحد الأقصى للأحرف المحددة.ومع ذلك، إذا حاول المستخدم كتابة اسم الملف والمسار، فسيسمح حقل الملف بعدد الأحرف المحدد بواسطة قيمة Max Chars فقط.

يظهر مربع الحوار Select Image Source.

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

لتحديد الصورة المطلوب استخدامها للزر.

يتيح لك إدخال نص وصفي في حالة فشل تحميل الصورة في المتصفح.

لتعيين سمة محاذاة للكائن.

يقوم ببدء تشغيل محرر الصور الافتراضي ويفتح ملف الصورة للتحرير.

يتيح لك تطبيق قواعد CSS على الكائن.

حدد Insert > Form > Radio Group.

أكمل مربع الحوار، وانقر فوق OK.

أ.وفي المربع Name، أدخل اسمًا لمجموعة أزرار التحديد.

 في حالة تعيين أزرار التحديد لتمرير المعلمات مرة أخرى إلى الخادم، يتم ربط المعلمات بالاسم. على سبيل المثال، إذا سميت المجموعة myGroup وقمت بتعيين أسلوب النموذج إلى GET (أي أنك تريد أن يمرر النموذج معلمات URL بدلاً من معلمات النموذج عندما ينقر المستخدم فوق زر الإرسال)، يتم تمرير التعبير myGroup="CheckedValue" في عنوان URL إلى الخادم.

ب.انقر فوق زر علامة الجمع (+) لإضافة زر تحديد إلى المجموعة. أدخل تسمية وقيمة محددة للزر الجديد.

جـ.انقر فوق السهم لأعلى أو لأسفل لإعادة ترتيب الأزرار.

د.لتعيين زر تحديد معين ليظهر محددًا عند فتح الصفحة في مستعرض، أدخل قيمة مساوية لقيمة زر التحديد في المربع Select Value Equal To.

أدخل قيمة ثابتة أو حدد قيمة ديناميكية عن طريق النقر فوق رمز صعقة البرق بجوار المربع وتحديد مجموعة تسجيل تحتوي على قيم محددة محتملة. وفي كلتا الحالتين، يجب أن تطابق القيمة التي تحددها القيمة المحددة لأحد أزرار التحديد بالمجموعة. لعرض القيمة المحددة لأزرار التحديد، حدد كل زر تحديد وافتح عارض الخصائص ‏(Window > Properties).

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

يمكنك أيضًا تعيين الخصائص في عارض الخصائص أو مباشرةً من طريقة العرض Code.

حدد Insert > Form > Checkbox Group.

أكمل مربع الحوار، وانقر فوق OK.

أ.في المربع Name، أدخل اسمًا لمجموعة خانات الاختيار.

في حالة تعيين خانات الاختيار لتمرير المعلمات مرة أخرى إلى الخادم، يتم ربط المعلمات بالاسم. على سبيل المثال، إذا سميت المجموعة myGroup وقمت بتعيين أسلوب النموذج إلى GET (أي أنك تريد أن يمرر النموذج معلمات URL بدلاً من معلمات النموذج عندما ينقر المستخدم فوق زر الإرسال)، يتم تمرير التعبير myGroup="CheckedValue" في عنوان URL إلى الخادم.

ب.انقر فوق زر علامة الجمع (+) لإضافة خانة اختيار إلى المجموعة. أدخل تسمية وقيمة محددة لخانة الاختيار الجديدة.

جـ.انقر فوق السهم لأعلى أو لأسفل لإعادة ترتيب خانات الاختيار.

د.لتعيين خانة اختيار معينة لتظهر محددة عند فتح الصفحة في مستعرض، أدخل قيمة مساوية لقيمة خانة الاختيار في المربع Select Value Equal To.

أدخل قيمة ثابتة أو حدد قيمة ديناميكية عن طريق النقر فوق رمز صعقة البرق بجوار المربع وتحديد مجموعة تسجيل تحتوي على قيم محددة محتملة. وفي كلتا الحالتين، يجب أن تطابق القيمة التي تحددها القيمة المحددة لإحدى خانات الاختيار بالمجموعة. لعرض القيمة المحددة لخانات الاختيار، حدد كل خانة اختيار وافتح عارض الخصائص ‏(Window > Properties).

هـ.حدد التنسيق الذي تريد تخطيط خانات الاختيار به باستخدام Dreamweaver.

قم بتخطيط خانات الاختيار باستخدام فواصل أسطر أو جدول. في حالة تحديد خيار الجدول، يقوم Dreamweaver بإنشاء جدول أحادي العمود، ويضع خانات الاختيار على اليسار والتسميات على اليمين.

يمكنك أيضًا تعيين الخصائص في عارض الخصائص أو مباشرةً من طريقة العرض Code.

لإدراج كائن نموذج List/Menu لنماذج HTML في الصفحة:

    أ.انقر داخل نموذج HTML في الصفحة (Insert > Form > Form).

    ب.حدد Insert > Form > List/Menu لإدراج كائن النموذج.

قم بأحد الإجراءات التالية:

• حدد كائن نموذج List/Menu الجديد أو الموجود لنموذج HTML، ثم انقر فوق الزر Dynamic في عارض الخصائص.

• حدد Insert > Data Objects > Dynamic Data > Dynamic Select List.

أكمل مربع الحوار Dynamic List/Menu، وانقر فوق OK.

  أ.في القائمة المنبثقة Options From Recordset، حدد مجموعة التسجيل المطلوب استخدامها كمصدر محتوى. يمكنك أيضًا استخدام هذه القائمة لتحرير عنصري list/menu الثابت والديناميكي لاحقًا.

  ب.في المنطقة Static Options، أدخل عنصرًا افتراضيًا في القائمة أو القائمة المنبثقة. استخدم كذلك هذا الخيار لتحرير الإدخالات الثابتة في كائن نموذج list/menu بعد إضافة محتوى ديناميكي.

  جـ.(اختياري) استخدم زر علامة الجمع (+) وزر علامة الطرح (-) لإضافة عناصر إلى القائمة وإزالتها منها. تظهر العناصر في القائمة بترتيب ظهورها في مربع الحوار Initial List Values نفسه. كما يظهر العنصر الأول بالقائمة محددًا عند تحميل الصفحة في مستعرض. استخدم زري السهم لأعلى والسهم لأسفل لإعادة ترتيب العناصر في القائمة.

  د.من القائمة المنبثقة Values، حدد الحقل الذي يحتوي على قيم عناصر القائمة.

  هـ.من القائمة المنبثقة Labels، حدد الحقل الذي يحتوي على تسميات عناصر القائمة.

  و.(اختياري) لتحديد عنصر قائمة معين ليظهر محددًا عند فتح الصفحة في مستعرض أو عند عرض السجل في النموذج، أدخل قيمة مساوية لقيمة عنصر القائمة في المربع Select Value Equal To.

    يمكنك إدخال قيمة ثابتة، أو تحديد قيمة ديناميكية عن طريق النقر فوق أيقونة صعقة البرق بجوار المربع وتحديد قيمة ديناميكية من قائمة مصادر البيانات. وفي كلتا الحالتين، يجب أن تطابق القيمة التي تحددها إحدى قيم عناصر القائمة.

يجب أن يحتوي مصدر البيانات على معلومات نصية. إذا لم تظهر مصادر البيانات في القائمة، أو إذا كانت مصادر البيانات المتاحة لا تلبي احتياجاتك، انقر على زر علامة الجمع (+) لتحديد مصدر بيانات جديد.

• انقر فوق رمز صعقة البرق بجوار المربع Check If وحدد الحقل من قائمة مصادر البيانات.

  يجب أن يحتوي مصدر البيانات على بيانات اختيار ثنائي، مثل نعم ولا، أو صواب وخطأ. وإذا لم تظهر أي مصادر بيانات في القائمة، أو لم تفِ مصادر البيانات المتاحة باحتياجاتك، فانقر فوق زر علامة الجمع (+) لتحديد مصدر بيانات جديد.

• في المربع Equal To، أدخل القيمة التي يجب أن يحتوي عليها الحقل لتظهر خانة الاختيار محددة.

  على سبيل المثال، لتظهر خانة الاختيار محددة عند احتواء حقل معين في سجل على القيمة نعم، أدخل نعم في المربع Equal To.

يعرض مربع قيمة الزر الاختياري قيم جميع الأزرار الاختيارية في المجموعة.

تحتوي مجموعة السجلات التي تحددها على قيم تطابق القيم المحددة للأزرار الاختيارية. لعرض القيم المحددة للأزرار الاختيارية، حدد كل زر اختياري وافتح مفتش الخصائص الخاص به (نافذة > خصائص).

أكمل مربع الحوار Dynamic Data، وانقر فوق OK.

  أ.حدد مصدر بيانات من قائمة مصادر البيانات.

  ب.(اختياري) حدد تنسيق بيانات للنص.

  جـ.(اختياري) قم بتعديل التعليمة البرمجية التي يدرجها Dreamweaver في صفحتك لعرض النص الديناميكي.

تأكد من أن كل حقل نصي تريد التحقق منه له اسم فريد.

على سبيل المثال، قد تحدد أن حقل نصي لعمر شخص يقبل الأرقام فقط.

على سبيل المثال، يمكنك إدخال اسم وظيفة غير موجودة بعد، مثل processMyForm().

على سبيل المثال، يمكنك تعريف دالة JavaScript التالية في قسم head في المستند لعرض رسالة عندما ينقر المستخدم على زر الإرسال:

function processMyForm(){

alert("شكرًا لك على طلبك!");

}

ولا تُجرى هذه الخطوة سوى مرة واحدة.

يظهر مربع الحوار Input Tag Accessibility Attributes.

لتخصيص معرف لحقل النموذج. يمكن استخدام هذه القيمة للإشارة إلى الحقل من JavaScript؛ كما تُستخدم أيضًا كقيمة للسمة for، في حالة تحديد الخيار Attach Label Tag Using For من خيارات Style.

لالتفاف علامة تسمية حول عنصر النموذج، كما يلي:

يستخدم السمة ‎for لإجراء التفاف علامة تسمية حول عنصر النموذج، كما يلي:

<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

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

ملاحظة: هذا هو الخيار المفضل لسهولة الوصول؛ ولكن قد تختلف الوظائف حسب المتصفح.

لا يستخدم علامة تسمية، كما يلي:

يستخدم مكافئًا من لوحة المفاتيح (حرف واحد) ومفتاح Alt (Windows) أو مفتاح Control (Macintosh) لتحديد كائن النموذج في المتصفح.على سبيل المثال، إذا قمت بإدخال B كمفتاح الوصول، فيمكن للمستخدمين الذين يستخدمون متصفح Macintosh أن يكتبوا Control+B لتحديد كائن النموذج.

لتحديد ترتيب علامات تبويب كائنات النموذج. إذا قمت بتعيين ترتيب التبويبات لكائن واحد، فيجب عليك تعيين ترتيب التبويبات لجميع الكائنات.

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

يظهر كائن النموذج في المستند.

• حرر الخصائص المناسبة في عرض Code.

• انقر بزر الماوس الأيمن (Windows) أو Control-click (Macintosh)، ثم حدد تعديل الوسم.