ستوجهك هذه المقالة إلى إنشاء زر اختيار HTML بمساعدة مثال عملي.
كيف تضيف زر راديو في HTML؟
لإضافة زر اختيار بتنسيق HTML ، اتبع الصيغة الموضحة أدناه:
< الإدخال يكتب = 'مذياع' اسم = '' القيمة = '' >
فيما يلي وصف بناء الجملة المذكور:
- ' يكتب ”: تحدد هذه السمة نوع الإدخال الذي ترغب في إنشائه مثل النص والراديو ومربع الاختيار والمزيد. لإنشاء زر اختيار ، يجب تعيين قيمة السمة على أنها 'راديو'.
- ' اسم ”: يحدد اسم عنصر الإدخال. يجب أن تكون هذه السمة مماثلة لقائمة أزرار الاختيار.
- ' القيمة ”: يحدد هذا القيمة التي سيتم إرسالها إلى الخادم عند تحديد زر الاختيار على أنه محدد.
مثال: إضافة زر اختيار بتنسيق HTML
سيناقش هذا المثال إجراء إضافة زر اختيار بتنسيق HTML باستخدام زر اختيار الإدخال. في
الخطوة الأولى: إنشاء ملف HTML
أولاً ، أضف علامة
داخل
- أولاً ، أضف ' 'لإعطاء عنوان للصفحة.
- ثم ' 'علامة لفقرة أو سطر نص.
- بعد ذلك ، تتم إضافة علامة الإدخال بسمة ' يكتب 'لها قيمة' مذياع '، تم تعيين الاسم على أنه تحديد ، و' القيمة ' كما ' أحمر '. يتم إعطاء قيم مختلفة لكل زر اختيار له نفس الاسم. نفس الاسم يمثل نفس المجموعة أو القائمة.
- إذا كنت ترغب في إضافة زر يتم تحديده افتراضيًا على أنه محدد ، فقم بتعيين السمة ' التحقق على هذا الزر.
- أخيرًا ، ' <التسمية> 'على كل زر اختيار لإضافة تسميات توضيحية. كما أنه يوفر إمكانية وصول أفضل.
الكود أدناه هو تفسير السيناريو أعلاه:
< h1 > زر راديو HTML h1 >< ص > ما هو لونك المفضل؟ ص >
< الإدخال يكتب = 'مذياع' اسم = 'إختر لون' القيمة = 'أحمر' التحقق >
< ضع الكلمة المناسبة إلى عن على = 'راديو 1' > أحمر ضع الكلمة المناسبة >
< ر >
< الإدخال يكتب = 'مذياع' اسم = 'إختر لون' القيمة = 'أزرق' >
< ضع الكلمة المناسبة إلى عن على = 'راديو 1' > أزرق ضع الكلمة المناسبة >
< ر >
< الإدخال يكتب = 'مذياع' اسم = 'إختر لون' القيمة = 'لون أخضر' >
< ضع الكلمة المناسبة إلى عن على = 'راديو 1' > لون أخضر ضع الكلمة المناسبة >
< ر >
< الإدخال يكتب = 'مذياع' اسم = 'إختر لون' القيمة = 'ليلكي' >
< ضع الكلمة المناسبة إلى عن على = 'راديو 1' > أرجواني ضع الكلمة المناسبة >
< ر >
< الإدخال يكتب = 'مذياع' اسم = 'إختر لون' القيمة = 'الآخرين' >
< ضع الكلمة المناسبة إلى عن على = 'راديو 1' > آحرون ضع الكلمة المناسبة >
يمكن ملاحظة أن أزرار الاختيار تم إنشاؤها بنجاح:
يمكنك أيضًا تطبيق الأنماط على زر الاختيار الذي تم إنشاؤه أعلاه باتباع رمز CSS المذكور أدناه.
الخطوة الثانية: تطبيق النمط على HTML
ال ' شعبة 'يشير إلى علامة div التي أنشأناها في ملف HTML:
- لأول مرة ' لون الخلفية 'تم تعيين الخاصية' على أنها ' #8197f0 '.
- ' الحدود 'تم تعيين الخاصية' على أنها ' 5 بكسل منقط # 13023a '، حيث تمثل 5 بكسل عرض الحد ، وتشير النقطة المنقطة إلى نوع الخط ، ثم تشير إلى لون الحد.
- ' حشوة 'تم تعيينه كـ' 20 بكسل 100 بكسل 'حيث تحدد 20px المساحة المتروكة من أعلى وأسفل و 100 بكسل تشير إلى المساحة المتروكة من اليسار واليمين.
- لتصميم الخط ، عيّن الخيار ' خط العائلة 'قيمة الممتلكات كـ' مخطوطة '.
CSS
شعبة {لون الخلفية: #8197f0;
الحد: 5 بكسل منقط #13023a;
الحشو: 20 بكسل 100 بكسل ؛
حجم الخط: 20 بكسل ؛
عائلة الخطوط: مخطوطة ؛
}
يمكن ملاحظة أن عنصر div تم تصميمه بنجاح:
هذا هو! لقد شرحنا بالتفصيل زر اختيار HTML.
استنتاج
زر الاختيار هو إدخال يظهر دائمًا في مجموعات من خيارين أو أكثر. من هذه المجموعة ، يمكن للمستخدم تحديد خيار واحد فقط. في HTML ، يمكن إنشاء زر اختيار باستخدام ' <إدخال> 'العلامة التي لها نوع السمة مع القيمة' مذياع '. توضح هذه المدونة طريقة إضافة أزرار الاختيار بتنسيق HTML.