نماذج HTML. النماذج في HTML نموذج النموذج html
في كثير من الأحيان، يمكنك العثور على صفحات الويب التي تحتوي على نماذج HTML موضوعة عليها. تعد نماذج الويب طريقة ملائمة لتلقي المعلومات من زوار موقعك. مثال على ذلك -، - الذي يقدم تعليقات لزوار الموقع ومطوريه. تعد النماذج أيضًا ملائمة لمطوري المواقع عند تطوير نظام إدارة المحتوى (CMS)، مما يسمح لهم بالحفاظ على الخاصية الرئيسية للموقع - الملاءمة. هذه المقالة مخصصة لأساسيات إنشاء نماذج HTML ومعالجتها وطرق نقل البيانات من نماذج الشاشة إلى برامج PHP النصية.
1) إنشاء نموذج بسيط
العلامات و تحديد بداية ونهاية النموذج. علامة نموذج البداية يحتوي على خاصيتين: فعلو طريقة. تحتوي سمة الإجراء على عنوان URL للبرنامج النصي الذي يجب استدعاؤه لمعالجة البرنامج النصي. يصف طريقةيخبر المتصفح بنوع طلب HTTP الذي سيتم استخدامه لإرسال النموذج؛ القيم الممكنة بريدو يحصل.
تعليق
الفرق الرئيسي بين طريقتي POST وGET هو طريقة نقل المعلومات. في طريقة GET، يتم تمرير المعلمات عبر شريط العناوين، أي. بشكل أساسي في رأس طلب HTTP، بينما في طريقة POST يتم إرسال المعلمات عبر نص طلب HTTP ولا تنعكس بأي شكل من الأشكال في شريط العناوين.
يحتوي نموذج HTML هذا على عنصر تصفح، الذي يفتح مربع حوار لتحديد ملف لتحميله إلى الخادم. عندما تضغط على الزر "نقل الملف"، يتم تمرير الملف إلى البرنامج النصي للمعالج.
ثم تحتاج إلى كتابة برنامج نصي للمعالج action.php. قبل كتابة المعالج، علينا أن نقرر في أي مجلد سننسخ الملف:
إذا (إيسيت($_FILES [ "ملفي" ])) // إذا كان الملف موجودا
{
كتالوج $ = "../image/" ; // الكتالوج الخاص بنا
إذا (is_dir(كتالوج $)) // إذا كان هذا الدليل موجودًا
{
$myfile = $_FILES [ "myfile" ][ "tmp_name" ]; // ملف مؤقت
$myfile_name = $_FILES [ "myfile" ][ "name" ]; // اسم الملف
إذا (! انسخ ($myfile، $catalog)) صدى "خطأ في نسخ الملف". $myfile_name // إذا فشل نسخ الملف
}
آخر مكدير ("../image/" ); // إذا لم يكن هناك مثل هذا الدليل، فسوف نقوم بإنشائه
}
?>
تعليق
إذا كنت تثق في قدرة المستخدمين على تحميل أي ملفات إلى الخادم الخاص بك، فيجب أن تكون حذرًا للغاية. يمكن للمهاجمين تضمين تعليمات برمجية "سيئة" في صورة أو ملف وإرسالها إلى الخادم. في مثل هذه الحالات، تحتاج إلى التحكم الصارم في تنزيل الملفات.
يوضح هذا المثال إنشاء دليل ونسخ ملف إلى هذا الدليل على الخادم.
أود أيضًا أن أعرض مثالاً على العنصر خانة الاختيار. يختلف هذا العنصر قليلاً عن العناصر الأخرى في أنه إن لم يكن أحد العناصر خانة الاختيارلم يتم تحديد ’a، ثم المتغير العالمي الفائق $_POSTسيعود قيمة فارغة:
if (!empty($_POST [ "mycolor" ])) echo $_POST [ "mycolor" ]; // إذا تم تحديد عنصر واحد على الأقل
صدى آخر "اختار القيمة";
?>
وصف
بطاقة شعار
صفات
يضبط الترميز الذي يمكن للخادم من خلاله تلقي البيانات ومعالجتها. عنوان البرنامج أو المستند الذي يعالج بيانات النموذج. تمكين الملء التلقائي لحقول النموذج. طريقة ترميز بيانات النموذج. طريقة بروتوكول HTTP. اسم النموذج. يتجاوز الفحص المضمن لبيانات النموذج للتأكد من صحة الإدخال. اسم النافذة أو الإطار الذي سيقوم المعالج بتحميل النتيجة التي تم إرجاعها.علامة الإغلاق
مطلوب.
HTML5 IE Cr Op Sa Fx
وتظهر نتيجة هذا المثال في الشكل. 1.
أرز. 1. عرض عناصر النموذج في نافذة المتصفح
وصف
علامة HTML
مرحبا عزيزي القراء لموقع بلوق. من خلال مواصلة دراستنا، ننتقل إلى النظر في علامات النموذج والإدخال مع سماتها ()، والتي يمكنك من خلالها إنشاء مجموعة متنوعة من النماذج للموقع.
مهما كان موضوع ومحتوى مورد ويب معين، فمن المرجح أن يحتوي على نماذج بشكل أو بآخر: حقول نصية أو قوائم منسدلة أو أزرار أو مفاتيح مختلفة. بالمناسبة، في أحد المنشورات تحدثت بالفعل عن العناصر التي تساعد في تنويع الأشكال.
ما هو الغرض العملي لجميع الأشكال الممكنة المتنوعة؟ بادئ ذي بدء، هناك حاجة إلى إرسال البيانات التي أدخلها المستخدم إلى الخادم لغرض المعالجة الإضافية باستخدام برنامج نصي (معالج) تم إنشاؤه خصيصًا.
نماذج HTML - كيف يتم إنشاؤها باستخدام النموذج والإدخال
كما قلت في البداية، يجب أن يكون هناك نوع من نماذج الويب، أو حتى عدة نماذج في وقت واحد، موجودًا في أي موقع ويب أكثر أو أقل تطورًا. لفهم مدى أهميتها في ضوء امتثال مورد الويب للمتطلبات الحديثة، يكفي أن نقدم لك ثلاثة كائنات مرتجلة تستخدم النماذج بناءً على علامات النموذج والإدخال، والتي، من خلال اسمها فقط، لا تترك أي مجال للشك حولها ضرورة لمشروع من اتجاه أو آخر:
إذا اتبعت، على سبيل المثال، رابطًا لمقالة حول إنشاء التعليقات (السماح لجميع المستخدمين بإرسال رسائل إلى إدارة الموقع)، ثم كود HTML مع النموذج الذي يحتوي على فتحة (
) جزء:
هذا هو المكان الذي يلعب فيه النموذج دورًا حيويًا حيث يبدأ تثبيت نموذج الويب. وهو لا يعرض في حد ذاته منطقة على صفحة ويب، ولكنه يعمل كحاوية تحتوي على علامات أخرى.
في حالتنا (انظر لقطة الشاشة أعلاه)، تتضمن هذه العناصر عدة مدخل(علامة HTML هذه مفردة، وبعبارة أخرى، لا تحتوي على مكون إغلاق)، وأيضًا منطقة النص، مع مجموعات مختلفة من السمات. يحدد كل واحد منهم العنصر الخاص به المتضمن في النموذج.
16. التركيز التلقائي(لا توجد معلمات) - سمة منطقية تحدد التركيز على الحقل فورًا عند تحميل صفحة الويب، ونتيجة لذلك يمكنك إدخال البيانات دون النقر فوقها باستخدام زر الماوس. لا يمكن تطبيقه على نوع الإدخال = "مخفي" فقط.
17. عاجز(بدون قيم) - يعطل للمستخدم عنصر النموذج الذي تمت إضافته إليه. غالبًا ما يتم استخدامه مع البرامج النصية، حيث يتم تحديد الشروط التي بموجبها سيتم تنشيط العنصر الذي يتعذر الوصول إليه.
18. استمارة— يربط العنصر بالنموذج عندما يكون موجودًا خارج الحاوية
. بالنسبة للارتباط، تتم إضافة سمة معرف عمومي إلى علامة النموذج، وتتم إضافة سمة نموذج إلى علامة الإدخال، وتكون قيمها هي نفسها (على سبيل المثال، id="data" وform="data" ).19. عديد(لا توجد معلمات) - مجموعات خيار الاختيار المتعددللمستخدم ويتم استخدامه فقط مع type = "file" وtype = "email".
إذا كنت تستخدم حقل تحميل الملف، فيمكنك تحديد عدة ملفات من جهاز الكمبيوتر الخاص بك مرة واحدة باستخدام مفاتيح Ctrl أو Shift. إذا تم عرض حقل لإدخال عنوان بريد إلكتروني (type = "email")، فيجب إدخال رسائل البريد الإلكتروني مفصولة بفواصل.
20. مطلوب(لا توجد قيم) - لتنشيط متطلبات المستخدم لإدخال البيانات. ولذلك، يقوم المتصفح بحظر إرسال نموذج الويب إذا تم ترك الحقل المطلوب فارغًا ويعرض رسالة مقابلة حول الحاجة إلى تعبئته.
لا يتم استخدام هذه السمة للأزرار الرسومية والقياسية (type = "button | image")، وكذلك لحقول الإدخال المخفية (type = "hidden").
21. مقاس- يحدد عرض حقل النص بالأحرف (مناسب فقط لعناصر الكتابة ذات المعلمات "البريد الإلكتروني | كلمة المرور | البحث | الهاتف | النص | عنوان url"). القيمة الافتراضية هي 20 حرفا.
السمات الأربع التالية (22-25) لعلامة الإدخال تحمل تقريبًا نفس الوظيفة التي تحملها، ولكن من أجل الاكتمال سأذكرها بإيجاز أيضًا.
22. الحد الاقصى للطول— يفرض حدًا أقصى لعدد الأحرف التي يمكن إدخالها عند ملء حقل النص. إذا حاولت تجاوز هذا الحد، فسيتم حظر أي إدخال آخر. تنطبق هذه السمة فقط على العناصر النصية ذات النوع = "البريد الإلكتروني | كلمة المرور | البحث | الهاتف | النص | URL".
23. طول دقيقة— يفرض حدًا على الحد الأدنى لعدد الأحرف المطلوب إدخالها في منطقة النص. في حالة محاولة إرسال بيانات تحتوي على عدد أقل من الأحرف، ستظهر رسالة قصيرة تشير إلى ضرورة استكمال محتويات النموذج وسيتم توفير معلومات حول عدد الأحرف التي تم إدخالها بالفعل. شروط الاستخدام هي نفسها تمامًا كما في حالة الحد الأقصى.
24. العنصر النائب- يمكنك وضع تلميح (سيكون بمثابة معلمة) مباشرة في حقل النص، والذي سيختفي في اللحظة التي يبدأ فيها المستخدم بإدخال الأحرف. فقط للحقول التي تم تكوينها باستخدام المعلمات البريد الإلكتروني، كلمة المرور، البحث، النص، الهاتف، URLاكتب سمة علامة الإدخال.
25. يقرأ فقط(بدون معلمات) - يشير إلى أن النص الذي تم إدخاله مسبقًا في الحقل متاح للقراءة والنسخ فقط. يتم استخدامه عادةً مع البرامج النصية، حيث يتم تحديد الشروط التي يمكن أن يؤدي استيفائها إلى تنشيط عنصر النموذج هذا.
وأخيرًا، بعض السمات الإضافية التي تكمل وظائف عناصر النموذج المختلفة:
26. نمط- كقيمة تعكس التعبير العادي الذي يتم على أساسه وضع قواعد إدخال المعلومات. في هذه الحالة، يوصى بإضافة سمة عنوان عمومية بالإضافة إلى ذلك، كمعلمة يمكنك إضافة نص توضيحي إليها لمساعدة المستخدمين على ملء الحقول. يتم تطبيق النمط فقط على عناصر البريد الإلكتروني وكلمة المرور والبحث والنص والهاتف وعنوان URL. دعونا نفهم ذلك مع مثال. إليك رمز نموذج التسجيل المبسط (مع ):
|
تسجيل الدخول كلمة المرور |
بالنسبة لحقل تسجيل الدخول (type = "text")، يتم تحديد التعبير العادي (5،) كقيمة النمط، مما يعني استخدام الأحرف اللاتينية، ويجب إدخال خمسة أحرف على الأقل.
بالنسبة لمنطقة النص الخاصة بكلمة المرور (type=password)، يتم ضبط القيمة على (8،)، والتي تحدد إدخال الأحرف اللاتينية حصراً في أي حال (الأحرف الكبيرة والصغيرة)، وكذلك الأرقام، بينما يجب ألا يقل العدد الإجمالي لجميع الأحرف عن ثمانية.
إذا تم انتهاك شروط الإدخال المحددة، فلن يسمح لك المتصفح بإرسال البيانات وسيعرض التحذير المناسب:
27. سرك- يحدد المسار إلى الصورة (عنوان URL، وهو قيمته) لعرض زر الرسم "الصورة" (راجع جدول معلمات نوع الإدخال أعلاه).
28. خطوة- يضبط خطوة العناصر التي توفر اختيار القيم الرقمية (نوع الإدخال = "التاريخ | التاريخ والوقت المحلي | الشهر | الرقم | النطاق | الهاتف | الوقت | الأسبوع.").
يمكن أن يأخذ أي عدد صحيح أو رقم كسري كمعلمة. الخطوة الافتراضية = "1". لتعيين نطاق الإدخال النهائي، يمكنك مرة أخرى استخدام سمات الحد الأدنى والحد الأقصى المذكورة أعلاه. من أجل الوضوح، سوف نقوم بتضمين عنصرين type='number' في نموذج الاختبار. بالنسبة للأولى، قم بتعيين الخطوة = "2"، وللثانية، الخطوة = "0،1":
|
أدخل قيمة من -10 إلى 10: أدخل قيمة بين 0 و1: |
29. قيمة- يضبط قيمة عنصر النموذج الذي سيتم تمريره إلى المعالج. يتم إرسال زوج من معلمات الاسم إلى الخادم، حيث يتم تحديد الاسم بواسطة سمة الاسم لعلامة الإدخال، ويتم تحديد المعلمة بواسطة سمة القيمة. علاوة على ذلك، لعناصر الشكل المختلفة سوف تلعب القيمة أدوارًا مختلفة:
- لنوع = "زر | إعادة تعيين | إرسال" - تعيين تسمية النص على الأزرار؛
- لنوع = "مربع اختيار | راديو | صورة" - يحدد كل مربع اختيار أو مفتاح أو زر رسومي عند إرسال البيانات ومعالجتها على الخادم؛
- بالنسبة إلى type = "password | text" - فور تحميل النموذج، فإنه يعرض نصًا أوليًا في الحقل، والذي يمكن للمستخدم تغييره أو حذفه بالكامل؛
- بالنسبة لـ type = "file" (تحميل الملف) لا ينطبق لأنه لا يؤثر على هذا العنصر.
مثال للاستخدام لكل خيار من الخيارات المذكورة أعلاه:
|
حدد نظام إدارة المحتوى: دبليو بي. جملة |
هنا قيمة سمة القيمةيحدد المكونات التالية لكل عنصر: يعرض جزءًا من النص للحقل type = "text" ("اسمك")، ويحدد كل زر من أزرار الاختيار ("1" و "2") المعينة باستخدام type = "radio"، ويقوم أيضًا بتنشيط النقش على الزر ("إرسال").
مثال على إنشاء نموذج HTML جميل
بعد ذلك، سأحاول أن أقدم لك نموذج ويب نموذجيًا، لا يتضمن الكود الخاص به فقط مجموعات من أنواع الإدخال ذات القيم المختلفة التي تشكل حقول وأزرار نصية قياسية، ولكن أيضًا، على سبيل المثال، والتي تسمح لك ببدء التركيز على عنصر ليس فقط عن طريق النقر المباشر بالماوس، ولكن أيضًا عن طريق النقر على النص.
يرجى ملاحظة أنه للحصول على تصميم فريد من نوعه، يتم وضع مكونات النموذج الفردية، بحيث تحتوي كل منها على مجموعات من:
الخلف (الحد الأقصى للعرض: 350 بكسل؛ الهامش: 50 بكسل تلقائي 0؛ الحشو: 20 بكسل؛ الخلفية: #f3ebe1؛ عائلة الخط: "Oswald"، sans-serif؛) .form-1، .form-2، .form-3 ، .form-4 (الحشوة: 15px؛ الحدود: 4px double #909090) .form-1، .form-2، .form-3 (الحدود السفلية: لا شيء) .form-1 الإدخال (display:block؛ هامش- أسفل: 10 بكسل؛ العرض: 100%) .في (الحشوة على اليسار: 40 بكسل) .في الإدخال (العرض: 100%) ..png) بدون تكرار؛ موضع الخلفية: 10 بكسل 10 بكسل) ..png) بدون تكرار؛ موضع الخلفية: 10 بكسل 10 بكسل) إدخال النموذج 4 (العرض: كتلة؛ الارتفاع: 50 بكسل؛ حجم الخط: 24 بكسل؛ العرض: 100%؛ المؤشر: المؤشر)
ونتيجة لذلك، يأخذ نموذج الويب هذا المخطط التفصيلي التالي:
يمكن العثور على مزيد من المعلومات الكاملة حول إنشاء هذا النموذج المحدد على هذه الصفحة(بالمناسبة، هناك لا يمكنك فقط اختبار وظيفة مناطق النص الفردية عن طريق إدخال البيانات فيها، ولكن يمكنك أيضًا تجربة نموذج الويب عن طريق تحرير كود HTML و/أو خصائص CSS، وتغيير مظهره كليًا أو جزئيًا).
كان هدفي هو تعريفك بخوارزمية استخدام قيم مختلفة لسمة النوع وعلامة النموذج لإنشاء نماذج HTML متنوعة على الموقع. أتمنى أن تكون المهمة قد اكتملت. على أية حال، شاركنا أفكارك حول هذا الموضوع المتنوع في التعليقات.
وبطبيعة الحال، سأستمر في المنشورات اللاحقة في وصف العلامات الرئيسية لترميز النص التشعبي، لذلك لا تنس الاشتراك في تحديثات المدونة عبر البريد الإلكتروني. ولتعزيز ذلك أيضًا، انظر إلى درس آخر قدمه إيفجيني بوبوف حول إنشاء نموذج اتصال.
النماذج في HTML هي الأكثر تعقيدًا، ولكن من ناحية أخرى، ربما تكون الموضوع الأكثر إثارة للاهتمام في HTML.
تسمح نماذج الويب لزوار الموقع بإدخال معلومات معينة في حقول خاصة، ويستقبلها المطور بالشكل المناسب له.
مثال على النموذج يمكن أن يكون كتاب الزوار أو الاستبيان أو الاختبار عبر الإنترنت. يتم ملء النماذج عند التسجيل في الموقع، أو عند تقديم الطلبات في متجر عبر الإنترنت، وما إلى ذلك.
باستخدام HTML، يمكنك إنشاء إطار نموذج: حقول النص والقوائم والقوائم والأزرار ومربعات الاختيار وأزرار الاختيار. أي تلك العناصر التي يتم من خلالها إدخال معلومات معينة في النموذج.
ثم يتم إرسال البيانات المدخلة في النموذج إلى الخادم للمعالجة. لكن HTML لا حول له ولا قوة هنا - فالبرنامج أو البرنامج النصي المرفق به يعمل بالفعل على معالجة النموذج. عادةً ما تتم كتابة هذه البرامج بلغة PHP أو JavaScript.
سمات النموذج - العلامة
.تعتبر سمة الإجراء إلزامية لأي نموذج - فهي تحدد عنوان الملف الذي يخدم النموذج ( يعالج البيانات المدخلة فيه).
تحدد سمة الطريقة كيفية إرسال محتوى النموذج. هناك طريقتان - الحصول والنشر. الآن ليس من المنطقي الخوض في هذه المعلمات، لأن موضوع إرسال المعلومات باستخدام طريقتي GET و POST يتعلق بلغات معالجة البيانات ( على سبيل المثال PHP). يكفي أن تعرف أن طريقة نقل البيانات POST هي التي تستخدم في معظم الحالات في النماذج.
سمة اسم العلامة
حقل نص متعدد الأسطر - العلامة
إذا تجاوزت محتويات الحقل حجمه، سيظهر شريط التمرير.
مثال على استخدام النموذج
الآن دعونا نرى كيف يعمل النموذج.
نموذج طلب فيديو تعليمي:
