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

1) قم بإنشاء نموذج بسيط

العلامات

و

اضبط بداية النموذج ونهايته. علامة بدء النموذج

يحتوي على سمتين: عملو طريقة... تحتوي سمة الإجراء على عنوان urlالبرنامج النصي ليتم استدعاؤه لمعالجة البرنامج النصي. يصف طريقةيخبر المتصفح بنوع طلب HTTP الذي يجب استخدامه لإرسال النموذج ؛ القيم الممكنة بريدو احصل على.

تعليق

يتمثل الاختلاف الرئيسي بين طريقتي POST و GET في طريقة إرسال المعلومات. في طريقة GET ، يتم تمرير المعلمات عبر شريط العنوان ، أي في الواقع ، في رأس طلب HTTP ، بينما في طريقة POST ، يتم تمرير المعلمات عبر نص طلب HTTP ولا تنعكس بأي شكل من الأشكال في شكل شريط العنوان.

$ text = nl2br ($ _POST ["mytext"]) ؛
?>

مهمة:لنفترض أنك بحاجة إلى إنشاء قائمة منسدلة بالأعوام من 2000 إلى 2050.
حل:من الضروري إنشاء نموذج HTML باستخدام عنصر SELECT و PHP - برنامج نصي لمعالجة النموذج.

مناقشة:

أولاً ، لنقم بإنشاء ملفين: form.htmlو عمل. php... في ملف form.htmlسيحتوي على نموذج html مع قائمة منسدلة. علاوة على ذلك ، يمكن تحديد القيم الموجودة في القائمة بطريقتين:

1. إدخال البيانات يدويًا:

2000
2001
2002
……………………………………………
2050

ثانيًا. إدخال البيانات من خلال حلقة:

سنة = 2000 دولار ؛
لـ ($ i = 0 ؛ $ i<= 50 ; $i ++) // حلقة من 0 إلى 50
{
$ new_years = $ year + $ i؛ // تكوين قيمة جديدة
صدى صوت " ". $ new_years."" ; // تشكيل سطر جديد
}
?>

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

وصف:

لنقم بإنشاء نموذج HTML لإرسال ملف إلى الخادم.

يحتوي نموذج html المحدد على العنصر تصفح، والذي يفتح مربع حوار لاختيار ملف لتحميله على الخادم. عن طريق الضغط على الزر "نقل الملف"، يتم تمرير الملف إلى البرنامج النصي للمعالج.

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

if (isset ($ _ FILES ["myfile"])) // إذا كان الملف موجودًا
{
كتالوج $ = "../image/"؛ // الكتالوج الخاص بنا
إذا (is_dir ($ الكتالوج)) // إذا كان هناك مثل هذا الدليل
{
$ myfile = $ _FILES ["myfile"] ["tmp_name"]؛ // ملف مؤقت
$ myfile_name = $ _FILES ["myfile"] ["name"]؛ // اسم الملف
if (! copy ($ myfile، $atalog)) صدى "خطأ أثناء نسخ الملف"... $ myfile_name // إذا فشل نسخ الملف
}
آخر mkdir ("../image/")؛ // إذا لم يكن هناك مثل هذا الدليل ، فسننشئه
}
?>

تعليق

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

يوضح هذا المثال كيفية إنشاء دليل ونسخ ملف إلى ذلك الدليل على الخادم.

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

أزرق
أسود
أبيض

إذا (! فارغ ($ _ POST ["mycolor"])) صدى $ _POST ["mycolor"]؛ // إذا تم تحديد عنصر واحد على الأقل
صدى آخر "تحديد قيمة";
?>

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

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

دعني أذكرك أن أي نموذج موجود على الصفحة يتم إنشاؤه باستخدام وهو مصمم لإدخال أي معلومات من المستخدم وإرسالها إلى الخادم (مثال -).

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

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

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

2. عديد- تسمح هذه السمة ، التي لا تحتوي على معلمات ، بالاختيار المتعدد ، على عكس المثال أعلاه ، حيث يمكنك تحديد عنصر واحد فقط (سطر). حاول تسليط الضوء على هذه قائمةباستخدام الماوس عدة أسطر في وقت واحد (واحد تلو الآخر في أي مكان ، مع الاستمرار في الضغط على مفتاح Ctrl ، أو عن طريق Shift الذي يليه في صف واحدًا تلو الآخر):

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

