دليل المستخدم إلغاء

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

بحث

تاريخ آخر تحديث 20‏/12‏/2021

ملاحظة:

تم تحسين دعم عناصر نماذج HTML في تحديثات Dreamweaver Creative Cloud. للحصول على معلومات، راجع دعم HTML5 المحسّن لعناصر النماذج.

حول نماذج الويب

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

يمكنك إنشاء نماذج ترسل بيانات إلى معظم خوادم التطبيقات، بما في ذلك PHP، وASP، وColdFusion. إذا كنت تستخدم ColdFusion، فيمكنك أيضًا إضافة عناصر تحكم في النماذج خاصة بـ ColdFusion إلى النماذج.

ملاحظة:

يمكنك أيضًا إرسال بيانات النموذج مباشرةً إلى مستلم بريد إلكتروني.

كائنات النماذج

في Dreamweaver، تسمى أنواع إدخال النموذج كائنات النماذج. ‏‫كائنات النماذج‬ هي آليات تسمح للمستخدمين بإدخال البيانات. يمكنك إضافة ‏‫كائنات النماذج‬ التالية إلى نموذج:

حقول النص

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

ملاحظة:

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

الحقول المخفية

تخزن المعلومات التي يدخلها المستخدم، مثل الاسم، أو عنوان البريد الإلكتروني، أو عرض تفضيل، ثم تستخدم هذه البيانات عندما يزور المستخدم الموقع في المرة التالية.

الأزرار

تنفذ إجراءات عند النقر فوقها. يمكنك إضافة اسم مخصص أو تسمية مخصصة لزر، أو استخدام إحدى التسميتين المحددتين مسبقًا: “Submit” أو “Reset”. ويمكن استخدام زر لإرسال بيانات نموذج إلى الخادم أو لإعادة ضبط النموذج. يمكنك أيضًا تعيين مهام معالجة أخرى تحددها في نص ما. حيث يمكن مثلاً أن يحسب الزر إجمالي تكلفة أصناف محددة بناءً على قيم معينة.

خانات الاختيار

تسمح بعدة استجابات في مجموعة خيارات واحدة. ويمكن أن يحدد المستخدم أكبر عدد ممكن من الخيارات. يوضح المثال التالي ثلاثة عناصر خانات اختيار محددة وهي: Surfing، وMountain Biking، وRafting.

أزرار التحديد

تمثل خيارات حصرية. ويؤدي تحديد زر في مجموعة أزرار تحديد إلى إلغاء تحديد جميع الأزرار الأخرى في المجموعة (تتكون المجموعة من زرين أو أكثر يحملان الاسم نفسه). وفي المثال التالي، نرى أن Rafting هو الخيار المحدد حاليًا. وفي حالة نقر المستخدم فوق Surfing‎، يتم إلغاء تحديد الزر Rafting‎ تلقائيًا.

قوائم List

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

ملاحظة:

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

قوائم الانتقال

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

حقول الملفات

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

حقول الصور

تتيح لك إدراج صورة في نموذج. استخدم حقول الصور لإنشاء أزرار رسومية كأزرار Submit أو Reset. لاستخدام صورة في إجراء مهام بخلاف إرسال البيانات، يجب إرفاق سلوك بكائن النموذج.

إنشاء نموذج HTML

(مستخدمو Creative Cloud فقط): كجزء من دعم HTML5، تم إدخال صفات جديدة في اللوحة Properties لعناصر النموذج. بالإضافة، تم إدخال عناصر نموذج جديدة (البريد الإلكتروني، البحث، الهاتف، عنوان URL) في القسم Forms باللوحة Insert. لمزيد من المعلومات، راجع دعم HTML5 المحسّن لعناصر النماذج.

افتح صفحة وضع نقطة الإدخال في المكان الذي تريد ظهور النموذج فيه.
حدد Insert > Form، أو حدد الفئة Forms من لوحة Insert، وانقر فوق الرمز Form.

في طريقة العرض Design، يُشار إلى النماذج بحد خارجي أحمر منقط. وإذا لم يظهر هذا الحد الخارجي، فحدد View > Visual Aids > Invisible Elements.
قم بتعيين خصائص نموذج 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 في مربع الحوار.

ملاحظة:

وإذا لم يظهر مربع الحوار Input Tag Accessibility Attributes، فربما تكون وضعت نقطة الإدخال في طريقة العرض Code عندما حاولت إدراج كائن النموذج. تأكد من وضع نقطة الإدخال في طريقة العرض Design وأعد المحاولة. لمزيد من المعلومات حول هذا الموضوع، راجع مقالة ديفيد باورز Creating HTML forms in Dreamweaver.

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

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

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

ملاحظة:

يجب أن تحمل جميع أزرار التحديد بمجموعة ما الاسم نفسه.

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

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

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

استخدم الجداول لإضفاء بنية على كائنات النموذج وتسميات الحقول. عند استخدام الجداول في النماذج، تأكد أن جميع علامات table‎ مضمنة بين علامات form‎.

للحصول على تدريب حول إنشاء النماذج، راجع www.adobe.com/go/vid0160_ae.

للاطلاع على تدريب حول تصميم نماذج باستخدام CSS، راجع www.adobe.com/go/vid0161_ae.

خصائص كائنات حقول النص

حدد كائن حقل النص، ثم قم بتعيين أي من الخيارات التالية في عارض الخصائص:

Char Width

لتحديد أقصى عدد أحرف يمكن عرضه في الحقل. ويمكن أن يكون ذلك العدد أقل من Max Chars، الذي يحدد أقصى عدد أحرف يمكن إدخاله في الحقل. على سبيل المثال، إذا كان Char Width معينًا إلى 20 (القيمة الافتراضية) وأدخل المستخدم 100 حرف، فلن يمكن عرض أكثر من 20 حرفًا في حقل النص. رغم أنه لا يمكنك عرض الأحرف الموجودة بالحقل، إلا أن كائن الحقل يتعرف عيها ويُرسلها إلى الخادم لمعالجتها.

Max Chars

لتحديد أقصى عدد أحرف يمكن للمستخدم إدخاله في حقل نص أحادي السطر. استخدم Max Chars لقصر ‏‫الرموز البريدية على 5 أرقام، وكلمات المرور على 10 أرقام، وهكذا. وفي حالة ترك المربع Max Chars فارغًا، يمكن للمستخدمين إدخال أي مقدار من النصوص. إذا تجاوز النص عرض الأحرف بالحقل، فسيتم التنقل داخل النص. إذا تجاوز المستخدم أقصى عدد أحرف، فسيُصدر النموذج صوت تنبيه.

Num Lines

(يتوفر هذا الخيار عند تحديد الخيار Multiline)، وهو يعيّن ارتفاع الحقل بالنسبة لحقول النص متعددة الأسطر.

Disabled

لتعطيل منطقة النص.

Read-only

لجعل منطقة النص للقراءة فقط.

Type

لتعيين نوع الحقل كحقل بسطر واحد أو متعدد الأسطر أو كلمة مرور.

Single-line

ينتج عنه علامة input مع تعيين السمة type الخاصة بها إلى text. يتحول إعداد Char Width إلى السمة size، ويتحول إعداد Max Chars إلى السمة maxlength.

Multi-line

ينتج عنه علامة textarea‎. يتحول إعداد Char Width إلى السمة cols، ويتحول إعداد Num Lines إلى السمة rows.

Password

ينتج عنه علامة input مع تعيين السمة type الخاصة بها إلى password‎. يتحول الإعدادان Char Width وMax Chars إلى السمات نفسها التي تتحول إليها حقول النص أحادية السطر. عندما يكتب المستخدم في حقل نص كلمة المرور، يظهر ما يكتبه على هيئة نقاط أو نجوم لمنع الآخرين من رؤيتها.

Init val

لتعيين القيمة المعروضة في الحقل عند تحميل النموذج لأول مرة. على سبيل المثال، قد تشير إلى إدخال المستخدم لمعلومات في الحقل بتضمين ملاحظة أو قيمة كمثال.

Class

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

خيارات كائن الزر

Button Name

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

القيمة

لتحديد النص الذي يظهر على الزر.

Action

لتحديد ما يحدث عند النقر فوق الزر.

Submit Form

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

Reset Form

لمسح محتويات النموذج عند النقر فوق الزر.

None

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

Class

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

خيارات كائن خانة الاختيار

Checked Value

