ما معني هذا الكود وما فائدته

هذا الكود هو خاص لإضافة حقل إدخال في النموذج في html ليتم عرضه في الصفحة هكذا :

وحقل الإدخال هذا يتم إستخدامه لإستقبال البيانات من المستخدم .

ولاحظ أنه يوجد نوع type للحقل وهنا نجد أنه text أى أنه حقل نصي أى يتم إدخال نص به .

ويمكنك قراءة المزيد من الشرح والتفاصيل خلال التالي على موسوعة حسوب :

• https://wiki.hsoub.com/HTML/input

وإذا كان هذا السؤال متعلق بإحدى دروس الدورات يرجى وضع سؤالك أسفل هذا الدرس .

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

ويوجد أنواع من عنصر input نفسه، أي حقل للنصوص، حقل لكلمة المرور، حقل للبحث، حقل للبريد وهكذا، ويتم تحديد ذلك عن طريق سمة type التي نكتبها بداخل عنصر input، وتلك هي الأنواع:

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

حيث type="password" لإنشاء حقل كلمة مرور ويُظهر النص كنقاط أو نجوم.

و type="email" لإنشاء حقل بريد إلكتروني حيث يتحقق المتصفح من وجود علامة @

و type="number" هو  لإنشاء حقل أرقام فقط، أي لا يقبل حروف.

بينما سمة id و name ستجد تفصيل لهم هنا:

الكود الذي قدمته هو عبارة عن عنصر واجهة مستخدم في HTML يُستخدم لإنشاء حقل إدخال نصي (text input) في صفحة الويب.

<input type="text" id="username" name="username"><br>

العنصر <input>

• هذا العنصر هو جزء من لغة HTML ويُستخدم لإنشاء حقول إدخال تفاعلية تتيح للمستخدم إدخال البيانات.
• يمكن أن يكون له أنواع متعددة (مثل `text`, `password`, `email`, `number`, إلخ)، وفي هذه الحالة، النوع هو `text`.

السمة `type="text"

• تحدد نوع حقل الإدخال. عندما يكون `type="text"`، يعني أن الحقل يقبل نصوصًا عادية (مثل الأسماء، العناوين، إلخ).
• هذا النوع هو الأكثر شيوعًا لحقول الإدخال العامة.

السمة `id="username"

• تُعطي معرفًا فريدًا (identifier) للعنصر. هذا المعرف يُستخدم في JavaScript أو CSS لتحديد هذا الحقل المحدد.
• على سبيل المثال، يمكن استخدام `id` للوصول إلى الحقل عبر JavaScript لمعالجة البيانات (مثل قراءة القيمة التي أدخلها المستخدم) أو لتطبيق تنسيقات معينة عبر CSS.

السمة `name="username"

• تُحدد اسم الحقل الذي سيُرسل مع البيانات عند إرسال النموذج (form) إلى الخادم.
• تُستخدم هذه السمة عند معالجة النموذج في الخادم (مثل PHP، Python، أو أي لغة خلفية) لتحديد البيانات المرتبطة بهذا الحقل.
• على سبيل المثال، إذا أدخل المستخدم "Ali" في الحقل، فسيتم إرسال البيانات كـ `username=Ali` إلى الخادم.

العنصر <br>

• هذا العنصر يُضيف فاصل سطر (line break) بعد حقل الإدخال، مما يعني أن أي عنصر يأتي بعده سيظهر في السطر التالي.
• يُستخدم لتحسين تنظيم واجهة المستخدم.

حقل الإدخال النصي (`<input type="text">`) هو أحد العناصر الأساسية في تصميم صفحات الويب، وله العديد من الفوائد والاستخدامات، منها:

جمع بيانات المستخدم

• يُستخدم هذا الحقل للسماح للمستخدم بإدخال بيانات مثل الاسم، اسم المستخدم، العنوان، أو أي نص آخر.
• مثال: في نموذج تسجيل الدخول أو التسجيل، يُستخدم لحقل "اسم المستخدم" أو "البريد الإلكتروني".

إرسال البيانات إلى الخادم

• عندما يكون الحقل جزءًا من نموذج (`<form>`), يتم إرسال القيمة التي يدخلها المستخدم إلى الخادم باستخدام السمة `name`.
• مثال: في نموذج التسجيل، يمكن إرسال اسم المستخدم إلى قاعدة البيانات لتخزينه.

التفاعل مع JavaScript

• باستخدام `id`, يمكن لمطوري الواجهة الأمامية (frontend) الوصول إلى الحقل ومعالجة البيانات. على سبيل المثال:
• التحقق من أن الحقل ليس فارغًا قبل إرسال النموذج.
• عرض رسالة خطأ إذا كان الإدخال غير صالح (مثل إدخال اسم مستخدم قصير جدًا).

تحسين تجربة المستخدم

• يمكن تنسيق الحقل باستخدام CSS ليبدو جذابًا (مثل إضافة حدود، ألوان، أو حجم خط معين).
• يمكن إضافة سمات إضافية مثل `placeholder` لتوجيه المستخدم (مثل `placeholder="أدخل اسم المستخدم"`).

تعدد الاستخدامات

• يمكن استخدامه في العديد من السيناريوهات، مثل:
• إدخال اسم المستخدم في نموذج تسجيل الدخول.
• إدخال عنوان البريد الإلكتروني.
• إدخال تعليقات أو ملاحظات في نموذج تعليقات.

لتوضيح كيف يُستخدم هذا الحقل في سياق حقيقي، إليك نموذج تسجيل دخول بسيط يحتوي على حقل اسم المستخدم:

<form action="/login" method="POST">
  <label for="username">اسم المستخدم:</label><br>
  <input type="text" id="username" name="username" placeholder="أدخل اسم المستخدم" required><br>
  <label for="password">كلمة المرور:</label><br>
  <input type="password" id="password" name="password" placeholder="أدخل كلمة المرور" required><br>
  <button type="submit">تسجيل الدخول</button>
</form>

• النموذج (`<form>`) يحتوي على حقلين: اسم المستخدم وكلمة المرور.
• السمة `placeholder` تُظهر نصًا توضيحيًا داخل الحقل.
• السمة `required` تجعل الحقل إلزاميًا (لا يمكن إرسال النموذج إذا كان الحقل فارغًا).
• عند الضغط على زر "تسجيل الدخول"، يتم إرسال البيانات إلى عنوان `/login` باستخدام طريقة `POST`.

إضافة تنسيقات باستخدام CSS

   #username {
       width: 200px;
       padding: 10px;
       border: 2px solid #ccc;
       border-radius: 5px;
   }

إضافة التحقق باستخدام JavaScript

   document.getElementById("username").addEventListener("input", function() {
       if (this.value.length < 3) {
           this.style.borderColor = "red";
       } else {
           this.style.borderColor = "green";
       }
   });

إضافة سمات إضافية
maxlength="20": لتحديد الحد الأقصى لعدد الأحرف.
autocomplete="username": لتفعيل الإكمال التلقائي لاسم المستخدم.
pattern="[A-Za-z0-9]+": للسماح فقط بالأحرف والأرقام.

حقل الإدخال النصي `<input type="text" id="username" name="username">` هو عنصر أساسي في صفحات الويب يُستخدم لجمع البيانات من المستخدمين. فائدته تكمن في مرونته وإمكانية استخدامه في العديد من السيناريوهات، سواء لتسجيل الدخول، التسجيل، أو جمع المعلومات.