إنشاء نموذج CSS. نماذج HTML

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

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

مثال: نموذج HTML بسيط

جربها بنفسك "

النموذج الأول الخاص بي:
اسم:
اسم العائلة:

نموذج بسيط

عنصر

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

عنصر

يتم إنشاء كافة حقول النموذج تقريبًا باستخدام العنصر (من الإدخال الإنجليزي - الإدخال). مظهر العنصر يتغير حسب قيمة السمة الخاصة به يكتب:

فيما يلي بعض قيم السمات يكتب:

إدخال النص وكلمة المرور

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

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

مثال على إنشاء نموذج بحقل كلمة المرور:

مثال: حقل كلمة المرور

جربها بنفسك "

تسجيلك:

كلمة المرور:

تسجيلك:

كلمة المرور:

يمكنك استخدام السمة بالتزامن مع هذه السمة com.maxleght، والتي تحدد قيمتها الحد الأقصى لعدد الأحرف التي يمكن إدخالها في سلسلة معينة. يمكنك أيضًا ضبط طول حقل الإدخال باستخدام السمة مقاس. بشكل افتراضي، تحدد معظم المتصفحات عرض حقل النص بـ 20 حرفًا. للتحكم في عرض عناصر النماذج الجديدة بدلاً من السمة مقاس، نوصي باستخدام أوراق الأنماط المتتالية (CSS).
يصف قيمةيحدد القيمة التي يتم عرضها افتراضيًا في حقل النص عند تحميل النموذج. من خلال إدخال قيمة افتراضية في الحقل، يمكنك أن تشرح للمستخدم بالضبط البيانات والتنسيق الذي تريد أن يدخله المستخدم هنا. هذا يشبه العينة، لأنه أكثر ملاءمة للمستخدم لملء النموذج، ورؤية مثال أمامه.

مفاتيح (راديو)

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

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

جربها بنفسك "

كم عمرك؟

تحت 18
من 18 إلى 24
من 25 إلى 35
أكثر من 35

كم عمرك؟

تحت 18
من 18 إلى 24
من 25 إلى 35
أكثر من 35

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

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

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

مثال: استخدام أزرار الاختيار

جربها بنفسك "

موسيقى الجاز
البلوز
صخر
تشانسون
دولة

ما هي أنواع الموسيقى التي تحبها؟

موسيقى الجاز
البلوز
صخر
تشانسون
دولة

أزرار التأكيد (الإرسال) والمسح (إعادة الضبط).

عنصر يكتب يُقدِّميقوم بإنشاء زر، عند النقر عليه، يرسل المتصفح إلى برنامج نصي للخادم لمعالجة البيانات التي أدخلها المستخدم في النموذج. إذا قمنا بإنشاء زر لمسح النموذج، فإننا نقوم بتعيين السمة يكتبقيمة "إعادة الضبط". عنصر يكتب يُقدِّمقد يتم تعيين سمة اختيارية اسم. يصف قيمةيستخدم في هذا العنصر لتحديد النص الذي يشير إلى التسمية الموجودة على الزر. بشكل افتراضي، تحتوي المتصفحات على كلمة "إرسال" مكتوبة على الزر، وإذا لم تكن راضيًا عن هذا النقش، فأدخله بنفسك. نظرًا لأن أنماط أزرار التأكيد قد تختلف باختلاف المتصفحات، فمن الأفضل تخصيص نمط الزر بنفسك باستخدام أدوات CSS أو استخدام الأزرار الرسومية.
إنشاء أزرار التأكيد والمسح:

مثال: استخدام الإرسال وإعادة التعيين

جربها بنفسك "

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

صفة الفعل.

الرئيسية للعنصر

يوجد ملف المعالجة على الخادم mytestserver.comفي المجلد namefolderواسم البرنامج النصي للخادم الذي سيقوم بمعالجة البيانات - obrabotchik.php. سيتم نقل جميع البيانات التي أدخلتها في النموذج الموجود على صفحة الويب إليه. يشير الامتداد .php إلى أن النموذج المحدد تتم معالجته بواسطة برنامج نصي مكتوب بلغة PHP. يمكن كتابة المعالج نفسه بلغة أخرى، على سبيل المثال يمكن أن يكون لغة البرمجة النصية Python، Ruby، إلخ.
يُنصح دائمًا بتعيين قيمة السمة فعل. إذا كان النموذج يجب أن يمرر القيم إلى نفس الصفحة التي يوجد بها، فقم بتوفير سلسلة فارغة كقيمة سمة الإجراء: action = "".