3. مقاس- يحدد ارتفاع القائمة المنسدلة ، أي عدد الخطوط المعروضة. إذا كانت السمة المتعددة موجودة ولم يتم تحديد الحجم (كما في المثال أعلاه) ، إذن يتم عرض أربعة خطوط بشكل افتراضي، وعلى سبيل المثال ، بالحجم = "5" ، ستظهر خمسة بالفعل:

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

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

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

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

اختر من القائمة خيار تيكستاريا ملصق مجموعة الحقول أسطورة

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

اختر من القائمة خيار تيكستاريا ملصق مجموعة الحقول أسطورة

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

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

اختر من القائمة خيار تيكستاريا ملصق مجموعة الحقول أسطورة

حدد الخيار Textarea Label Fieldset Legend من القائمة

لا تخلط بين سمة تحديد العلامة والعلامة الرئيسية لإنشاء نموذج. في المثال أعلاه ، تمت إضافة سمة id = "data" إلى علامة النموذج ، وتمت إضافة سمة form = "data" إلى التحديد ، مما جعل من الممكن ربط القائمة المنسدلة بنموذج معين.

سمات علامة الخيار

1. قيمة- يحدد القيمة من القائمة المنسدلة التي سيتم إرسالها إلى الخادم (معالج النموذج). في الواقع ، يتم إرسال الاسم إلى المعالج ، والذي يتم تحديده بواسطة سمة الاسم الخاصة بعلامة التحديد ، و قيمة القيمة(ل هذا المثال- 1 ، 2 ، 3 ، 4 ، 5) المقابل للسطر المحدد من القائمة المنسدلة:

اختر من القائمة خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

2. معاق- كتل عنصر قائمة منسدلة للاختيار.

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

كما ترى من المثال ، فإن سطر "الخيار" غير نشط ولا يمكن تحديده.

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

علامة Textarea علامة التسمية علامة مجموعة الحقول علامة وسيلة الإيضاح

Textarea العلامة تسمية العلامة مجموعة الحقول علامة وسيلة إيضاح العلامة

بحث. في المثال الموضح أعلاه ، يكون السطر الأول للخيار في الرمز فارغًا (على الجانب الأيسر من الجدول) ، ولكن التسمية = معلمة "علامة الخيار" محددة ، ونتيجة لذلك ، يظهر هذا النص في القائمة (في الجانب الأيمن). يحتوي السطر الثاني من الكود على النص "Textarea Tag" كمحتوى لعلامة الخيار ، لكن القائمة المنسدلة على اليمين تعرض كلمة "Textarea" ، والتي تطابق قيمة label = "Textarea".

4. المحدد- يبرز العنصر الحالي في القائمة المنسدلة:

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

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

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

سمات علامة Optgroup

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

1. ملصق- يحدد اسم كل مجموعة كمعامل:

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

نفس الشيء ، ولكن مع وجود مضاعف وحجم = "7" من علامة التحديد:

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

2. معاق(بلا ​​قيم) - يحظر اختيار عناصر المجموعة التي تم تعيينها وفقًا لها ، علاوة على ذلك ، عادةً ما يتم تمييز العناصر غير النشطة باللون الرمادي:

خيار تيكستاريا ملصق مجموعة الحقول أسطورة

الخيار Textarea تسمية مجموعة الحقول وسيلة إيضاح

سيكون مقطع الفيديو القصير مفيدًا هنا:

حقل النص في النموذج عبر منطقة النص

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

أدخل النص:

أدخل النص:

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

دعنا الآن نحاول إضافة العديد من السمات مع المعلمات إلى الكود الأصلي:

1. اسم- يعرّف اسم منطقة النص كقيمة لتعريفها بعد تقديم بيانات النموذج عند معالجتها على الخادم.

2. كولز- عرض المجال ، والذي يتم تعيينه في دور المعلمة من خلال عدد الرموز المتطابقة المجاورة الموضوعة أفقياً. الافتراضي هو 20.

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

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

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

أدخل النص:

أدخل النص:

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

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

عدد قليل من السمات التي تنفذ وظائف إضافية عند ملء الحقول:

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

