كيفية جعل حقل الاختيار إلزاميا. التعامل مع مربعات الاختيار في PHP
سيقدم لك هذا الدليل مربعات اختيار HTML ويعلمك كيفية التعامل معها في PHP.
نموذج خانة اختيار واحدة
لنقم بإنشاء نموذج بسيط بمربع اختيار واحد.
في برنامج PHP النصي (ملف checkbox-form.php) من الممكن قراءة قيمة الحقل باستخدام المصفوفة $_POST. إذا تم تعيين $_POST["formWheelchair"] على نعم، فسيتم تحديد خانة الاختيار. إذا لم يتم تحديد خانة الاختيار، فلن يتم تعيين المتغير $_POST["formWheelchair"].
فيما يلي مثال لمعالجة النماذج في PHP:
تم تعيين المتغير $_POST["formWheelchair"] على YES لأنه تم تعيين سمة قيمة علامة الإدخال على "YES" .
يرجى ملاحظة أن جميع مربعات الاختيار لها نفس الاسم (formDoor). يشير اسم واحد إلى أن جميع مربعات الاختيار مترابطة. تشير الأقواس المربعة إلى أنه سيتم الوصول إلى كافة القيم من مصفوفة واحدة. أي أن $_POST["formDoor"] لن يُرجع سلسلة، كما في المثال أعلاه، ولكنه سيُرجع بدلاً من ذلك مصفوفة تحتوي على قيم مربعات الاختيار التي حددها المستخدم.
على سبيل المثال، إذا حددت جميع المربعات، فسيُرجع $_POST["formDoor"] مصفوفة من (A,B,C,D,E) . في المثال أدناه، نحصل على جميع القيم الموجودة في المصفوفة ونعرضها.
تكون الوظيفة الفارغة مفيدة في حالة عدم قيام المستخدم بتحديد أي شيء. إذا لم يكن المصفوفة فارغة، فإننا نحسب عدد مربعات الاختيار المحددة باستخدام وظيفة العد ونعرض جميع القيم باستخدام لحلقة.
إذا تم تحديد خانة الاختيار "مبنى الجوزة"، فستحتوي المصفوفة على القيمة "أ".
التحقق من تحديد خانة اختيار معينة
غالبًا ما تحتاج إلى التحقق مما إذا تم تحديد خانة اختيار معينة. للقيام بذلك يمكنك استخدام الوظيفة التالية:
تم التحقق من الوظيفة($chkname,$value) ( if(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( إرجاع صحيح )) ) إرجاع خطأ؛
الآن تحتاج فقط إلى استدعاء الدالة IsChecked(chkboxname,value). على سبيل المثال:
إذا (IsChecked("formDoor"،"A")) ( //do ... )
بفضل CSS3، يمكننا تحقيق أي تأثير نحتاجه تقريبًا على الشاشة. سنلقي نظرة في هذا الدرس على كيفية تصميم مربعات الاختيار وأزرار الاختيار.
الإدخال: محدد + التسمية: قبل ( المحتوى: "\2022"; اللون: #f3f3f3; حجم الخط: 30 بكسل; محاذاة النص: المركز; ارتفاع الخط: 18 بكسل; )
الآن عندما نضغط على زر الاختيار، يجب أن تظهر دائرة بيضاء صغيرة في الدائرة الرمادية الرئيسية.
مربعات اختيار التصميم
لنبدأ الآن في تصميم مربعات الاختيار. أولا، دعونا نخفي العنصر مرة أخرى:
الإدخال (العرض: لا شيء؛)
نظرًا لأننا نقوم بإزالة عرض مربع الاختيار القياسي باستخدام العنصر الزائف :before، فسنضيف ببساطة حدًا:
تسمية خانة الاختيار: قبل (نصف قطر الحدود: 3 بكسل؛)
بعد ذلك، سنضيف رمز "الاختيار"، والذي سيظهر عند النقر فوق مربع الاختيار. دعونا نفعل ذلك عن طريق القياس مع دائرة الراديو. هذه المرة سوف نحتاج إلى التحويل رمز HTML? ✓.
الإدخال: محدد + التسمية: قبل ( المحتوى: "\2713"؛ ظل النص: 1px 1px 1px rgba(0, 0, 0, .2); حجم الخط: 15px; اللون: #f3f3f3; محاذاة النص: المركز ؛ ارتفاع الخط: 15 بكسل؛
ونتيجة لذلك، هذا ما يجب أن نحصل عليه:
نتائج
في هذا الدرس، تناولنا طريقة يمكنك استخدامها لعرض أزرار الاختيار ومربعات الاختيار التي تحتاجها. وبما أننا استخدمنا CSS3، فإن هذه التقنية ستعمل فقط في المتصفحات التي تدعم هذه التقنية. لتحقيق نتائج مماثلة في المتصفحات القديمة، يمكنك استخدام الخيار المناسب
سنتحدث في هذه المقالة عن مربع اختيار نوع الإدخال HTML، وكيفية التعامل معه في PHP.
خانة اختيار واحدة
دعونا نخلق نموذج بسيطمع مربع اختيار واحد:
في برنامج PHP النصي ( مربع الاختيار-form.php) يمكننا الحصول على الخيار المحدد من المصفوفة $_POST. إذا كان $_POST['formWheelchair'] هو " نعم"، ثم يتم تحديد خانة الاختيار الخاصة بالخيار. إذا لم يتم تحديد خانة الاختيار، فلن يتم تعيين $_POST['formWheelchair'].
فيما يلي مثال لمعالجة النماذج في PHP:
تم تعيين $_POST['formSubmit'] على " نعم"، نظرًا لأن هذه القيمة محددة في سمة قيمة خانة الاختيار:
بدلاً من " نعم"يمكنك ضبط القيمة" 1 " أو " على". تأكد من تحديث رمز التحقق في برنامج PHP النصي الخاص بك أيضًا.
مجموعة تشي بوكس
في بعض الأحيان تحتاج إلى عرض مجموعة من مربعات اختيار نوع إدخال PHP ذات الصلة في نموذج. تتمثل ميزة مجموعة مربعات الاختيار في أنه يمكن للمستخدم تحديد خيارات متعددة. على عكس زر الاختيار، حيث يمكن تحديد خيار واحد فقط من المجموعة.
لنأخذ المثال أعلاه وبناءً عليه سنزود المستخدم بقائمة المباني:
لاحظ أن مربعات اختيار نوع الإدخال لها نفس الاسم (formDoor). وأن كل إسم ينتهي بـ . باستخدام اسم واحد، نشير إلى أن خانات الاختيار مرتبطة. وبهذا نشير إلى أن القيم المحددة ستكون متاحة لبرنامج PHP النصي كمصفوفة. أي أن $_POST['formDoor'] لا يُرجع صفًا واحدًا، كما في المثال أعلاه؛ وبدلاً من ذلك، يتم إرجاع مصفوفة تتكون من جميع قيم خانات الاختيار التي تم تحديدها.
على سبيل المثال، إذا حددت جميع الخيارات، فسيكون $_POST['formDoor'] عبارة عن مصفوفة تتكون من: (A, B, C, D, E). فيما يلي مثال لكيفية إخراج قيمة المصفوفة:
إذا لم يتم تحديد أي خيار، فلن يتم تعيين $_POST['formDoor']، لذا استخدم الوظيفة "فارغة" لاختبار هذه الحالة. إذا تم إعطاء قيمة، فإننا نقوم بالتكرار عبر المصفوفة باستخدام الدالة count()، التي تُرجع حجم المصفوفة وتطبع المباني التي تم تحديدها.
إذا تم تحديد خانة الاختيار للخيار " مبنى الجوزة"، فإن المصفوفة ستحتوي على القيمة "A". وكذلك إذا " مجمع كارنيجي"، سيحتوي المصفوفة على C.
التحقق من تحديد خيار معين
غالبًا ما تريد التحقق من تحديد أي خيار معين من بين كافة العناصر المتوفرة في المجموعة إدخال HTMLاكتب خانة الاختيار . فيما يلي وظيفة تقوم بهذا الفحص:
الدالة IsChecked($chkname,$value) ( إذا(!empty($_POST[$chkname])) ( foreach($_POST[$chkname] as $chkval) ( if($chkval == $value) ( إرجاع صحيح )) ) إرجاع خطأ؛
لاستخدامه، ما عليك سوى الاتصال بـ IsChecked ( checkbox_name، القيمة). على سبيل المثال:
إذا (IsChecked("formDoor"،"A")) ( //افعل شيئًا...) // أو استخدمه في الحساب... $price += IsChecked("formDoor"،"A") ? 100؛ $price += IsChecked("formDoor"،"B") ؟ 20:0؛
قم بتنزيل نموذج التعليمات البرمجية
قم بتنزيل كود PHP للحصول على نموذج نموذجي مع خانة اختيار نوع إدخال PHP.
هذا المنشور هو ترجمة للمقال " التعامل مع مربع الاختيار في أ نموذج PHPالمعالج"، من إعداد فريق المشروع الصديق
ضع علامة في نموذج HTMLأو يتم تحديد "مربع الاختيار" بواسطة العلامة مدخل، الذي تم تحديد نوعه خانة الاختيار.
تشير علامة الاختيار إلى الاتفاق أو عدم الاتفاق. إذا تم تحديد خانة الاختيار، يرسل المتصفح متغيرًا باسم الحقل إلى الخادم. إذا كان مفقودا، فإن المتصفح لا يرسل أي شيء. ولذلك السمة قيمةلا يمكن اعتباره إلزاميا.
إذا كانت هناك حاجة لوجود مربع الاختيار بشكل افتراضي، فأنت بحاجة إلى إضافة السمة إلى العلامة التحقق. سوف يبدو مثل هذا:
هكذا يبدو مربع الاختيار في المتصفح:
لا يعني وجود مربع اختيار أنه يجب تحديد أي عنصر من العناصر الموجودة. في هذا الصدد، إذا كان هناك عدة خانات اختيار في نموذج واحد، فينبغي أن يتم تسميتها بأسماء مختلفة.
سيكون رمز النموذج الوارد في بداية المقالة كما يلي:
أما بالنسبة للاسم، في بيئة مهنية يسمى الحقل "مربع الاختيار".
من أجل تصميم مربعات الاختيار وأزرار الاختيار كما هو مطلوب في التصميم، ليس من الضروري اليوم استخدام حلول JavaScript (مثل المكون الإضافي الخاص بي)، لأنه للقيام بذلك، يمكنك استخدام CSS فقط، ومع التوافق مع الإصدارات السابقة للمتصفحات القديمة (أي دون التضحية بسهولة الاستخدام) التي لا تدعم قواعد CSS الحديثة.
وبعبارة أخرى - في المتصفحات الحديثةستبدو مربعات الاختيار وأزرار الاختيار جميلة، وفقًا للتصميم المقصود، وفي القديمة (وهذا ينطبق على إنترنت إصدارات المستكشف 8 وما دون) ستظل بالتصميم "الافتراضي" المميز لكل نظام تشغيل محدد.
بجانب، يظل التحقق من صحة HTML5 ممكنًاالعناصر المصممة (والتي قد لا تكون كذلك عند استخدام مكونات JavaScript الإضافية). في المتصفحات الحديثة، كان دعمها هو القاعدة منذ فترة طويلة.
الميزات الهامة
لكي ينجح كل شيء، من المهم مراعاة ما يلي:
- باستثناء، في الواقع، علامة العنصر نفسها، التي نريد تزيينها بشكل جميل ( أو )، سوف تحتاج إلى علامة
- بطاقة شعار يجب أن يكون قبل العلامة
الحيلة هي استخدام المحددات: المحددة و: غير الزائفة. في هذه الحالة، يصبح مربع الاختيار أو زر الاختيار نفسه غير مرئي، ويتم تنفيذ محاكاتهما باستخدام عناصر زائفة: قبل و: بعد للعلامة
التصميم للمتصفحات الحديثة
دعونا نفكر في كلا الخيارين لتحديد موقع عنصر النموذج المراد تصميمه. أيهما أكثر ملاءمة متروك لك لتقرره. الجوهر لا يتغير من هذا.
توجد علامات مربع الاختيار وأزرار الاختيار قبل العلامة
في كود HTMLتبدو هكذا:
مرة أخرى أريد أن ألفت انتباهكم إلى العلامة بالضرورةيجب أن يكون موجودا قبلبطاقة شعار
كود CSS لمربع الاختيارسيكون مثل هذا:
مربع اختيار ( الموضع: مطلق؛ مؤشر z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 20 بكسل؛ ) .مربع اختيار + تسمية (الموضع: نسبي؛ الحشو: 0 0 0 60 بكسل؛ المؤشر: المؤشر؛ ) .مربع اختيار + تسمية :قبل (المحتوى: ""؛ الموضع: مطلق؛ الأعلى: -4px؛ اليسار: 0؛ العرض: 50px؛ الارتفاع: 26px؛ نصف قطر الحدود: 13px؛ الخلفية: #CDD1DA؛ ظل الصندوق: داخلي 0 2px 3px rgba( 0,0,0,.2); الانتقال: .2s) .checkbox + التسمية: بعد ( المحتوى: ""; الموضع: مطلق; الأعلى: -2px; اليسار: 2px; العرض: 22px; الارتفاع: 22px; الحدود - نصف القطر: 10 بكسل؛ الخلفية: #FFF؛ مربع الظل: 0 2 بكسل 5 بكسل rgba(0,0,0,.3); مربع الاختيار: محدد + التسمية: بعد ( اليسار: 26px; ) . مربع الاختيار: التركيز + التسمية: قبل ( مربع الظل: داخلي 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255 , 0،.7)؛
كود CSS لزر الاختيارسيكون مثل هذا:
راديو (الموضع: مطلق؛ مؤشر z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 7 بكسل؛ ) .radio + label (الموضع: نسبي؛ الحشو: 0 0 0 35 بكسل؛ المؤشر: المؤشر؛ ) .radio + label :before ( المحتوى: ""; الموضع: مطلق; الأعلى: -3 بكسل; اليسار: 0; العرض: 22 بكسل; الارتفاع: 22 بكسل; الحد: 1 بكسل صلب #CDD1DA; نصف قطر الحدود: 50%; الخلفية: #FFF; ) . الراديو + التسمية: بعد (المحتوى: ""؛ الموضع: مطلق؛ الأعلى: 1px؛ اليسار: 4px؛ العرض: 16px؛ الارتفاع: 16px؛ نصف قطر الحدود: 50%؛ الخلفية: #9FD468؛ ظل الصندوق: داخلي 0 1px 1px rgba(0,0,0,.5); العتامة: 0; الانتقال: .2s; 0 0 0 3px rgba(255,255,0,.7);
باستخدام خصائص الموضع ومؤشر z والعتامة لفئات .checkbox و.radio، فإننا نخفي العناصر الأصلية بصريًا، بينما تظل في نفس المكان الذي ستكون فيه العناصر المصممة. وباستخدام الهامش نقوم بتغييرها قليلاً بحيث تبدو رسالة التحقق من صحة HTML5 متناغمة. اعتمادًا على تصميم مربع الاختيار وزر الاختيار، يمكن تعديل هذه المسافة البادئة.
علامات مربع الاختيار وأزرار الاختيار موجودة داخل العلامة
كود HTMLوفي هذه الحالة سيكون على النحو التالي:
قياسا على الخيار السابق - العلامة بالضرورةيجب أن يكون موجودا قبلالعلامات ذات الفئة .checkbox__text و .radio__text .
كود CSS لمربع الاختيارسيكون مثل هذا:
إدخال مربع الاختيار ( الموضع: مطلق؛ فهرس z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 20 بكسل؛ ) .checkbox__text ( الموضع: نسبي؛ الحشو: 0 0 0 60 بكسل؛ المؤشر: المؤشر؛ ) .checkbox__text: قبل ( المحتوى: ""؛ الموضع: الأعلى المطلق: 0؛ الخلفية: #CDD1DA؛ انتقال 0 2px ,0,.2) .checkbox__text:after ( content: ""; الموضع: مطلق؛ الأعلى: -2 بكسل؛ اليسار: 2 بكسل؛ العرض: 22 بكسل؛ نصف القطر الحدودي: 10 بكسل؛ الخلفية: #FFF؛ : .2s؛ .إدخال مربع الاختيار: محدد + .checkbox__text: قبل (الخلفية: #9FD468؛) .إدخال مربع الاختيار: محدد + .checkbox__text: بعد (يسار: 26 بكسل؛) .إدخال مربع الاختيار: التركيز + .checkbox__text: قبل (مربع- الظل: داخلي 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba( 255,255,0,.7);
كود CSS لزر الاختيارسيكون مثل هذا:
إدخال الراديو ( الموضع: مطلق؛ مؤشر z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 7 بكسل؛ ) .radio__text ( الموضع: نسبي؛ الحشو: 0 0 0 35 بكسل؛ المؤشر: المؤشر؛ ) .radio__text: قبل ( المحتوى: ""؛ الموضع: اليسار المطلق: 0؛ الارتفاع: 22 بكسل؛ نصف القطر: 50% (المحتوى: ""؛ الموضع: مطلق؛ الأعلى: 1 بكسل؛ اليسار: 4 بكسل؛ العرض: 16 بكسل؛ نصف قطر الحدود: 50%؛ الخلفية: #9FD468؛ مربع الظل: داخلي 0 1px 1px rgba(0, 0,0,.5); :بعد ( العتامة: 1; ) .إدخال الراديو: التركيز + .radio__text:قبل (box-shadow: 0 0 0 3px rgba(255,255,0,.7)
الأنماط هنا هي نفسها كما في الطريقة السابقة، ويتم تطبيقها فقط على المحددات الأخرى.
التصميم للمتصفحات القديمة
كود CSS لمربع الاختيار. أضفت في التعليقات على الكود توضيحات بخصوص المتصفحات:
/* أولاً، نقوم بتعيين الأنماط لـ IE8 والإصدارات الأقدم، أي. هنا نقوم بتحسين مربع الاختيار القياسي قليلاً. */ .checkbox ( محاذاة رأسية: أعلى؛ العرض: 17 بكسل؛ الارتفاع: 17 بكسل؛ الهامش: 0 3 بكسل 0 0;) /* هذا مخصص لجميع المتصفحات باستثناء المتصفحات القديمة جدًا التي لا تدعم المحددات الإضافية. نظهر أن التسمية قابلة للنقر. */ .checkbox + label ( cursor: pointer; ) /* يأتي بعد ذلك تصميم مربع الاختيار في المتصفحات الحديثة، بالإضافة إلى IE9 والإصدارات الأحدث. نظرًا لأن المتصفحات القديمة لا تدعم المحددات:not و:checked، فإن جميع الأنماط التالية لن تعمل فيها. في هذه الحالة، يتم تحديد المربع المحدد بدون نقطتين في المقدمة، لسبب ما يعمل بهذه الطريقة. */ .مربع الاختيار: ليس (محددًا) ( الموضع: مطلق؛ فهرس z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 20 بكسل؛ ) .مربع الاختيار: غير (محدد) + تسمية ( الموضع: نسبي؛ الحشو: 0 0 0 60 بكسل؛ ) .مربع الاختيار: غير (محدد) + التسمية: قبل ( المحتوى: ""؛ الموضع: مطلق؛ الأعلى: -4 بكسل؛ اليسار: 0؛ العرض: 50 بكسل؛ الارتفاع: 26 بكسل؛ نصف قطر الحدود: 13 بكسل؛ الخلفية : #CDD1DA؛ box-shadow: inset 0 2px 3px rgba(0,0,0,.2); الأعلى: -2 بكسل؛ العرض: 22 بكسل؛ نصف قطر الحدود: 10 بكسل؛ مربع الاختيار: 0 2 بكسل .2 ثانية؛ ( اليسار: 26 بكسل; ) .مربع الاختيار: التركيز + التسمية: قبل ( مربع الظل: داخلي 0 2px 3px rgba(0,0,0,.2), 0 0 0 3px rgba(255,255,0,.7 )
كود CSS لزر الاختيار:
راديو (محاذاة رأسية: أعلى؛ العرض: 17 بكسل؛ الارتفاع: 17 بكسل؛ الهامش: 0 3 بكسل 0 0؛) .radio + label (المؤشر: المؤشر؛) .radio:not(محدد) ( الموضع: مطلق؛ فهرس z: -1؛ العتامة: 0؛ الهامش: 10 بكسل 0 0 7 بكسل؛ ) .radio:not(محدد) + التسمية (الموضع: نسبي؛ الحشو: 0 0 0 35px;) .radio:not(محدد) + label:before (المحتوى) : ""؛ الموضع: مطلق؛ اليسار: 0؛ الارتفاع: 22 بكسل؛ نصف قطر الحدود: 50%؛ العرض: 16 بكسل الارتفاع: 16 بكسل؛ نصف قطر الحدود: 50%؛ الخلفية: #9FD468؛ + التسمية: بعد ( العتامة: 1؛ ) .radio: التركيز + التسمية: قبل ( box-shadow : 0 0 0 3px rgba(255,255,0,.7);
أمثلة
هذه هي الطريقة التي يتم بها الأمر بهذه الطريقة البسيطة. شكرا ل هذه الطريقة، تصميم مربعات الاختيار وأزرار الاختيار مع باستخدام CSSيمكنك أن تفعل ذلك بالطريقة التي تريدها.