سمة الطريقة

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

طريقة ما بعد

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

الحصول على الطريقة

كما تعلم، فإن الوظيفة الرئيسية للمتصفح هي استقبال صفحات الويب من الخادم. لذلك عندما تستخدم الطريقة يحصل، يقوم متصفحك ببساطة باسترداد صفحة الويب كما يفعل دائمًا. طريقة يحصليقوم أيضًا بتغليف بيانات النموذج، ولكنه يقوم بإلحاقها بنهاية عنوان URL قبل إرسال الطلب إلى الخادم. لفهم كيفية عمل الطريقة يحصل، دعونا نرى ذلك على أرض الواقع. افتح المثال الأول من هذا الدرس (مثال: نموذج HTML بسيط) في برنامج Notepad (على سبيل المثال Notepad++) وقم بإجراء تغيير بسيط على كود HTML:

أولئك. يستبدل بريدعلى يحصل.
احفظ الملف تحت الاسم file_name.htmlوتحديث صفحة المتصفح (F5)، ثم ملئ النموذج مثلاً فاسيا بوبكين، وانقر على زر "إرسال". في شريط العناوين في متصفحك سترى شيئًا مثل هذا:

File_name.html?firstname=Vasya&lastname=Pupkin

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

تجميع عناصر النموذج

يمكن تجميع عناصر النموذج المرتبطة بالمعنى بين العلامات

. سيتم عرض المتصفح

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

...محتويات النموذج...

يجب أن تكون هناك عناصر تحكم داخل عنصر النموذج مباشرةً، والتي يمكن أن يكون عددها حسب الرغبة.

سمات النموذج:

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

عناصر نموذج HTML

<نوع الإدخال = "نص" الاسم = "تسجيل الدخول" الحجم = "20" القيمة = "تسجيل الدخول)" maxlength = "25" > !}

نتيجة:

تشير قيمة سمة النوع - النص - إلى أن هذا حقل نصي
الحجم - حجم حقل النص بالأحرف
maxlength - الحد الأقصى لعدد الأحرف التي يمكن احتواؤها في الحقل
القيمة - النص الأولي في حقل النص
الاسم - اسم العنصر الضروري لمعالجة البيانات في ملف المعالج

نتيجة:

بدلا من النص، يتم عرض قناع في الحقل - نجوم أو دوائر

<نوع الإدخال = قيمة "إرسال" = "إرسال البيانات">

نتيجة:

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

<نوع الإدخال = "إعادة تعيين" القيمة = " نموذج واضح" > !}

نتيجة:

يقوم الزر بإرجاع حالة كافة عناصر التحكم إلى حالتها الأصلية (يمسح النموذج)

<نوع الإدخال = اسم "مربع الاختيار" = قيمة "asp" = "yes" > !}أ.س.ب.<ر> <نوع الإدخال = اسم "مربع الاختيار" = قيمة "js" = "yes" checked = "checked" > !}جافا سكريبت<ر> <نوع الإدخال = اسم "مربع الاختيار" = قيمة "php" = "yes" > !}بي أتش بي<ر> <نوع الإدخال = "مربع الاختيار" الاسم = "html" القيمة = "yes" checked = "checked" > !}لغة البرمجة<ر>

أ.س.ب.
جافا سكريبت
بي أتش بي
لغة البرمجة

نتيجة:

أ.س.ب.
جافا سكريبت
بي أتش بي
لغة البرمجة

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

<نوع الإدخال = اسم "الراديو" = قيمة "الكتاب" = "asp" > !}أ.س.ب.<ر> <نوع الإدخال = اسم "الراديو" = قيمة "الكتاب" = "js" > !}جافا سكريبت<ر> <نوع الإدخال = اسم "الراديو" = قيمة "الكتاب" = "php" > !}بي أتش بي<ر> <نوع الإدخال = اسم "الراديو" = قيمة "الكتاب" = "html" checked = "checked" > !}لغة البرمجة<ر>