لتعيين القيمة المطلوب إرسالها إلى الخادم عند تحديد خانة الاختيار. على سبيل المثال، يمكنك تعيين القيمة 4 في مسح إحصائي ما لتفيد موافق تمامًا، والقيمة 1 لغير موافق على الإطلاق.

Initial State

لتحديد ما إذا كانت خانة الاختيار ستظهر محددة أم غير محددة عند تحميل النموذج في المستعرض.

Dynamic

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

Class

لتطبيق قواعد Cascading Style Sheets ‏(CSS) على الكائن.

خيارات كائن زر التحديد الأحادي

Checked Value

لتعيين القيمة المطلوب إرسالها إلى الخادم عند تحديد زر التحديد. قد تكتب مثلاً تزلج في المربع Checked Value للإشارة إلى اختيار مستخدم للتزلج.

Initial State

لتحديد ما إذا كان زر التحديد سيظهر محددًا أم غير محدد عند تحميل النموذج في المستعرض.

Dynamic

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

Class

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

خيارات القائمة

List/Menu

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

Type

للإشارة إلى ما إذا كانت القائمة ستظهر منبثقة عند النقر فوقها (الخيار Menu) أم سيتم عرض قائمة عناصر يمكن التنقل خلالها (الخيار List). حدد الخيار Menu إذا كنت تريد أن يظهر خيار واحد فقط عند عرض النموذج في مستعرض. وحينئذ يكون على المستخدم النقر فوق السهم لأسفل لعرض الخيارات الأخرى.

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

Height

(فقط لنوع القائمة List) لتعيين عدد من العناصر التي يمكن عرضها في القائمة.

Selections

(فقط لنوع القائمة List) للإشارة إلى ما إذا كان سيُسمح للمستخدم بتحديد عدة عناصر من القائمة.

List Values

لفتح مربع حوار يتيح لك إضافة العناصر إلى قائمة نموذج:

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

Dynamic

يتيح للخادم تحديد عنصر من القائمة بشكل ديناميكي عند عرضها لأول مرة.

Class

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

Initially Selected

لتعيين العناصر التي يتم تحديدها في القائمة بشكل افتراضي. انقر فوق عنصر أو أكثر في القائمة.

إدراج حقول تحميل الملف

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

وقبل أن تتمكن من استخدام حقول تحميل الملف، يجب أن يكون لديك برنامج نصي أو صفحة من جانب الخادم يمكنها التعامل مع إرسال الملفات. راجع وثائق تقنية الخادم التي تستخدمها لمعالجة بيانات النموذج. فمثلاً إذا كنت تستخدم PHP، فراجع "Handling files uploads" في دليل PHP Manual عبر الإنترنت على الموقع http://us2.php.net/features.file-upload.php.

تتطلب حقول الملفات استخدام الأسلوب POST‎ لنقل الملفات من المستعرض إلى الخادم. يتم إرسال الملف إلى العنوان المحدد في المربع Action للنموذج.

ملاحظة:

اتصل بمسؤول الخادم للتأكد أن تحميل الملفات المجهولة مسموح به قبل استخدام حقل الملف.

أدرج نموذجًا في الصفحة (Insert > Form).
حدد النموذج لإظهار عارض الخصائص له.
قم بتعيين Method للنموذج إلى POST‎.
ومن القائمة المنبثقة Enctype، حدد multipart/form-data.
من المربع Action، حدد البرنامج النصي أو الصفحة من جانب الخادم التي يمكنها التعامل مع الملف المحمّل.
ضع نقطة الإدخال داخل الحد الخارجي للنموذج، وحدد Insert > Form > File Field.
قم بتعيين أي من الخيارات التالية في عارض الخصائص:

File Field Name

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

Char Width

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

Max Chars

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

إدراج زر صورة

يمكنك استخدام الصور كرموز أزرار. لاستخدام صورة في إجراء مهام بخلاف إرسال البيانات، يجب إرفاق سلوك بكائن النموذج.

في المستند، ضع نقطة الإدخال داخل الحد الخارجي للنموذج.
حدد Insert > Form > Image Field.

يظهر مربع الحوار Select Image Source.
حدد صورة الزر من مربع الحوار Select Image Source، ثم انقر فوق OK.
قم بتعيين أي من الخيارات التالية في عارض الخصائص:

ImageField

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

Src

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

