نطاقات الإختيار في HTML

يا هلا! اليوم بنتكلم عن نطاقات الإختيار في HTML. ببساطة، كيف تخلي المستخدم يختار قيمة أو مجموعة قيم من قائمة أنت محددها. الموضوع مهم جداً لتجربة المستخدم وجمع البيانات.

عنصر <select>

هذا هو الأشهر والأكثر استخداماً لما تبغى المستخدم يختار قيمة واحدة من قائمة منسدلة.

شوف كيف شكله:

<label for="country">اختر دولتك:</label>
<select id="country" name="country">
  <option value="">-- الرجاء الإختيار --</option>
  <option value="sa">السعودية</option>
  <option value="eg">مصر</option>
  <option value="ae">الإمارات</option>
</select>

إذا بغيت المستخدم يقدر يختار أكثر من قيمة، بس أضف السمة multiple:

<label for="fruits">اختر فواكهك المفضلة (يمكنك اختيار أكثر من واحدة بالضغط على Ctrl/Cmd):</label>
<select id="fruits" name="fruits" multiple>
  <option value="apple">تفاح</option>
  <option value="banana">موز</option>
  <option value="orange">برتقال</option>
  <option value="grape">عنب</option>
</select>

ملاحظة: عند استخدام multiple، قيمة name لازم تكون على شكل مصفوفة في الخلفية (مثلاً name="fruits[]" في PHP) عشان تستقبل كل القيم المختارة بشكل صحيح.

عنصر <optgroup>

هذا العنصر يجي داخل <select> عشان يقسم الخيارات لمجموعات، وهذا يخلي القائمة المنسدلة مرتبة وسهلة القراءة، خصوصاً لو عندك خيارات كثيرة.

<label for="cars">اختر سيارتك:</label>
<select id="cars" name="cars">
  <option value="">-- الرجاء الإختيار --</option>
  <optgroup label="سيارات ألمانية">
    <option value="mercedes">مرسيدس</option>
    <option value="bmw">BMW</option>
  </optgroup>
  <optgroup label="سيارات يابانية">
    <option value="toyota">تويوتا</option>
    <option value="honda">هوندا</option>
  </optgroup>
</select>

عنصر <datalist>

هذا العنصر رهيب لما تبغى توفر للمستخدم اقتراحات أثناء الكتابة، لكنه في نفس الوقت يقدر يكتب شيء مو موجود في القائمة. هو مو قائمة منسدلة بالمعنى التقليدي، بل هو "اقتراحات".

<label for="browser">متصفحك المفضل:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="جوجل كروم">
  <option value="فايرفوكس">
  <option value="مايكروسوفت إيدج">
  <option value="سفاري">
</datalist>

ملاحظة: <datalist> يرتبط مع <input> عن طريق سمة list في الـ <input> اللي قيمتها لازم تكون مطابقة لـ id الـ <datalist>.

أزرار الراديو <input type="radio">

تستخدم لما تبغى المستخدم يختار قيمة واحدة فقط من مجموعة خيارات واضحة أمامه. كل الأزرار اللي لها نفس name تعتبر جزء من مجموعة واحدة.

<p>ما هو جنسك؟</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">ذكر</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">أنثى</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">أفضل عدم التحديد</label>

صناديق الاختيار <input type="checkbox">

تستخدم لما تبغى المستخدم يختار صفر أو أكثر من قيمة من مجموعة خيارات. كل صندوق اختيار مستقل بذاته.

<p>ما هي هواياتك؟ (يمكنك اختيار أكثر من واحدة)</p>
<input type="checkbox" id="reading" name="hobbies[]" value="reading">
<label for="reading">القراءة</label><br>
<input type="checkbox" id="sports" name="hobbies[]" value="sports">
<label for="sports">الرياضة</label><br>
<input type="checkbox" id="travel" name="hobbies[]" value="travel">
<label for="travel">السفر</label><br>
<input type="checkbox" id="coding" name="hobbies[]" value="coding">
<label for="coding">البرمجة</label>

ملاحظة: مثل <select multiple>، يفضل استخدام name="hobbies[]" (أو ما شابه) لتجميع القيم في مصفوفة عند إرسال النموذج.

وبكذا نكون غطينا أبرز طرق إنشاء نطاقات الإختيار في HTML. كل وحدة لها استخدامها الخاص ومكانها المناسب. اختر الأنسب لاحتياجك!

← السابقالفهرسالتالي →