html الإستمارة

form حقول الإختيار

آخر تحيين: 05-03-2014

html تنظيم و إرسال الإستمارة input حقول إدخال النص


تُتحفنا لغة html بمجموعة مهمة من عناصر الإختيار التي يمكننا إضافتها في الإستمارة . في هذا النوع ، نطلُب من الزائر القيام باختيار عنصر واحد أو أكثر ، من مجموعة عناصر :

  • checkbox : خانات الإختيار
  • radio : مجال الإختيار
  • select : اللوائح المُنسدلة

checkbox خانات الإختيار

غالبا ما تُستخدم في استطلاعات الرأي . إذ تُمكّن الزائر من القيام بخيار أو أكثر من مجموعة من العناصر .
. لإنشاء خانة ، سنستعمل الوسم input

<input type="checkbox" name="choice_1">

مثال :

<form action="" method="post">
   <p> ما هي الهواية أو الهوايات التي تُسعد حياتك ؟ </p>
    <input type="checkbox" name="foot"><br>
    <input type="checkbox" name="basket"><br>
    <input type="checkbox" name="swim"><br>
    <input type="checkbox" name="cinema"><br>
    <input type="checkbox" name="travel"><br>
    <input type="checkbox" name="read"><br>
    <input type="checkbox" name="innovation">
</form>

النتيجة ، تركت لكم الأمر لإضافة البطاقات اللاصقة "label" :

يجب أن تكون الصفة name مختلفة في جميع الحقول

لتبقيع و اختيار خانة مسبقا ، نضيف الصفة checked بدون قيمة ، بعض المطورين يفضلون إعطاءها قيمة "checked" ، فيكتبون checked="checked" . لا داعي لزيادة هذه القيمة ، لأنها لا تقدّم أي إضافة .

<input type="checkbox" name="foot" checked >

radio مجال الإختيار

يشبه خانات الإختيار بخلاف أن الزّائر يكون مدعو هنا ، لاختيار خانة واحدة فقط من بين خانات المجال . سنحافظ على نفس الوسم <input> أما قيمة الصفة type ستتغير إلى radio

مثال : لنفترض أن لديكم موقع خدمات خاص ، و تفرضون على الزائر اختيار مدة الإشتراك ، للإستفادة من الخدمات

<form action="" method="post">
    <p> اختر مدة الإشتراك ! </p>
	
    <label> شهر </label>
	   <input type="radio" name="subscription" value="1-month"><br>
    <label> 6 أشهر </label>
	   <input type="radio" name="subscription" value="6-month"><br>
    <label> سنة </label>
	   <input type="radio" name="subscription" value="1-year"><br>
</form>

النتيجة :


أعطينا نفس الإسم name لجميع الخانات : name="subscription" ، حتى نتعرّف على المجال الذي تنتمي إليه الخانة . و لنجبر الزائر أيضا على القيام باختيار واحد فقط .
بما أن كل الخانات تحمل نفس الإسم ، للتمييز بينها و معرفة الخانة التي اختارها الزائر سنضيف الصفة value لجميع الخانات بقيم مختلفة .
في مثالنا لدينا مجال واحد فقط . إذا أردنا إضافة مجال ثاني ، يجب أن نعطي إسما مختلفا للخانات عن المجال الأول ، مثال :

<form action="" method="post">
    <p> اختر مدة الإشتراك ! </p>
	
    <label> شهر </label>
	   <input type="radio" name="subscription" value="1-month"><br>
    <label> 6 أشهر </label>
	   <input type="radio" name="subscription" value="6-month"><br>
    <label> سنة </label>
	   <input type="radio" name="subscription" value="1-year"><br>

	<p>اختر طريقة الآداء</p>
    <label> PayPal </label>
	   <input type="radio" name="payment" value="pay-pal"><br>
    <label> Visa </label>
	   <input type="radio" name="payment" value="visa"><br>
    <label> Master Card </label>
	   <input type="radio" name="payment" value="master-card"><br>
</form>

النتيجة :


بهذه الطريقة يمكنكم اختيار خانة واحدة فقط من كل مجال

اللّوائح المنسدلة

تكون اللوائح المنسدلة ذات جدوى ، عندما نريد اختيار عنصر واحد من لائحة طويلة . لإنشاءها ، سندع جانبا وسم input و سنتعرّف على وسوم جديدة :
الوسم الأول <select> يدلّنا على بداية و نهاية اللاّئحة المنسدلة ، لتمييزه ، نعطيه إسما باستعمال الصفة name كما عهدنا أن نفعل . داخل الوسم سنضيف عناصر لائحتنا باستعمال وسم آخر <option> .
و لكي نميز كل عنصر عن الآخر ، نضيف صفة value مختلفة . مثال :

<form action="" method="post">
اختر بلدك :
<select name="pays">
   <option value="maroc"> المغرب</option>
   <option value="palestine"> فلسطين </option>
   <option value="tunisie"> تونس </option>
   <option value="algérie"> الجزائر</option>
   <option value="lybie"> ليبيا </option>
   <option value="egypt"> مصر </option>
   <option value="mauritanie"> موريتانيا </option>
   <option value="arabie-saudite"> السعودية </option>
   <option value="yemen"> اليمن </option>
   <option value="qatar"> قطر </option>
</select>

</form>

البلد المُختار تلقائيا على المتصفّح هو المُتواجد في الحقل الأول . لاختيار بلد آخر يظهر تلقائيا كفلسطين مثلا ، سنضيف الصفة selected بدون قيمة كما فعلنا مع checked :

<option value="palestine" selected> فلسطين </option>

يمكننا تقسيم هذه اللاّئحة مثلا إلى مجموعتين من الدول حسب القارّة . و الوسم الذي يقوم بهذا التنظيم هو <optgroup> و للتمييز بين القسمين سنضيف صفة label للوسم . أقول الصفة و ليس الوسم "label" :

<form action="" method="post">
      اختر بلدك :
<select name="pays">
  <optgroup label="افريقيا">
    <option value="maroc"> المغرب</option>        
    <option value="tunisie"> تونس </option>
    <option value="algérie"> الجزائر</option>
    <option value="lybie"> ليبيا </option>
    <option value="egypt"> مصر </option>
    <option value="mauritanie"> موريتانيا </option>
  </optgroup>
           
  <optgroup label="آسيا">
    <option value="palestine" selected> فلسطين </option>        
    <option value="arabie-saudite"> السعودية </option>
    <option value="yemen"> اليمن </option>
    <option value="qatar"> قطر </option>
  </optgroup>    
</select>
</form>

النتيجة :