Alt

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

Align

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

Edit Image

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

Class

يتيح لك تطبيق قواعد CSS على الكائن.
لإرفاق سلوك JavaScript بالزر، حدد الصورة، ثم حدد السلوك من اللوحة Behaviors ‏(Window > Behaviors).

خيارات كائن الحقل المخفي

HiddenField

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

القيمة

لتخصيص قيمة للحقل. يتم تمرير هذه القيمة إلى الخادم عند إرسال النموذج.

إدراج مجموعة أزرار تحديد

ضع نقطة الإدخال داخل الحد الخارجي للنموذج.
حدد Insert > Form > Radio Group.
أكمل مربع الحوار، وانقر فوق OK.

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

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

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

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

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

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

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

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

إدراج مجموعة خانات اختيار

ضع نقطة الإدخال داخل الحد الخارجي للنموذج.
حدد Insert > Form > Checkbox Group.
أكمل مربع الحوار، وانقر فوق OK.

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

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

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

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

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

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

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

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

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

حول كائنات النماذج الديناميكية

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

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

إدراج قائمة نموذج HTML ديناميكي أو تغييره

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

وقبل البدء، يجب إدراج نموذج HTML في صفحة ColdFusion، أو PHP، أو ASP، كما يجب تحديد مجموعة تسجيل أو مصدر آخر للمحتوى الديناميكي للقائمة.

لإدراج كائن نموذج 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.

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

تحويل قوائم نموذج HTML الحالية إلى قوائم ديناميكية

من طريقة العرض Design، حدد كائن النموذج list/menu.
في عارض الخصائص، انقر فوق الزر Dynamic.
أكمل مربع الحوار، وانقر فوق OK.

عرض محتوى ديناميكي في حقول نص HTML

يمكنك عرض محتوى ديناميكي في حقول نص HTML عند عرض النموذج في مستعرض.

وقبل البدء، يجب إنشاء النموذج في صفحة ColdFusion، أو PHP، أو ASP، كما يجب تحديد مجموعة تسجيل أو مصدر آخر للمحتوى الديناميكي لحقل النص.

حدد حقل النص في نموذج HTML من الصفحة.
في عارض الخصائص، انقر فوق رمز صعقة البرق بجوار المربع Init Val لعرض مربع الحوار Dynamic Data.
حدد عمود مجموعة التسجيل الذي سيُستخدم لتزويد حقل النص بالقيمة، ثم انقر فوق OK.

تعيين خيارات مربع الحوار Dynamic Text Field

حدد حقل النص المطلوب جعله ديناميكيًا من القائمة المنبثقة Text Field.
انقر فوق رمز صعقة البرق بجوار المربع Set Value To وحدد مصدر بيانات من قائمة مصادر البيانات، ثم انقر فوق OK.

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

التحديد المسبق لخانة اختيار HTML ديناميكيًا

يمكنك ترك الخادم يحدد ما إذا كان سيتم تحديد خانة اختيار عند عرض النموذج في مستعرض أم لا.

وقبل البدء، يجب إنشاء النموذج في صفحة ColdFusion، أو PHP، أو ASP، كما يجب تحديد مجموعة تسجيل أو مصدر آخر للمحتوى الديناميكي لخانات الاختيار. وبشكل مثالي، يجب أن يتضمن مصدر المحتوى بيانات اختيار ثنائي، مثل نعم/لا أو صواب/خطأ.

حدد كائن نموذج خانة اختيار في الصفحة.
في عارض الخصائص، انقر فوق الزر Dynamic.
أكمل مربع الحوار CheckBox، وانقر فوق OK:
- انقر فوق رمز صعقة البرق بجوار المربع Check If وحدد الحقل من قائمة مصادر البيانات.
  
  يجب أن يحتوي مصدر البيانات على بيانات اختيار ثنائي، مثل نعم ولا، أو صواب وخطأ. وإذا لم تظهر أي مصادر بيانات في القائمة، أو لم تفِ مصادر البيانات المتاحة باحتياجاتك، فانقر فوق زر علامة الجمع (+) لتحديد مصدر بيانات جديد.
- في المربع Equal To، أدخل القيمة التي يجب أن يحتوي عليها الحقل لتظهر خانة الاختيار محددة.
  
  على سبيل المثال، لتظهر خانة الاختيار محددة عند احتواء حقل معين في سجل على القيمة نعم، أدخل نعم في المربع Equal To.