يملك كل شيء معلمتين: تشغيل(متضمن) و إيقاف(مغلق). إليك بعض التعليمات البرمجية النموذجية:

أدخل النص:

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

9. لف- يحدد قواعد التفاف السطر في منطقة النص للمتصفح باستخدام ثلاث قيم:

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

أدخل النص:

أدخل النص:

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

أدخل النص:

أدخل النص:

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

أدخل النص:

أدخل النص:

10. ضبط تلقائي للصورة(لا يحتوي على معلمات) - يبدأ التركيز على حقل النص عندما يتم تحميل الصفحة التي تحتوي على النموذج.

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

مربع نص غير نشط

وصف

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

بناء الجملة

الفقرة 1 النقطة 2

صفات

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

علامة النهاية

مطلوب.

HTML5 IE Cr Op Sa Fx

اختر بطلا تشيبوراشكا التمساح جينا شابوكليك فأر لاريسا

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

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

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

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

عناصر شكل Html

<نوع الإدخال = "text" name = "login" size = "20" value = "(! LANG: تسجيل الدخول" maxlength = "25" > !}

نتيجة:

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

نتيجة:


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

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

نتيجة:

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

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

نتيجة:

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

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

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



نتيجة:

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

في لغة تأشير النص الفائق ، يتم استخدام خانة الاختيار لتنظيم الاختيار المتعدد ، أي عندما يكون ذلك ضروريًا وممكنًا لاختيار عدة خيارات للإجابة

<نوع الإدخال = "راديو" الاسم = "كتاب" القيمة = "(! LANG: asp" > !} ASP<ر> <نوع الإدخال = "راديو" الاسم = "كتاب" القيمة = "(! LANG: js" > !}جافا سكريبت<ر> <نوع الإدخال = "راديو" الاسم = "كتاب" القيمة = "(! LANG: php" > !}بي أتش بي<ر> <نوع الإدخال = "radio" name = "book" value = "(! LANG: html" checked = "checked" > !}لغة البرمجة<ر>

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




نتيجة:

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

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

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

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

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

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

1 2 3 4 5 6

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

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

نتيجة:

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

بالنسبة للقوائم الكبيرة والمعقدة ، هناك خيار أضف عناوين فرعية- علامة optgroup بسمة التصنيف (التسمية):

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

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

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

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

نص

نتيجة:

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

عناصر أخرى

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

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

<نوع الإدخال = "checkbox" id = "book1"> <تسمية لـ = "book1"> ASP</ التسمية>

ASP

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

نتيجة:



• تسمح لك السمة المعطلة بحظر عنصر ، مما يجعله غير متاح لتعديل المستخدم:

<نوع الإدخال = "text" name = "login" size = "20" value = "(! LANG: تسجيل الدخول" maxlength = "25" disabled = "disabled" >!} <نوع الإدخال = "مربع الاختيار" الاسم = "asp" القيمة = "(! LANG: نعم" > !} ASP<ر> <نوع الإدخال = "مربع الاختيار" الاسم = "js" القيمة = "(! LANG: نعم" checked = "checked" disabled = "disabled" > !}جافا سكريبت<ر>


ASP
جافا سكريبت

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

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

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

1. قائمة قابلة للتخصيص

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

2. مصنوع من CSS3 / JavaScript

مكتوب بلغة CSS3 و JavaScript. قائمة منسدلة منتظمة.

3. النمط: محطة مترو

قائمة منسدلة شفافة بنمط محطات المترو.

4. الاستسقاء. مكتوب في SCSS & jQuery

5. لقوائم معلقة طويلة

حل رائع لقوائم طويلة منسدلة.

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

مثالي للقوائم الجانبية على موقعك لإظهار الفئات على موقعك بشكل مرئي.

8. قائمة إعدادات المستخدم الأنيقة

9.CSS3 القائمة المنسدلة

تم تصميمه بأسلوب واجهة المستخدم ، وسوف يتناسب مع نمط واجهة المستخدم للموقع.

12. اختيار العلم

القائمة المنسدلة لنمط اختيار البلد.

13. قائمة منسدلة بتنسيق HTML و CSS

أتمنى أن تكون قد استمتعت باختياري. اترك تعليقات وشارك برأيك وأرسل عملك الخاص!

كيفية عمل قائمة منسدلة في html (اختيار أفضل 16) من bologer