HTML

HTML Form Select Inputs
الحقول الاختيارية في HTML Form

سوف تتعلم في هذا الدرس كيفية عمل حقول اختيارية داخل عنصر HTML form والتي يقوم من خلالها المستخدم باختيار مجموعة خيارات أو خيار محدّد من مجموعة بيانات.

التاريخ

09 يناير 2022

الدروس

48

المستوى

مبتدئ

اللغة

عربي

المشاهدات

2049

المواضيع

12
الشروحات chevron_left HTML Form Select Inputs chevron_left HTML

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

HTML form color input

يستخدم زر color input لاختيار لون من مجموعة ألوان لتساعد المستخدم في تحديد اللون المناسب داخل HTML form.

<form>
  <label for="color">Select your favorite color:</label><br>
  <input type="color" id="color">
</form>
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.