أكثر 5 سمات مفيدة لعنصر الإدخال يجب أن تعرفها

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

في هذه المدونة ، سنناقش ذلك بالضبط. سأشرح لك عن علامة الإدخال و 5 يجب أن تعرف سمات الإدخال المستخدمة لتطوير الويب.

علامة الإدخال

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

تعتبر علامة الإدخال قوية جدًا ومعقدة لعدد كبير من مجموعات أنواع الإدخال والسمات.

لنأخذ مثالاً على علامة الإدخال. أخذنا هنا علامة إدخال لإدخال الاسم الذي يمكن للمستخدم أن يملأ به ما لا يقل عن 4 أحرف من اسمه / اسمها و 8 أحرف كحد أقصى.

توضح الصورة الموضحة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

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

من المهم ملاحظة أن سلوك <input> يتغير بشكل كبير اعتمادًا على قيمة سمة النوع ؛ نتيجة لذلك ، يتم وصف الأنواع المختلفة في صفحات مرجعية فردية خاصة بها. إذا لم يتم توفير هذه الخاصية ، فسيتم استخدام نوع النص كقيمة افتراضية.

سمات الإدخال

عنصر <الإدخال> قوي جدًا بسبب سماته. تعتبر سمة النوع مهمة جدًا من هذا. نظرًا لأن كل عنصر <input> ، بغض النظر عن نوعه ، يعتمد على واجهة HTMLInputElement ، هذا لأن كلاهما يشتركان تقريبًا في نفس مجموعة السمات بالضبط. ومع ذلك ، في الواقع ، لها تأثير على نوع معين من مجموعة فرعية من نوع الإدخال. بالإضافة إلى ذلك ، تؤثر بعض السمات على نوع الإدخال ولكن يمكن أن تختلف باختلاف السمات.

لقد قمنا هنا بإدراج بعض سمات نوع الإدخال الأساسية التي يجب أن يعرفها المطور جيدًا:

• طول دقيقة
• الحد الاقصى للطول
• عاجز
• ضبط تلقائي للصورة
• نائب

الطول الأدنى

تعمل هذه السمة فقط مع نوع النص أو البحث أو الهاتف أو عنوان URL أو البريد الإلكتروني أو كلمة المرور في عنصر الإدخال. تحدد سمة minlength الحد الأدنى للحرف الذي سيتم إدخاله في مربع الإدخال ، مثل وحدات رمز UTF-16.

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

توضح الصورة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

الحد الاقصى للطول

تعمل هذه السمة أيضًا فقط مع نوع النص أو البحث أو الهاتف أو عنوان URL أو البريد الإلكتروني أو كلمة المرور في عنصر الإدخال مثل minilength. تحدد سمة maxlength الحد الأقصى للحرف الذي يجب إدخاله في مربع الإدخال ، مثل وحدات رمز UTF-16.

يجب أن تكون هذه قيمة عدد صحيح غير سالب أكبر من أو تساوي القيمة المحددة في minlength. إذا لم يتم إعطاء قيمة إلى maxlength أو تم تحديد قيمة غير صالحة ، فلن يكون للإدخال حد أقصى للطول.

بشكل افتراضي ، تمنع المستعرضات المستخدم من إدخال عدد الأحرف في مربع الإدخال إذا كان أكبر من الحد الأقصى المحدد للطول.

توضح الصورة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

عاجز

هذه سمة منطقية. تشير هذه السمة إلى أنه لا يجب على المستخدم التفاعل مع الإدخال.

تظهر المدخلات المعطلة على وجه التحديد بلون باهت لاستخدام شكل آخر من أشكال الإشارة إلى أنها غير متاحة للاستخدام. لا تتلقى السمة المعطلة حدث النقر ، ولن يتم إرسال قيمة النموذج المعطل مع إرسال النموذج.

توضح الصورة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

ضبط تلقائي للصورة

هذه أيضًا سمة منطقية مثل السمة المعطلة. يشير هذا إلى أن مربع الإدخال يصبح موضع التركيز عندما تكمل الصفحة عملية التحميل. أو عندما يتم عرض عنصر الإدخال الذي يحتوي على سمة ضبط تلقائي للصورة.

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

توضح الصورة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

نائب

العنصر النائب هو سمة سلسلة. إنها سمة توفر فكرة عن البيانات التي يجب إدخالها في حقل الإدخال.

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

توضح الصورة أدناه كيف سيتم عرض كود HTML في محرر.

توضح الصورة أدناه كيف سيتم عرض الإخراج أعلاه في المستعرض.

تغليف

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

على الرغم من وجود الكثير من السمات الجديدة التي تتم إضافتها يومًا بعد يوم ، بما في ذلك في HTML ، فهذه بعض السمات التي يجب معرفتها.

آمل أن تكون هذه المدونة مفيدة لك! هل تحتاج إلى مساعدة في تطوير الويب أو خدمات تصميم الويب؟ لا تتردد في الاتصال بنا!

المحرر: عمروثا