HTML / خانات الإختيار
مفهوم خانة الاختيار
خانة الإختيار (Check Box) عبارة عن زر مربع الشكل عند النقر عليه يظهر بداخله علامة صح تشير إلى أنه قد تم اختياره و عند النقر عليه مجدداً تختفي علامة الصح للإشارة إلى أنه لم يعد مختاراً.
نستخدم خانات الاختيار لعرض خيار واحد أو عدة خيارات أمام المستخدم و جعله قادراً على اختيار ما يريد منها أو حتى اختيارها كلها.
في هذا الدرس سنتعلم كيفية إضافة خانات اختيار في الصفحة بالإضافة لكيفية وضعها ضمن مجموعات.
إضافة خانة اختيار
لإضافة خانة اختيار يمكنك استخدام الوسم <input> على هذا النحو <input type="checkbox">.
يمكنك إضافة الخصائص التالية لهذا الوسم:
idنضيفها له في حال أردنا ربطه بوسم<label>.nameنضيفها له حتى يتم إرسال القيمة الموضوعة فيه عند النقر على زر الإرسال.valueلإعطائه القيمة التي سيتم إرسالها عند النقر على زر الإرسال.disabledلجعله يظهر بلون باهت و قيمته غير قابلة للتغيير.checkedنضيفها له لجعله مختاراً بشكل افتراضي عندما تفتح الصفحة.
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع إعطاء إسم و قيمة مختلفة لكل واحد منهم:
<!DOCTYPE html>
<html>
<body>
<p>Select all languages that you know:</p>
<form action="/tryit/submitted" method="post">
<!-- فيها "arabic" و في حال اختيارها يتم وضع القيمة "option1" هنا قمنا بعرض خانة اختيار إسمها -->
<input type="checkbox" id="ar" name="option1" value="arabic">
<label for="ar">Arabic</label><br>
<!-- فيها "english" و في حال اختيارها يتم وضع القيمة "option2" هنا قمنا بعرض خانة اختيار إسمها -->
<input type="checkbox" id="en" name="option2" value="english">
<label for="en">English</label><br>
<!-- فيها "french" و في حال اختيارها يتم وضع القيمة "option3" هنا قمنا بعرض خانة اختيار إسمها -->
<input type="checkbox" id="fr" name="option3" value="french">
<label for="fr">French</label><br><br>
<input type="submit">
</form>
</body>
</html>
خانات الإختيار بنفس الأسماء
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع إعطائهم نفس الأسماء:
ملاحظة: بالنسبة للمستخدم فإنه لن يشعر بأي فرق بين هذا المثال و المثال السابق حيث سيرى نفس الصفحة أما بالنسبة للصفحة التي ستتلقى البيانات فهذه المرة سيصلها فقط القيم التي قام المستخدم باختيارها.
<!DOCTYPE html>
<html>
<body>
<p>Select all languages that you know:</p>
<form action="/tryit/submitted" method="post">
<!-- "languages[]" و تملك الإسم المشترك "arabic" هنا قمنا بعرض خانة اختيار قيمتها -->
<input type="checkbox" id="ar" name="languages[]" value="arabic">
<label for="ar">Arabic</label><br>
<!-- "languages[]" و تملك الإسم المشترك "english" هنا قمنا بعرض خانة اختيار قيمتها -->
<input type="checkbox" id="en" name="languages[]" value="english">
<label for="en">English</label><br>
<!-- "languages[]" و تملك الإسم المشترك "french" هنا قمنا بعرض خانة اختيار قيمتها -->
<input type="checkbox" id="fr" name="languages[]" value="french">
<label for="fr">French</label><br><br>
<input type="submit">
</form>
</body>
</html>
خانة اختيار مختارة بشكل افتراضي
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع جعل الأول يظهر مُختاراً بشكل إفتراضي:
<!DOCTYPE html>
<html>
<body>
<p>Select all languages that you know:</p>
<form action="/tryit/submitted" method="post">
<!-- لجعل الخانة تظهر مختارة بشكل إفتراضي checked هنا قمنا بإضافة الخاصية -->
<input type="checkbox" id="ar" name="option1" value="arabic" checked>
<label for="ar">Arabic</label><br>
<input type="checkbox" id="en" name="option2" value="english">
<label for="en">English</label><br>
<input type="checkbox" id="fr" name="option3" value="french">
<label for="fr">French</label><br><br>
<input type="submit">
</form>
</body>
</html>
خانة اختيار غير مفعلة
في المثال التالي قمنا بعرض ثلاث خانات اختيار مع جعل الأول يظهر مُختاراً بشكل إفتراضي و غير مفعّل أيضاً لجعل المستخدم غير قادر على تغيير قيمته:
<!DOCTYPE html>
<html>
<body>
<p>Select all languages that you know:</p>
<form action="/tryit/submitted" method="post">
<!-- لجعل الخانة تظهر مختارة بشكل إفتراضي checked هنا قمنا بإضافة الخاصية
لجعل قيمتها تظهر غير مفعّلة مما يعني أنها غير قابلة للتغير disabled و الخاصية
ملاحظة: الزر الموضوع بشكل غير مفعّل قيمته لا يتم إلى الخادم -->
<input type="checkbox" id="ar" name="option1" value="arabic" checked disabled>
<label for="ar">Arabic</label><br>
<input type="checkbox" id="en" name="option2" value="english">
<label for="en">English</label><br>
<input type="checkbox" id="fr" name="option3" value="french">
<label for="fr">French</label><br><br>
<input type="submit">
</form>
</body>
</html>