أ.س.ب.
جافا سكريبت
بي أتش بي
لغة البرمجة

نتيجة:

أ.س.ب.
جافا سكريبت
بي أتش بي
لغة البرمجة

يعمل زر الاختيار html على خيار واحد من بين عدة خيارات

تقوم السمة المحددة على الفور بتعيين العنصر على أنه محدد

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

قائمة منسدلة HTML

دعونا نلقي نظرة على مثال لإضافة قائمة منسدلة:

1 2 3 4 5 6

<حدد الاسم = "الكتاب" الحجم = "1"> <قيمة الخيار = "asp" > !}أ.س.ب.</الخيار> <قيمة الخيار = "js" > !}جافا سكريبت</الخيار> <قيمة الخيار = "php" > !}بي أتش بي</الخيار> <قيمة الخيار = "html" selected = "selected" > !}لغة البرمجة</الخيار> </حدد>

نتيجة:

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

للقوائم الكبيرة والمعقدة هناك خيار إضافة عناوين فرعية- علامة optgroup مع سمة التسمية:

1 2 3 4 5 6 7 8 9 10 11 12

<حدد الاسم = "الكتاب" الحجم = "1"> <تسمية optgroup = "الإنجليزية"> <قيمة الخيار = "asp" > !}أ.س.ب.</الخيار> <قيمة الخيار = "js" > !}جافا سكريبت</الخيار> <قيمة الخيار = "php" > !}بي أتش بي</الخيار> <قيمة الخيار = "html" selected = "selected" > !}لغة البرمجة</الخيار> </optgroup> <تسمية optgroup = "الروس"> <قيمة الخيار = "asp_rus" > !} ASP باللغة الروسية</الخيار> <قيمة الخيار = "js_rus" > !}جافا سكريبت باللغة الروسية</الخيار> </optgroup> </حدد>

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

نص

نتيجة:

يعتمد عرض العنصر على سمة cols، التي تحدد عدد الأحرف التي سيتم ملاءمتها أفقيًا
تحدد سمة الصفوف عدد الصفوف في العنصر

عناصر أخرى

عناصر وسمات إضافية

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

<نوع الإدخال = "مربع الاختيار" معرف = "book1"> <تسمية = "book1">أ.س.ب.</التسمية>

أ.س.ب.

في المثال، تم إنشاء نقش (علامة تسمية) لعنصر خانة الاختيار. يتم تنفيذ الربط من خلال سمة المعرف، والتي يتم تحديد قيمتها في سمة التسمية.

نتيجة:

تسمح لك السمة المعوقة بقفل عنصر ما، مما يجعله غير قابل للتغيير من قبل المستخدم:

<نوع الإدخال = "نص" الاسم = "تسجيل الدخول" الحجم = "20" القيمة = "تسجيل الدخول)" maxlength = "25" disabled = "disabled" >!}
<نوع الإدخال = اسم "مربع الاختيار" = قيمة "asp" = "yes" > !}أ.س.ب.<ر> <نوع الإدخال = اسم "مربع الاختيار" = قيمة "js" = "yes" checked = "checked" disabled = "disabled" > !}جافا سكريبت<ر>

أ.س.ب.
جافا سكريبت

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

بناء جملة العلامة

بطاقة شعار

يحتوي على سمة إجراء مهمة للغاية، والتي يتم تعيين عنوان (URL) للبرنامج النصي الذي يتم إرسال المعلومات المستلمة من النموذج للمعالجة. لن نخوض في التفاصيل حول ما يحدث بعد إرسال البيانات، نظرًا لأن هذه المشكلات تم حلها بالفعل ليس عن طريق html، ولكن عن طريق أساليب GET وPOST في PHP.

مثال 1. نموذج HTML مع الأزرار

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

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

بعد كل ما سبق سيكون هناك زر موافق

بعد النقر فوق "موافق"، سيتم تحديث الصفحة ببساطة، لأن... لم نحدد معلمة الإجراء

يتحول إلى ما يلي على الصفحة:

التوضيحات على سبيل المثال