ملاحظة:

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

التحديد المسبق لزر خيار HTML ديناميكيًا

يمكنك تحديد زر تحديد HTML مسبقًا بشكل ديناميكي عند عرض سجل في نموذج HTML في مستعرض.

وقبل البدء، يجب إنشاء النموذج في صفحة ColdFusion، أو PHP، أو ASP، وإدراج مجموعة أزرار تحديد HTML واحدة على الأقل (Insert > Form > Radio Group). كما يجب أيضًا تحديد مجموعة تسجيل أو مصدر آخر للمحتوى الديناميكي لأزرار التحديد. وبشكل مثالي، يجب أن يتضمن مصدر المحتوى بيانات اختيار ثنائي، مثل نعم/لا أو صواب/خطأ.

من طريقة العرض Design، حدد زر تحديد في مجموعة أزرار التحديد.
في عارض الخصائص، انقر فوق الزر Dynamic.
أكمل مربع الحوار Dynamic Radio Group، وانقر فوق OK.

تعيين خيارات مربع الحوار Dynamic Radio Group

من القائمة المنبثقة Radio Button Group، حدد نموذجًا ومجموعة أزرار تحديد في الصفحة.

يعرض المربع Radio Button Value قيم جميع أزرار التحديد التي تشملها المجموعة.
حدد قيمة لتحديدها مسبقًا من قائمة القيم بشكل ديناميكي. يتم عرض هذه القيمة في المربع Value.
انقر فوق رمز صعقة البرق بجوار المربع Select Value Equal To، وحدد مجموعة تسجيل تحتوي على قيم محددة محتملة لأزرار التحديد بالمجموعة.

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

تعيين خيارات مربع الحوار Dynamic Radio Group ‏(ColdFusion)

حدد مجموعة أزرار تحديد ونموذجًا من القائمة المنبثقة Radio Group.
انقر فوق رمز صعقة البرق بجوار المربع Select Value Equal To.
أكمل مربع الحوار Dynamic Data، وانقر فوق OK.

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

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

جـ.(اختياري) قم بتعديل التعليمة البرمجية التي يدرجها Dreamweaver في صفحتك لعرض النص الديناميكي.
انقر فوق OK لإغلاق مربع الحوار Dynamic Radio Group، وأدرج العنصر النائب للمحتوى الديناميكي في Radio Group.

التحقق من بيانات نموذج HTML

يمكنك باستخدام Dreamweaver إضافة تعليمة برمجية لـ JavaScript للتحقق من محتويات حقول نص معينة لضمان إدخال المستخدم لنوع البيانات الصحيح.

يمكنك استخدام عناصر واجهة مستخدم النموذج Spry لإنشاء النماذج والتحقق من محتويات عناصر النموذج المحددة. لمزيد من المعلومات، راجع موضوعات Spry المذكورة أدناه.

يمكنك أيضًا إنشاء نماذج ColdFusion في Dreamweaver للتحقق من محتويات حقول معينة. لمزيد من المعلومات، راجع فصل ColdFusion المذكور أدناه.

قم بإنشاء نموذج HTML يتضمن حقل نص واحد وزر Submit واحد على الأقل.

تأكد من احتواء كل حقل نص تريد التحقق منه على اسم فريد.
حدد الزر Submit.
من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد السلوك Validate Form من القائمة.
قم بتعيين قواعد التحقق لكل حقل نص، وانقر فوق OK.

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

ملاحظة:

لا يكون السلوك Validate Form متاحًا إلا في حالة إدخال حقل نص في المستند.

إرفاق سلوكيات JavaScript بكائنات نموذج HTML

يمكنك إرفاق سلوكيات JavaScript مخزنة في Dreamweaver بكائنات نموذج HTML كالأزرار.

حدد كائن نموذج HTML.
من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد سلوكًا من القائمة.

إرفاق برامج نصية مخصصة بأزرار نموذج HTML

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

حدد الزر Submit من نموذج.
من اللوحة Behaviors ‏(Window > Behaviors)، انقر فوق زر علامة الجمع (+) وحدد Call JavaScript من القائمة.
في المربع Call JavaScript، أدخل اسم وظيفة JavaScript المطلوب تشغيلها عند نقر المستخدم فوق الزر، ثم انقر فوق OK.

