مقدمة :
تعتبر لغة HTML هي الأساس في بناء صفحات الويب، حيث توفر العديد من العناصر والأوامر التي تمكن المستخدم من إضافة المحتوى والتحكم في شكله ومظهره. ومن بين هذه العناصر تأتي عناصر الـ input التي تستخدم لجمع المعلومات والبيانات من المستخدمين وإرسالها إلى الخادم.
توفر لغة HTML العديد من أنواع الـ input، والتي تختلف في استخداماتها وطريقة عرضها. ومن خلال هذا المقال، سنتعرف على أنواع الـ input في لغة HTML وكيفية استخدامها بشكل صحيح في صفحات الويب. سنستعرض أيضاً بعض الأمثلة العملية لكل نوع من الـ input، لتوضيح كيفية استخدامها في صفحات الويب.
هناك عدة أنواع من الـ input في لغة HTML، وهي:
1- input type="text":
تستخدم هذه الصيغة لإدخال النصوص والأرقام والحروف.
2- input type="password":
تستخدم هذه الصيغة لإدخال كلمة المرور، وهي تعرض الحروف المدخلة بشكل مخفي.
3- input type="checkbox":
تستخدم هذه الصيغة لإدخال قيم متعددة من خلال تحديد خانات مربعات الاختيار.
4- input type="radio":
تستخدم هذه الصيغة لإدخال قيم متعددة عن طريق تحديد خانة واحدة فقط من مجموعة من الخيارات.
5- input type="submit":
تستخدم هذه الصيغة لإرسال النموذج الذي تم إدخاله من خلال الضغط على زر "إرسال".
6- input type="reset":
تستخدم هذه الصيغة لإعادة تعيين النموذج ومسح جميع البيانات التي تم إدخالها.
7- input type="file":
تستخدم هذه الصيغة لتحديد ملف للتحميل على الخادم.
8- input type="hidden":
تستخدم هذه الصيغة لإدخال قيم مخفية لا يراها المستخدم، وتستخدم عادة لتخزين معلومات مثل معرّفات المستخدم أو رموز التحقق.
امثلة :
1- input type="text":
هذا النوع من الـ input يستخدم لجمع النصوص والكلمات من المستخدمين، ويتم عرض النص المدخل في مربع النصوص على الصفحة.
<label for="username">اسم المستخدم:</label>
<input type="text" id="username" name="username">
2- input type="password":
هذا النوع من الـ input يستخدم لجمع كلمات المرور من المستخدمين، ويتم عرض النص المدخل بشكل مخفي على الصفحة.
<label for="password">كلمة المرور:</label>
<input type="password" id="password" name="password">
3- input type="checkbox":
هذا النوع من الـ input يستخدم لإنشاء صناديق اختيار، حيث يمكن للمستخدمين اختيار واحد أو أكثر من الخيارات.
<label for="fruits">أختر الفواكه المفضلة:</label>
<input type="checkbox" id="apple" name="fruit" value="apple">
<label for="apple">تفاح</label>
<input type="checkbox" id="banana" name="fruit" value="banana">
<label for="banana">موز</label>
<input type="checkbox" id="orange" name="fruit" value="orange">
<label for="orange">برتقال</label>
شرح المقال :
شكراً لك على قراءة هذا المقال حول استخدام الـ input في لغة HTML. نأمل أن تكون قد استفدت من هذه المعلومات وأن تستطيع الآن تخصيص نماذج صفحات الويب بشكل أفضل باستخدام هذه العناصر. لا تتردد في الرجوع إلى هذا المقال في حالة الحاجة إلى الرجوع إليه لاحقًا، أو إذا كان لديك أي أسئلة أو استفسارات.
