في هذا الدرس 4تصفّح المواضيع
يستخدم زر radio input لتحديد خيار واحد فقط من بين جميع الاختيارات الموجودة، مثل: gender male or female لاختيار ذكر أو أنثى.
- القيمة التي تحدد زر radio input هي radio لتصبح بهذا الشكل <input type="radio">.
- يجب تحديد الاسم عن طريق خاصية name وتشترك خيارات السؤال الواحد داخل النموذج في الاسم نفسه؛ استخدم اسمًا مختلفًا لكل مجموعة مستقلة.
تحدد value القيمة المرسلة للخيار المحدد. غيابها يرسل on، فلا يمكن التمييز بين الخيارين؛ لذلك يحدد المثال male وfemale صراحةً.
HTML form radio input
اختيار إجابة واحدة من بين اختيارات المجموعة التي تحمل name نفسه داخل HTML form.
<form>
<input type="radio" id="male" value="male" name="gender">
<label for="male">Male</label><br>
<input type="radio" id="female" value="female" name="gender">
<label for="female">Female</label><br>
</form>يستخدم زر checkbox input لتحديد عدّة خيارات موجودة ضمن قائمة خيارات أوسع، مثل: تحديد مجموعة دورات تدريبية courses.
- القيمة التي تحدد زر checkbox input هي checkbox لتصبح بهذا الشكل <input type="checkbox">.
- يمكن تحديد خيار واحد أو أكثر من العناصر الموجودة ضمن خاصية checkbox.
تدخل مربعات الاختيار المحددة فقط في بيانات الإرسال. إذا غابت value تُرسل on مع اسم الحقل؛ في هذا المثال تميز أسماء html وcss وjs الاختيارات.
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>يستخدم زر range input لاختيار قيمة واحدة محصورة بين قيميتين عن طريق slider مؤشر.
- القيمة التي تحدد زر range input هي range لتصبح بهذا الشكل <input type="range">.
- لا يمكن اختيار أكثر من قيمة من خلال range input بداخل HTML form.
في المثال min=0 وmax=50؛ القيمة الأولية عند غياب value تقع في منتصف المجال، أي25، والخطوة الافتراضية1. لا يكفي id لإرسالها، لذلك أُضيف name.
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>يستخدم زر 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" name="color">
</form>سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.