HTML Form Select Inputs
الحقول الاختيارية في HTML Form
سوف تتعلم في هذا الدرس كيفية عمل حقول اختيارية داخل عنصر HTML form والتي يقوم من خلالها المستخدم باختيار مجموعة خيارات أو خيار محدّد من مجموعة بيانات.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
HTML Form Select Inputs
الحقول الاختيارية في HTML Form
</>
HTML form radio input
زر تحديد خيار واحد في HTML form
يستخدم زر radio input لتحديد خيار واحد فقط من بين جميع الاختيارات الموجودة، مثل: gender male or female لاختيار ذكر أو أنثى.
- القيمة التي تحدد زر radio input هي radio لتصبح بهذا الشكل <"input type="radio>.
- يجب تحديد الاسم عن طريق خاصية name ويتم إضافة نفس الاسم لجميع الحقول من النوع radio.
HTML form radio input
اختيار إجابة واحدة من بين جميع الاختيارات المحدّدة داخل HTML form.
<form> <input type="radio" id="male" name="gender"> <label for="male">Male</label><br> <input type="radio" id="female" name="gender"> <label for="female">Female</label><br> </form>
</>
HTML form checkbox input
زر تحديد عدة خيارات في HTML form
يستخدم زر checkbox input لتحديد عدّة خيارات موجودة ضمن قائمة خيارات أوسع، مثل: تحديد مجموعة دورات تدريبية courses.
- القيمة التي تحدد زر checkbox input هي checkbox لتصبح بهذا الشكل <"input type="checkbox>.
- يمكن تحديد خيار واحد أو أكثر من العناصر الموجودة ضمن خاصية checkbox.
HTML form checkbox input
يُستخدم زر checkbox input لتحديد عدّة خيارات موجودة ضمن قائمة خيارات أوسع في HTML form.
<form> <input type="checkbox" id="html" name="html"> <label for="html">I like HTML</label><br> <input type="checkbox" id="css" name="css" > <label for="css"> I like CSS</label><br> <input type="checkbox" id="js" name="js"> <label for="js"> I like JavaScript</label><br><br> </form>
</>
HTML form range input
زر اختيار قيمة بين قيمتين في HTML form
يستخدم زر range input لاختيار قيمة واحدة محصورة بين قيميتين عن طريق slider مؤشر.
- القيمة التي تحدد زر range input هي range لتصبح بهذا الشكل <"input type="range>.
- لا يمكن اختيار أكثر من قيمة من خلال range input بداخل HTML form.
HTML form range input
زر range input لاختيار قيمة واحدة محصورة بين قيميتين داخل HTML form.
<form> <label for="vol">Volume (between 0 and 50):</label> <input type="range" id="vol" name="vol" min="0" max="50"> </form>
</>
HTML form color input
زر لاختيار اللون في HTML form
يستخدم زر color input لاختيار لون من مجموعة ألوان، لتساعد المستخدم في تحديد اللون المناسب ضمن HTML form.
- القيمة التي تحدد زر color input هي color لتصبح بهذا الشكل <"input type="color>.
- لا يمكن اختيار أكثر من لون من خلال color input بداخل HTML form.
HTML form color input
يستخدم زر color input لاختيار لون من مجموعة ألوان لتساعد المستخدم في تحديد اللون المناسب داخل HTML form.
<form> <label for="color">Select your favorite color:</label><br> <input type="color" id="color"> </form>
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