الإجراء = "" - يشير إلى أن معالجة البيانات ستتم في نفس الصفحة.
- تشير السمة type = "radio" إلى أنك بحاجة إلى عرض النص بعد هذا الرمز كزر تحديد. تلعب سمة الاسم والقيمة في هذه العلامة الآن دورًا صغيرًا بالنسبة لنا، لأن نحن لا ندرس PHP الآن (راجع دروس PHP).
- تشير السمة type = "text" إلى أن هذا سيكون حقلاً نصيًا. هناك أيضًا سمتان مهمتان هنا: الاسم (لـ php) والقيمة (القيمة الافتراضية).
- تشير السمة type = "textarea" إلى أن هذا سيكون حقلاً نصيًا كبيرًا. الاختلاف الوحيد عن الحالة السابقة هو أنه يسمح لك بتسجيل كمية كبيرة من النص.
- تشير السمة type = "submit" إلى أن هذا زر. تحتوي سمة القيمة على ما سيتم كتابته على الزر.

يمكنك قراءة المزيد عن كل هذه العناصر في الدرس 15: عناصر العلامة

، حيث يتم أخذ أزرار الاختيار والقوائم ومربعات الاختيار وحقول النص والأزرار في الاعتبار.

الآن دعونا نلقي نظرة فاحصة على جميع سمات العلامة .

سمات العلامة والخصائص

1. السمة قبول مجموعة الأحرف = "الترميز"- يحدد الترميز الذي يمكن للخادم من خلاله قبول بيانات النموذج ومعالجتها. يمكن أن يأخذ قيمًا مختلفة، على سبيل المثال، CP1251، UTF-8، إلخ.

2. سمة الإجراء = "URL" هي عنوان البرنامج النصي الذي يعالج البيانات المرسلة من النموذج. إذا تركت هذه القيمة فارغة، فستتم معالجة البيانات في نفس المستند الذي يوجد به النموذج.

3. سمة الإكمال التلقائي = "تشغيل/إيقاف" - لتعيين الإكمال التلقائي للنموذج أو تعطيله. يمكن أن تأخذ قيمتين:

تشغيل - تمكين الملء التلقائي؛
إيقاف - تعطيل الملء التلقائي؛

4. السمة enctype = "المعلمة" - تحدد طريقة تشفير البيانات. يمكن أن تأخذ القيم التالية:

application/x-www-form-urlencoded- يتم استبدال المسافات بـ +، ويتم ترميز الأحرف مثل الحروف الروسية بقيمها السداسية العشرية
بيانات متعددة الأجزاء/النموذج - لم يتم تشفير البيانات
نص/عادي - يتم استبدال المسافات بعلامة +، ولا يتم تشفير الحروف والأحرف الأخرى.

5. سمة الطريقة = "POST/GET" - تحدد طريقة الإرسال. يمكن أن تأخذ قيمتين:

GET - نقل البيانات في شريط العناوين (هناك قيود على حجم البيانات المرسلة)
POST - يرسل البيانات إلى الخادم في طلب المتصفح (يمكن إرسال كمية كبيرة من البيانات، نظرًا لعدم وجود قيود على الحجم)

6. اسم السمة = "الاسم" - يحدد اسم النموذج. يتم استخدامه غالبًا عندما يكون هناك نماذج متعددة بحيث يمكنك الوصول إلى نموذج معين من خلال برنامج نصي.

7. سمة novalidate - تلغي الفحص المضمن لبيانات النموذج للتأكد من صحة الإدخال.

8. السمة target="parameter" هي اسم النافذة أو الإطار حيث سيقوم المعالج بتحميل النتيجة التي تم إرجاعها. يمكن أن تأخذ القيم التالية:

_blank - لتحميل الصفحة في نافذة متصفح جديدة
_self - يقوم بتحميل الصفحة في النافذة الحالية
_parent - يقوم بتحميل الصفحة في الإطار الأصلي
_top - يلغي جميع الإطارات ويحمل الصفحة في نافذة المتصفح الكاملة

عزيزي القارئ، لقد تعلمت الآن الكثير عن علامة نموذج html. الآن أنصحك بالانتقال إلى الدرس التالي.

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

يوضح الشكل استمارة تسجيل الطالب على الموقع الإلكتروني للمؤسسة التعليمية.

يتم استخدام حاوية لإنشاء نموذج

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

