نموذج HTML

يمكن أن تتكون النماذج من عناصر واجهة المستخدم الرسومية القياسية:

• <button>— زر يمكن ربطه بإجراء مثل إرسال النموذج أو إعادة تعيين النموذج أو تنفيذ دالة جافا سكريبت.
• <input>— عنصر لإدخال المستخدم. يختلف العنصر باختلاف قيمة سمته type.
• <textarea>— يشبه إلى حد كبير حقل الإدخال، باستثناء أنه يسمح بعرض وإدخال عدة صفوف من البيانات<text><textarea>
• <select>— قائمة منسدلة تعرض قائمة بالعناصر التي يمكن للمستخدم الاختيار من بينها

يمكن أن يحتوي عنصر الإدخال على الأنواع التالية:

• text— مربع نص بسيط يسمح بإدخال سطر واحد من النص.
• email- نوع يتطلب عنوان بريد إلكتروني تم التحقق منه جزئيًا<text>
• number- نوع يتطلب رقمًا<text>
• password— على غرار ذلك ، يُستخدم لأغراض أمنية، حيث تكون الأحرف المكتوبة غير مرئية أو يتم استبدالها برموز مثل *<text>
• tel— رقم هاتف
• radio— زر راديو
• file— عنصر تحكم لاختيار الملفات لتحميل ملف
• reset— زر إعادة الضبط الذي، عند تفعيله، يخبر المتصفح باستعادة قيم النموذج الحالي إلى قيمها الأولية.
• submit— زر يُخبر المتصفح باتخاذ إجراء بشأن النموذج (عادةً لإرساله إلى خادم)

تُظهر الصورة النموذجية على اليمين معظم هذه العناصر:

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

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

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

قدّمت لغة HTML 4 الوسم <label>، الذي يُستخدم لتمثيل عنوان في واجهة المستخدم، ويمكن ربطه بعنصر تحكم نموذج مُحدد من خلال تحديد سمة عنصر التحكم في سمة الوسم <label> . ^{[ 1 ]} يسمح هذا للوسوم بالبقاء مع عناصرها عند تغيير حجم النافذة، كما يُتيح وظائف تُشبه وظائف سطح المكتب (على سبيل المثال، النقر على زر اختيار أو تسمية مربع اختيار سيؤدي إلى تنشيط عنصر الإدخال المرتبط به).<label>idfor

يُقدّم HTML 5 عددًا من أنواع الإدخال التي يُمكن تمثيلها بعناصر واجهة أخرى. يعتمد بعضها على حقول إدخال نصية، وهي مُخصصة لإدخال بيانات شائعة مُحددة والتحقق من صحتها. تشمل هذه البيانات emailإدخال عناوين البريد الإلكتروني، telوأرقام الهواتف، numberوالقيم الرقمية. توجد سمات إضافية لتحديد الحقول الإلزامية، والحقول التي يجب أن يكون لها تركيز لوحة المفاتيح عند تحميل صفحة الويب التي تحتوي على النموذج، ونص توضيحي يُعرض داخل الحقل ولكنه ليس إدخالًا من المستخدم (مثل نص "بحث" الذي يظهر في العديد من حقول إدخال البحث قبل إدخال مصطلح البحث). كانت هذه المهام تُعالج سابقًا باستخدام JavaScript ، ولكن نظرًا لشيوعها، أُضيف دعمها إلى المعيار. dateيعرض نوع الإدخال تقويمًا يُمكن للمستخدم من خلاله اختيار تاريخ أو نطاق زمني. ^{[ 2 ] [ 3 ]} كما colorيُمكن تمثيل نوع الإدخال كنص إدخال يتحقق ببساطة من أن القيمة المُدخلة هي تمثيل سداسي عشري صحيح للون، وفقًا للمواصفات، ^{[ 4 ]} أو كأداة لاختيار الألوان (وهذا الأخير هو الحل المُستخدم في مُعظم المتصفحات التي تدعم هذه السمة).

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

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

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

بعض اللغات المفسرة الشائعة الاستخدام لتصميم النماذج التفاعلية في تطوير الويب هي PHP و Python و Ruby و Perl و JSP و Adobe ColdFusion ، وبعض اللغات المترجمة الشائعة الاستخدام هي Java و C# مع ASP.NET .

< ! DOCTYPE html > < html lang = " en " > <head> <title> النموذج < / title > </head> <body> < form action = " form_handler.php " > <p> <label> الاسم : < input name = " first_name " / > </label> </p> <p> < button type = " submit " > إرسال < / button > </p> </form> </body> </html>​​​​​

<!DOCTYPE html> <?php // طلب قيمة المتغير الخارجي "first_name" وتصفيتها. $firstName = filter_input ( INPUT_GET , "first_name" , FILTER_SANITIZE_STRING ); ?> < html lang = "en" > < head > < title > الناتج </ title > </ head > < body > < p > <?php echo "Hello, { $firstName } !" ; /* طباعة القيمة */ ?> </ p > </ body > </ html >

#!/usr/bin/env perl use strict ; use CGI qw(:standard) ;my $name = param ( "first_name" ); print header ; print html ( body ( p ( "Hello, $name!" ), ), );

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