على سبيل المثال، يمكنك إدخال اسم وظيفة غير موجودة بعد، مثل processMyForm().
إذا لم تكن وظيفة JavaScript موجودة في القسم الرئيسي من المستند، فأضفها الآن.

على سبيل المثال، يمكنك تحديد وظيفة JavaScript التالية في القسم الرئيسي من المستند لعرض رسالة عند نقر المستخدم فوق الزر Submit:
```
function processMyForm(){ 
    alert('Thanks for your order!'); 
}
```

إنشاء نماذج HTML يمكن الوصول إليها

عند إدراج كائن نموذج HTML، يمكنك تمكين الوصول إلى كائن النموذج، وتغيير سمات إمكانية الوصول لاحقًا.

إضافة كائن نموذج يمكن الوصول إليه

عند إضافة كائنات نماذج يمكن الوصول إليها لأول مرة، قم بتنشيط مربع الحوار Accessibility لكائنات النموذج (راجع ‏‫تحسين مساحة العمل للتطوير المرئي‬).

ولا تُجرى هذه الخطوة سوى مرة واحدة.
في المستند، ضع نقطة الإدخال في المكان الذي تريد ظهور كائن النموذج به.
حدد Insert > Form، وحدد كائن نموذج تريد إدراجه.

يظهر مربع الحوار Input Tag Accessibility Attributes.
أكمل مربع الحوار، وانقر فوق OK. فيما يلي قائمة جزئية بالخيارات:

ملاحظة:

يقرأ قارئ الشاشة الاسم الذي تُدخله على أنه السمة Label للكائن.

ID

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

Wrap With Label Tag

لالتفاف علامة تسمية حول عنصر النموذج، كما يلي:
<label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

Attach Label Tag Using For

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

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

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

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

No Label Tag

لا يستخدم علامة تسمية، كما يلي:
<input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

Access Key

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

Tab Index

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

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

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

ملاحظة:

إذا قمت بالضغط على Cancel، يظهر كائن النموذج في المستند، ولكن لا يقوم Dreamweaver بربط علامات أو سمات إمكانية الوصول به.

تحرير قيم إمكانية الوصول لكائن نموذج

في النافذة Document، حدد الكائن.
قم بأحد الإجراءات التالية:
- تحرير السمات المناسبة في طريقة العرض Code.
- انقر بزر الماوس الأيمن (في نظام التشغيل Windows) أو انقر مع الضغط على Control (في نظام التشغيل Macintosh)، ثم حدد Edit Tag.

احصل على مساعدة بشكل أسرع وأسهل

مستخدم جديد؟

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

حول نماذج الويب

كائنات النماذج

إنشاء نموذج HTML

خصائص كائنات حقول النص

خيارات كائن الزر

خيارات كائن خانة الاختيار

خيارات كائن زر التحديد الأحادي

خيارات القائمة

إدراج حقول تحميل الملف

إدراج زر صورة

خيارات كائن الحقل المخفي

إدراج مجموعة أزرار تحديد

إدراج مجموعة خانات اختيار

حول كائنات النماذج الديناميكية

إدراج قائمة نموذج HTML ديناميكي أو تغييره

تحويل قوائم نموذج HTML الحالية إلى قوائم ديناميكية

عرض محتوى ديناميكي في حقول نص HTML

تعيين خيارات مربع الحوار Dynamic Text Field

التحديد المسبق لخانة اختيار HTML ديناميكيًا

التحديد المسبق لزر خيار HTML ديناميكيًا

تعيين خيارات مربع الحوار Dynamic Radio Group

تعيين خيارات مربع الحوار Dynamic Radio Group ‏(ColdFusion)

التحقق من بيانات نموذج HTML

إرفاق سلوكيات JavaScript بكائنات نموذج HTML

إرفاق برامج نصية مخصصة بأزرار نموذج HTML

إنشاء نماذج HTML يمكن الوصول إليها

إضافة كائن نموذج يمكن الوصول إليه

تحرير قيم إمكانية الوصول لكائن نموذج

المزيد مثل هذا

احصل على مساعدة بشكل أسرع وأسهل

طرح سؤال على المجتمع

اتصل بنا