الهيكل في أبسط صوره:

عناصر النموذج...

يجب أن يحتوي كل نموذج أيضًا على زر إرسال لإرسال البيانات بعد ملء النموذج.

هيكل الزر:

لذلك، لتسجيل جميع عناصر النموذج تقريبًا، يتم استخدام العلامة مع سمة النوع. لإنشاء زر يقوم بإعادة تعيين كافة البيانات من النماذج، يتم استخدام البنية التالية:

لإنشاء حقل نص، هناك معلمة نص. يتم استخدام المعلمات التالية: الاسم - اسم الحقل؛ الحجم - للحقل بالرموز؛ maxlength - الحد الأقصى لعدد الأحرف الممكنة في الحقل؛ القيمة - المعلومات المعروضة في النموذج بشكل افتراضي

مثال لإدخال نموذج يحتوي على حقلين نصيين:

وتظهر نتيجة النموذج في الشكل.

إذا كنت بحاجة إلى إدخال كمية كبيرة من المعلومات في حقل نصي، على سبيل المثال، تعليق، فاستخدم نموذج منطقة النص، الذي تم إنشاؤه باستخدام علامة بالصفات التالية: الاسم – اسم المنطقة؛ cols - عدد أعمدة المنطقة؛ الصفوف - عدد الصفوف؛ التفاف - طريقة التفاف الخطوط (تشغيل - التفاف الخطوط، إيقاف - عدم التفاف الخطوط).إلى الكود أعلاه دعنا نضيف حقل منطقة النص:تعليق: <textarea name="area" cols=”25” rows=”5” wrap=”on”>

تظهر نتيجة عمل الكود مع منطقة النص في الشكل.

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

لكي يتم تمييز العنصر عند تحميل الصفحة، يكون ذلك ضروريًا في العلامة

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

هيكل مربع الاختيار وإدخال زر الاختيار:

نص

زر الراديو:

نص

في العناصر المحددة في البنية، يتم استخدام السمة المحددة بشكل افتراضي لتمييز مربع الاختيار وزر الاختيار. يظهر في الشكل مثال على استخدام مربع الاختيار وزر الاختيار ورمز HTML.

عنصر نموذج آخر هو الزر، المحدد باستخدام سمة علامة النوع مع زر القيمة:

في الكود المحدد لإنشاء زر، يوجد معلمة onclick، والتي عادةً ما تحدد كودًا في لغة برمجة لتنفيذ إجراء معين عند النقر فوق هذا الزر:

لعرض رسالة في نافذة خاصة، استخدم أمر JavaScript – aler. وتظهر نتيجة المثال في الشكل.

لإدراج صورة في زر، استخدم الكود الموضح في المثال التالي:

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

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

سيكون عنصر النموذج المخفي غير مرئي في نافذة المتصفح.

لتحميل الملفات إلى الخادم، تحتوي النماذج على عنصر ملف. فيما يلي مثال على رمز لتحميل الملفات إلى الخادم:

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

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

يتم إنشاء النموذج نفسه باستخدام العلامة

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

يمكنك أيضًا تحديد عنوان بريد إلكتروني كقيمة سمة الإجراء، بدءًا من الكلمة الأساسية mailto:. عند إرسال النموذج، سيتم تشغيل برنامج البريد الإلكتروني الافتراضي الخاص بك. لأسباب أمنية، تم ضبط المتصفح على منع إرسال المعلومات المدخلة في النموذج عبر البريد بشكل سري. لتفسير البيانات بشكل صحيح، استخدم سمة enctype مع القيمة النصية/العادية في العلامة

تواجه المتصفحات مشاكل في العمل مع هذا الرمز. سيقدم Firefox قائمة بالتطبيقات المناسبة لإرسال البريد (الشكل 1)، وسيعرض Internet Explorer تحذيرًا (الشكل 2) وسيحاول تشغيل البرنامج المرتبط بالبريد، وسيقدم Opera، مثل Firefox، قائمة بالخيارات المناسبة لإرسال البريد (الشكل 3).

أرز. 1. قم بتشغيل التطبيق في Firefox

أرز. 2. تحذير إنترنت إكسبلورر

أرز. 3. اختيار برنامج في الأوبرا