زر الراديو (زر الاختيار) هو أحد أنواع عناصر التحكم التي تسمح لك بتحديد قيمة واحدة من عدة عناصر مقترحة. يتم استخدامها على نطاق واسع في تطوير الويب لإنشاء مجموعة متنوعة من الاستبيانات والنماذج والاستبيانات وواجهات المستخدم الأخرى.
يمكن استخدام زر الراديو للإجابة على سؤال بنعم أو لا ، واختيار حل إيجابي أو سلبي ، وتحديد التفضيلات ، والعديد من المواقف الأخرى التي يتطلب فيها اختيار أحد البدائل العديدة.
لإنشاء راديوبوتون في هتمل ، يجب عليك استخدام العلامة مع نوع = "راديو" السمة. من المهم أن تتذكر أنه لكي يعمل زر الراديو بشكل صحيح ، يجب تعيين نفس قيم سمة الاسم لكل زر في المجموعة. يتيح ذلك للمتصفح فهم أن الأزرار مصممة لتحديد قيمة واحدة.
لإنشاء تصميم راديوبوتون في كس ، يمكنك استخدام خصائص مختلفة مثل دائرة نصف قطرها الحدود ، لون الخلفية ، اللون ، وغيرها. يمكنك أيضا إضافة رسوم متحركة وانتقالات وتأثيرات أخرى لتحسين التجربة المرئية وتحسين تجربة المستخدم.
- معلومات تمهيدية حول زر الراديو
- ما هو راديوبوتون وكيف يعمل في هتمل و كس
- إنشاء راديوبوتون في هتمل
- العلامات والسمات لإنشاء زر الراديو
- التصميم راديوبوتون باستخدام كس
- كيفية تغيير مظهر راديوبوتون باستخدام أنماط كس
- استخدام زر الراديو في النماذج
- أمثلة على استخدام زر الراديو في النماذج الموجودة على الموقع
- تجهيز البيانات الواردة من زر الراديو
- سؤال وجواب
- كيف يمكنني إنشاء زر الاختيار في أتش تي أم أل?
- كيف يمكنني وضع أزرار الاختيار متعددة على نفس الخط?
- كيف يمكنني جعل زر الاختيار واحدة مختارة افتراضيا?
- كيف يمكنني الحصول على قيمة زر الاختيار المحدد باستخدام جافا سكريبت?
- هل من الممكن أن أزرار الراديو نمط باستخدام المغلق?
- هل من الممكن تعيين القيم الخاصة بك لأزرار الراديو?
معلومات تمهيدية حول زر الراديو
زر الراديو (زر الاختيار) هو أحد أنواع عناصر التحكم في النموذج في هتمل. يسمح زر الاختيار للمستخدم بتحديد أحد الخيارات المقترحة. يتم تمثيل كل زر اختيار بمفتاح دائري ونص مرتبط.
ميزة خاصة لزر الاختيار هي أنه يمكن للمستخدم تحديد واحد فقط من الخيارات المتاحة. بشكل افتراضي ، يتم تحديد أحد أزرار الاختيار ، وإذا حدد المستخدم زر اختيار آخر ، فإن الزر السابق يتوقف تلقائيا عن التحديد.
مثال:
| الخيار 1 | |
| الخيار 2 | |
| الخيار 3 |
في المثال أعلاه ، يحتوي كل زر اختيار على سمة معرف واسم. يتم استخدام سمة المعرف لربط تسمية زر الاختيار المقابلة ، والتي تحتوي على السمة من أجل بنفس القيمة. تقوم سمة الاسم بتجميع أزرار الاختيار معا بحيث تعمل كوحدة واحدة.
ما هو راديوبوتون وكيف يعمل في هتمل و كس
راديوبوتون هو عنصر نموذج هتمل الذي يسمح للمستخدم لتحديد خيار واحد فقط من تلك المقترحة. إنه زر دائري يمكن تمييزه أو إلغاء تحديده.
لإنشاء زر راديو ، استخدم العلامة مع سمة النوع="راديو". يجب تعيين سمة معرف فريدة لكل زر راديو. لربط زر الراديو بمجموعة ، يتم تعيين نفس قيمة سمة الاسم.
نموذج التعليمات البرمجية لإنشاء زر الراديو:
الخيار 1
الخيار 2
الخيار 3
لتعيين القيمة الافتراضية لزر الراديو ، أضف السمة المحددة إلى أحد العناصر في المجموعة:
الخيار 1
لنمط راديوبوتون ، يمكنك استخدام كس. تتضمن الأنماط الممكنة تغيير لون الخلفية وحجمها وشكلها وإضافة صور مخصصة والمزيد.
مثال على رمز كس لتصميم راديوبوتون:
الإدخال [النوع="راديو"] {
/ * أضف الأنماط هنا */
}
الإدخال [النوع= "راديو"]: فحص {
/ * إضافة أنماط لزر الراديو المحدد */
}
الإدخال [النوع= "راديو"] + تسمية {
/ * إضافة أنماط لنص التسمية */
}
يمكنك أيضا استخدام الفئات الزائفة :تحوم و: التركيز لإضافة تأثيرات عند التمرير والتركيز على زر الراديو.
باستخدام زر الراديو ، يمكنك إنشاء خيارات للمستخدمين ، مثل اختيار لغة ، أو اختيار الخيارات عند الخروج ، أو أي سياق آخر تحتاج فيه إلى تزويد المستخدم بعدد محدود من الخيارات والسماح له بتحديد واحد منها فقط.
إنشاء راديوبوتون في هتمل
زر الراديو هو عنصر تحكم هتمل يسمح للمستخدم بتحديد قيمة واحدة فقط من القائمة المقترحة.
زر.
على سبيل المثال ، لإنشاء زري اختيار "ذكر" و "أنثى" ، يمكنك استخدام الكود التالي:
ذكر
أنثى
بحيث تعمل معا ويمكن للمستخدم تحديد زر اختيار واحد فقط من المجموعة.
. على سبيل المثال:
ذكر
الآن سيتم تحديد زر الاختيار" ذكر " مسبقا عند تحميل الصفحة.
. على سبيل المثال:
بول
ذكر
أنثى
سيخلق مساحة لمجموعة من أزرار الاختيار ويسمح لهم أن تكون مجمعة منطقيا.
العلامات والسمات لإنشاء زر الراديو
لإنشاء راديوبوتون في هتمل ، يتم استخدام علامة مع نوع = "راديو" السمة. تسمح العلامة للمستخدم بإدخال البيانات على صفحة الويب.
لتحديد مجموعة زر راديو واحدة ، مما يعني أنه يمكن للمستخدم تحديد خيار واحد فقط من عدة خيارات ، يتم استخدام سمة الاسم. وبالتالي ، ستنتمي جميع الأزرار الراديوية التي تحمل نفس قيمة سمة الاسم إلى نفس المجموعة ويمكن تحديد واحد منها فقط.
يتم استخدام السمة المحددة لتحديد أي من زر الراديو يتم تحديده من قبل المستخدم. إذا تم تحديد السمة المحددة لراديو معينزر ، سيتم تحديده افتراضيا عند تحميل صفحة الويب. إذا حدد المستخدم زر راديو آخر ، يتم تعيين قيمة السمة المحددة لزر الراديو المحدد ، وبالنسبة لزر الراديو المتبقي في المجموعة ، تتم إزالة قيمة السمة المحددة.
هنا هو رمز هتمل مثال لإنشاء مجموعة راديوبوتون:
أنثى
التصميم راديوبوتون باستخدام كس
النمط الرئيسي من راديوبوتون يمكن تغييرها باستخدام كس. للقيام بذلك ، يمكنك استخدام فئة زائفة
: فحص
، والذي يتم تطبيقه على زر الراديو عند تحديده.
مثال على التصميم راديوبوتون:
الإدخال [النوع="راديو"] {
عرض: لا شيء;
}
التسمية {
عرض: مضمنة كتلة;
الحشو: 10 بكسل;
الحدود: 1 بكسل الصلبة # سك;
نصف قطر الحدود: 5 بكسل;
المؤشر: المؤشر;
}
عرض: لا شيء;
. بدلا من ذلك
، يتم عرض عنصر التسمية
، والتي لها شكل علم دائري. عند تحديد زر الراديو ، يتغير لون خلفية العنصر المحدد إلى اللون الرمادي.
يمكنك أيضا تغيير أنماط أخرى ، مثل لون النص وحجم الخط وأنماط أخرى ، حسب تفضيلاتك.
يتيح لك تطبيق الأنماط على زر الراديو تغيير مظهره وجعله أكثر ملاءمة وجاذبية للمستخدمين.
- ربط الفئة التي تم إنشاؤها مع زر الراديو الخاص بك باستخدام سمة الفئة:
إذا رغبت في ذلك ، يمكنك إضافة تسمية إلى زر الراديو الخاص بك لجعله أكثر قابلية للفهم للمستخدمين.:
بلدي راديوبوتون
كرر الخطوات من 1 إلى 3 لجميع الأزرار الراديوية الأخرى التي تريد تصميمها.
تطبيق أنماط كس إلى راديوبوتون لتغيير مظهرها وفقا لاحتياجاتك.
هنا مثال على أنماط كس لتغيير مظهر راديوبوتون:
. زر الراديو الخاص بي {
العرض: 20 بكسل;
لون الخلفية: # 0 0 0;
المؤشر: المؤشر;
}
. زر الراديو الخاص بي: فحص {
لون الخلفية: # ف 0000;
}
- في هذا المثال ، سيكون للزر الراديوي شكل دائري بأبعاد 20 pixels 20 بكسل وخلفية رمادية. عند التحديد (التحقق) ، ستتحول الخلفية إلى اللون الأحمر. يمكنك تخصيص الأنماط وفقا لتفضيلاتك والتصميم.
- باستخدام أنماط كس ، يمكنك تغيير مظهر راديوبوتون تماما وتكييفه مع التصميم الخاص بك. ضع في اعتبارك أن دعم الأنماط قد يختلف في المتصفحات المختلفة ، لذلك يوصى باختبار مظهر زر الراديو على منصات مختلفة.
- استخدام زر الراديو في النماذج
زر الراديو هو عنصر نموذج يسمح للمستخدم بتحديد خيار واحد فقط من الخيارات المقترحة.
لإنشاء راديوبوتون في هتمل ، يتم استخدام علامة مع نوع = "راديو" السمة. يجب أن يكون لكل زر راديو قيمة سمة اسم فريدة بحيث يمكن تجميعها معا. عندما يختار المستخدم زر راديو واحد ، يصبح الآخرون في المجموعة غير نشطين تلقائيا.
مثال على استخدام راديوبوتون في هتمل:
ذكر
أنثى
في هذا المثال ، تم إنشاء مجموعة زر الراديو باسم السمة= "الجنس". يمكن للمستخدم اختيار أحد الخيارين - " ذكر "أو"أنثى".
يتم استخدام العلامة لإنشاء تسمية نصية لكل زر راديو. السمة ل يربط التسمية إلى راديوبوتون المقابلة من قبل معرفهم.
لمعرفة زر الراديو الذي تم اختياره من قبل المستخدم ، يمكنك استخدام جافا سكريبت أو برنامج نصي للخادم.
يحتوي زر الراديو أيضا على بعض السمات الإضافية التي يمكن استخدامها:
معطل-يجعل زر الراديو غير نشط;
فحص-قبل تحديد راديوبوتون;
مطلوب-يجعل زر الراديو إلزاميا قبل تقديم النموذج.
يتيح لك استخدام زر الراديو في النماذج إنشاء واجهة مريحة وبديهية لاختيار خيار واحد من عدة خيارات.
أمثلة على استخدام زر الراديو في النماذج الموجودة على الموقع
راديوبوتون هو عنصر تحكم هتمل التي تسمح للمستخدمين لتحديد خيار واحد فقط من تلك المقترحة.
قد يبدو مثال على استخدام زر الراديو في النماذج كما يلي:
مثال بسيط:
في هذا المثال ، يمكن للمستخدم تحديد قيمة واحدة فقط - " نعم "أو"لا".
نعم
لا
، مجموعة أزرار لاسلكية ذات خيارات متعددة:
في هذا المثال ، يمكن للمستخدم تحديد عدة خيارات.
الخيار 1
الخيار 2
الخيار 3
الخيار جيم
وبالتالي ، يتيح لك استخدام زر الراديو إنشاء نماذج سهلة الاستخدام ومفهومة على الموقع للمستخدمين.
تجهيز البيانات الواردة من زر الراديو
بعد استخدام زر الراديو ، يمكن للمستخدم تحديد أحد الخيارات المقترحة. لمعالجة البيانات الواردة من راديوبوتون ، يمكنك استخدام جافا سكريبت أو برنامج نصي الخادم في لغة مثل فب أو بيثون.
في جافا سكريبت ، للحصول على قيمة زر الراديو المحدد ، يمكنك استخدام الكود التالي:
// احصل على جميع عناصر زر الراديو باسم محدد
فار راديوبوتونس = وثيقة.الحصول على عناصرالاسم ('الاسم');
// انتقل من خلال جميع عناصر زر الراديو وحدد العنصر الذي تم تحديده
إلى عن على (فار أنا = 0; أنا < راديوبوتونس.الطول ؛ أنا {) {
إذا (راديوبوتونس [أنا].فحص) {
فار القيمة المحددة = راديوبوتونس [أنا].القيمة;
استراحة;
}
}
// باستخدام قيمة زر الاختيار المحدد
وحدة التحكم.سجل ('القيمة المحددة: '+القيمة المحددة);
في برنامج نصي خادم مثل فب ، يمكنك الحصول على قيم راديوبوتون من خلال صفيف
OST _ آخر
أو